iOS開發：WebKit、Safari以及SafariViewController

標籤：

• 本文由CocoaChina譯者ztdj121（部落格）翻譯，校對：星夜暮晨

• Eva Diaz-Santana

• 原文：WebKit, Safari and SafariViewController

自iOS問世以來，iOS 和web總是形影相隨。畢竟，當iOS誕生的時候，網站已經有15年的曆史了（第一個網站的建立甚至可以追溯到1991年，而iOS在2007年才出現）。iPhone出現的時候就已經有很多的web內容了，這樣iOS必須提供一種方法來顯示web內容。

在iOS 9中，我們有不同的方法來渲染web內容，並且根據具體的需求，開發人員可以評估不同的方法，然後選擇一個更適合他們的方法。讓我們看看開發人員可以採用的不同的解決方案。

WebView

WebKit是OS X和iOS中Safari背後的架構和渲染引擎。它允許解析和渲染html，載入並顯示圖片，以及執行JavaScript代碼。

UIWebView類在iOS 2中引入，是UIKit的一部分。它現在被廣泛地應用，而且已經有相當長的一段時間了。在一個iOS應用中，UIWebView是唯一一個可以嵌入web內容的工具。

在iOS 8上，Apple引入了WKWebView，以代替 iOS 上的UIWebView，以及OS X上的WebView。新的API介面給兩個平台帶來了完全相同的功能，簡化了應用和網頁之間的通訊流程，同時多進程架構也可以用在Safari上。

WKWebView提供了許多以前只能在 Safari 上使用的特性。它使用硬體加速器和Core Animation提供一個60fps的滾動響應、快速執行JavaScript代碼，和像內建在Safari上的滑動後退和縮放的手勢。其超越UIWebView的一個主要改進就是簡化了應用-網頁（app-webpage）間的通訊、簡化了應用和其 web 內容之間互動和資料是如何進行傳遞的。

WKWebView很容易實現。這裡用Swift語言寫的代碼證明了這點：

123456

let viewFrame = ... //1let webView = WKWebView.init(frame: viewFrame) //2let url = NSURL(string: "https://www.invasivecode.com") //3let request = NSURLRequest(URL: url!) //4webView.loadRequest(request) //5view.addSubview(webView) //6

以下是Objective-C版本：

123456

CGRect viewFrame = ... //1WKWebView *webView = [[WKWebView alloc] initWithFrame:viewFrame]; //2NSURL *url = [NSURL URLWithString:@"https://www.invasivecode.com"]; //3NSURLRequest *request = [NSURLRequest requestWithURL:url]; //4[webView loadRequest:request]; //5[self.view addSubview:webView]; //6

第一行定義了用於第二行初始化webView的frame。第三行建立並返回了一個用URL字串初始化的NSURL對象。第四行建立並返回了一個URL請求。第五行裡，網頁載入了URL請求。最後，第六行把網頁加到視圖控制器裡的頁面上。

這邊是以上代碼運行出來的效果：

WKWebView是web內容的一個視圖，它允許使用Javascript和html渲染。你可以添加自己的返回按鈕，前進按鈕和進度列指示器。在iOS 9中，你可以另外安全地負載檔案的url和資料。

WKWebsiteDataStore在iOS 9和OS X 10.11中引入，是一個新的API，它用於管理一個網站網站儲存的資料，例如cookies，它是你網頁的WKWebViewConfiguration上的一個可讀寫的屬性。你可以根據類型或者時間來刪除資料，例如cookies和緩衝，你可以用非持久性資料存放區來改變更配置置。

WKWebView提供了很多特性，如果你有web內容並且需要自訂，你可以用這個工具，使用Javascript參數來即時控制頁面。

然而，如果你只是想顯示web內容，你既可以用Safari，也可以用SFSafariViewController。讓我們來看看這兩種方法。

Safari

用Safari允許你將渲染 web 內容的任務委託 Safari。這樣你就可以比在使用WKWebView時少寫些代碼了。

要從應用程式裡啟動Safari的話，你可以調用UIApplication中的openURL：方法，然後iOS會把Safari帶到前台，把你的應用程式放到後台。

iOS9上的一個新的特性是允許使用者通過一個返回按鈕回到你的應用裡，這個按鈕自動出現在使用者介面的左上方上（看裡的A）。

由Safari提供的一樣很好的使用者體驗，這對開發人員來說是一個簡單的解決方案。下一張圖片突出了UI組件（看的B和C位置），你可以輕鬆獲得這個功能。

