iOS WKWebView詳解

UIWebView就不用說了，這個過時了，現在iOS8以後建議都使用WKWebView。

WKWebView 是現代 WebKit API 在 iOS 8 和 OS X Yosemite 應用中的核心部分。它代替了 UIKit 中的UIWebView 和 AppKit 中的 WebView，提供了統一的跨雙平臺 API。

自詡擁有 60fps 滾動刷新率、內置手勢、高效的 app 和 web 信息交換通道、和 Safari 相同的 JavaScript 引擎，WKWebView 毫無疑問地成爲了 WWDC 2014 上的最亮點。

【UIWebView 和 WKWebView 的區別】
WKWebView 更快（佔用內存可能只有 UIWebView 的1/3~1/4），沒有緩存，更爲細緻地拆分了 UIWebViewDelegate 中的方法。

【爲什麼現在是時候從 UIWebView 遷移到 WKWebView 了】
截止到我寫這篇文章的時候，據 mixpanel 的數據，iOS 9 佔有率已達 58.55%，iOS 8 佔有率達到了 34.78%，iOS 7 及更早版本是 6.66%，而那 6.66% 應該大部分都是對手機使用極度不頻繁的人。所以從現在開始，再開發 App 只兼容 iOS 8 和 iOS 9 兩個版本就可以了（如果你的產品對覆蓋率要求不是很苛刻的話）。WKWebView 是 iOS 8 之後纔有的 WebKit 中的內容，所以之前我們要同時兼容 iOS 7 和 iOS 8 的時候，可以推辭說 UIWebView 和 WKWebView 一起做太麻煩了，現在可沒有理由拒絕新東西了。

目前iOS各個版本市場使用率參見：https://developer.apple.com/support/app-store/

[常用代理方法]

在 WKWebView 中，UIWebViewDelegate 與 UIWebView 被重構成了14類與3個協議，下面給出一些在 UIWebView 中常用的方法的 WKWebView 版本。

 

//準備加載頁面
UIWebViewDelegate - webView:shouldStartLoadWithRequest:navigationType
WKNavigationDelegate - webView:didStartProvisionalNavigation:
 

//已開始加載頁面，可以在這一步向view中添加一個過渡動畫
UIWebViewDelegate - webViewDidStartLoad:
WKNavigationDelegate - webView:didCommitNavigation:
 

//頁面已全部加載，可以在這一步把過渡動畫去掉
UIWebViewDelegate - webViewDidFinishLoad:
WKNavigationDelegate - webView:didFinishNavigation:
 

//加載頁面失敗
UIWebViewDelegate - webView:didFailLoadWithError:
WKNavigationDelegate - webView:didFailNavigation:withError:
WKNavigationDelegate - webView:didFailProvisionalNavigation:withError:

　　

以上方法分別存在於 UIWebViewDelegate 和 WKNavigationDelegate 中。
如果你之前只是用到了以上列出的 UIWebViewDelegate 中的幾個方法，那麼只是簡單地換一個方法名，讓你的 ViewController 繼承 WKNavigationDelegate ，繼續用就可以了。想要更多內容可以自己用 cmd鍵+鼠標左擊『WKNavigationDelegate』通過 Xcode 查看。
要注意的是 webview.delegate = self 需要改寫爲 webview.navigationDelegate = self。

JS交互

在 UIWebView 中，一句簡單的webView.stringByEvaluatingJavaScriptFromString() 就可以用 JS 腳本操縱 WebView，在 WKWebView 中，我們可能需要用到 WKScriptMessageHandler 這個協議中的 func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) 方法。

下面的示例代碼用於從 WKWebView 中獲取網頁中的文本。

let js = "window.webkit.messageHandlers.observe.postMessage(document.body.innerText);" // 注意這裏的observe字段是自己寫的，不是固定的寫法，參考第6行
    let script = WKUserScript(source: js, injectionTime: WKUserScriptInjectionTime.AtDocumentEnd, forMainFrameOnly: true) // 這裏的 AtDocumentEnd 字段是指網頁中的內容加載完畢後再插入 JS 腳本，你也可以選擇 AtDocumentStart，在 document element 剛剛創建時就插入腳本，看具體需求
    let config = WKWebViewConfiguration()
    config.userContentController.addUserScript(script)
    config.userContentController.addScriptMessageHandler(self, name: "observe") // 對應第一行 JS 腳本中的observe字段
    //初始化WKWebView
    let webview = WKWebView(
        frame: CGRectMake(0, 0, self.view.frame.width, self.view.frame.height),
        configuration: config)
    webview.navigationDelegate = self
    self.view.addSubview(webview)
    //加載網頁
    webview.loadRequest(NSURLRequest(URL: NSURL(string: "http://www.jianshu.com")!))

　　