這裡有一些例子代碼向你展示了如何從你的應用裡啟動Safari，來渲染一些web內容：

Swift

 

1234	@IBAction func showWebSite() {    let url = NSURL(string: "https://www.invasivecode.com")    UIApplication.sharedApplication().openURL(url!)}

這有Objective-C語言寫的相同原始碼：

1234	- (IBAction)showWebSite:(id)sender {    NSURL *url = [NSURL URLWithString:@"https://www.invasivecode.com"];    [[UIApplication sharedApplication] openURL:url];}

Safari View Controller

讓我們來看下SFSafariViewController。這個類已經在iOS9裡引入了。使用SFSafariViewController，Safari被嵌入到你的應用程式裡，使用者就不用退出你的應用了。

Safari ViewController消除了幹擾，把URL欄位轉換成唯讀（看中的D），以及一個完成按鈕用以回到你的應用中（看圖片上的E）。

這裡，有些例子代碼展示了通過SafariViewController如何給你的使用者提供web內容。

讓我們先看看用Swift語言的實現：

12345

@IBAction func showWebSite() {    let url = NSURL(string: "https://www.invasivecode.com")    let safariVC = SFSafariViewController(URL: url!)    self.showViewController(safariVC, sender: nil)}

現在來看下用Objective-C語言寫的相同的實現：

12345

- (IBAction)showWebSite:(id)sender {    NSURL *url = [NSURL URLWithString:@"https://www.invasivecode.com"];    SFSafariViewController *safariVC = [[SFSafariViewController alloc] initWithURL:url];    [self showViewController:safariVC sender:nil];}

以上代碼的結果和的相似：

現在，讓我們把你在應用程式中用到的SafariViewController提供的特點分一一分類。

一個熟悉的使用者介面

SafariViewController提供了和Safari一樣的介面，允許你在應用程式中無縫整合，更尊重你應用的色調。你會發現它有Safari提供的相同的共用方法，使用者可以將網頁添加到閱讀清單裡，或者把頁面發送給朋友（看的F）。此外，開發人員也可以添加專用按鈕到表單上。

密碼、信用卡和聯絡卡自動填滿

SFSafariViewController允許使用者安全按地自動填滿iCloud鑰匙串裡的敏感資訊和認證。這包括填充密碼、信用卡和連絡人資訊。

用Safari共用的Cookies

Safari和SFSafariViewController共用Cookies，意味著兩者間的使用者會話和偏好依然存在。比如，如果使用者已經用Safari註冊或者將他們的密碼存在iCloud鑰匙串裡，授權一個應用程式訪問Twitter或者Facebook的時候，將會是一個流暢的使用者體驗。

Safari閱讀器

Safari閱讀器按鈕將會允許使用者顯示一個易讀版本的網站，供使用者選擇提供的主題和字型。

Content Blocking(內容阻擋/內容攔截外掛程式)

iOS9開始，任何應用程式可以寫一個web內容的描述，使用者瀏覽網頁的時候Safari和SafariViewController進行攔截。此外，使用者也可以在設定裡新增內容攔截元素（Content blocking elements）。那些元素將被攔截，不展示給使用者。這意味著應用程式用Safari或者SafariViewController展示的網頁內容，將會被使用者或者開發人員選擇的內容攔截元素（Content blocking elements）影響。內容攔截元素（Content blocking elements）可以是網頁或者攔截載入的單獨的元素，就像頁面裡的所有的圖片和指令碼一樣。

總結

當在你的應用程式裡展示web內容，你可以選擇不同的方法，這取決於你的需求。如果你需要修改或操作web內容，iOS8中引入的WKWebView為我們提供了極大的靈活性。在應用程式裡啟動Safari，會給使用者和Safari提供的相同體驗，但是你的使用者可能不會再回到你的應用程式裡。SFSafariViewController像是在你的應用中嵌入了Safari，而且很容易使用。

關於作者

Eva Diaz-Santana（@evdiasan）是invasiveCode的創始人。2008年以來，她開發iOS應用，並且教授iOS開發課程。同時她在蘋果公司工作，擔任Cocoa架構師和使用者體驗設計師。

問啊-一鍵呼叫程式員答題神器，牛人一對一服務，開發人員編程必備官方網站：www.wenaaa.com

QQ群290551701 聚集很多互連網精英，技術總監，架構師，專案經理！開源技術研究，歡迎業內人士，大牛及新手有志於從事IT行業人員進入！

iOS開發：WebKit、Safari以及SafariViewController