可能你也注意到了，把 JS 腳本注入到 WebView 的途徑是初始化一個 WebView，所以你需要在 WebView 初始化之前寫好自己的腳本。當然如果你不需要 JS 交互，直接用一個 frame 來初始化 WebView，去掉 configuration 參數就好了。

然而，我們如何拿到從 WKWebView 中抓取到的文本呢（通過 document.body.innerText 這一句）？
如上面所說，讓你的 ViewController 在繼承了 WKNavigationDelegate 之後再繼承一下 WKScriptMessageHandler 。然後實現 WKScriptMessageHandler 中唯一的一個方法：

func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage){
    let str:NSString = message.body as! NSString // 因爲我們抓取到的是文本，這裏把 message.body 強制轉換爲 NSString，如果你通過 JS 拿到的是其他信息，按需轉換
    print(str)
}

　　

乍一看這裏可能會有疑惑：我們給 WKWebView 綁定了 WKNavigationDelegate，但是 WKScriptMessageHandler 並沒有提供代理方法啊。其實與此相對應的過程出現在上一段代碼中的第5行：config.userContentController.addScriptMessageHandler 這一句。

 刪除緩存

iOS開發, 混編成爲一種趨勢。在中國，用戶量較大的幾個代表性app，淘寶，微信，支付寶，京東等，無不採用H5與 native混編模式。H5與native的交互變得越來越頻繁，從而出現的問題也越來越多，下面我們一起討論關於WKWebView的緩存問題。

場景：

當我們的APP已經開發完成，上傳appstore以後，H5更新將不再受appstore得限制，可以隨時去做更改。但WKWebView 有默認的緩存功能，即便H5做了更改，app上顯示的依舊是老得頁面。爲了解決這一問題，我們就會用到WKWebView的刪除 緩存功能。

iOS9 WKWebView新方法：

NSSet *websiteDataTypes = [NSSet setWithArray:@[
                        WKWebsiteDataTypeDiskCache,
                        WKWebsiteDataTypeOfflineWebApplicationCache,
                        WKWebsiteDataTypeMemoryCache,
                        WKWebsiteDataTypeLocalStorage,
                        WKWebsiteDataTypeCookies,
                        WKWebsiteDataTypeSessionStorage,
                        WKWebsiteDataTypeIndexedDBDatabases,
                        WKWebsiteDataTypeWebSQLDatabases
                    ]];
//你可以選擇性的刪除一些你需要刪除的文件 or 也可以直接全部刪除所有緩存的type  
//NSSet *websiteDataTypes = [WKWebsiteDataStore allWebsiteDataTypes];
NSDate *dateFrom = [NSDate dateWithTimeIntervalSince1970:0];
[[WKWebsiteDataStore defaultDataStore] removeDataOfTypes:websiteDataTypes   
modifiedSince:dateFrom completionHandler:^{
       // code
    }];

但開發app必須要兼容所有iOS版本，可是iOS8，iOS7沒有這種直接的方法，那該怎麼辦呢？ （iOS7.0只有UIWebView， 而iOS8.0是有WKWebView， 但8.0的WKWebView沒有刪除緩存方法。） 針對與iOS7.0、iOS8.0、iOS9.0 WebView的緩存，我們找到了一個通吃的辦法:

NSString *libraryDir = NSSearchPathForDirectoriesInDomains(NSLibraryDirectory,   
NSUserDomainMask, YES)[0];
NSString *bundleId  =  [[[NSBundle mainBundle] infoDictionary]   
objectForKey:@"CFBundleIdentifier"];
NSString *webkitFolderInLib = [NSString stringWithFormat:@"%@/WebKit",libraryDir];
NSString *webKitFolderInCaches = [NSString   
stringWithFormat:@"%@/Caches/%@/WebKit",libraryDir,bundleId];
 NSString *webKitFolderInCachesfs = [NSString   
 stringWithFormat:@"%@/Caches/%@/fsCachedData",libraryDir,bundleId];

NSError *error;
/* iOS8.0 WebView Cache的存放路徑 */
[[NSFileManager defaultManager] removeItemAtPath:webKitFolderInCaches error:&error];
[[NSFileManager defaultManager] removeItemAtPath:webkitFolderInLib error:nil];

/* iOS7.0 WebView Cache的存放路徑 */
[[NSFileManager defaultManager] removeItemAtPath:webKitFolderInCachesfs error:&error];

H5更新發版的的時候，做一次清除WebView緩存， app的WebView就會顯示最新的H5頁面了。

 

參考和轉自文獻：

http://nshipster.cn/wkwebkit/

http://www.jianshu.com/p/f94cad074196

http://www.jianshu.com/p/6ba2507445e4

H5容器的一些探究：UIWebView和WKWebView的比較和選擇

刪除WKWebView緩存