WKWebView入坑指南

前言

开发 App 的过程中，常常会遇到在 App 内部加载网页，通常用 UIWebView 加载。iOS 8.0 和 OS X 10.10 以后，苹果推出了新框架 Webkit（使用时导入），提供了替换UIWebView 的组件 WKWebView。使用WKWebView最为明显的有点事内存占用比UIWebView内存占用小很多，我做过一个对比，用两个控件加载我们的同一个H5页面，使用 UIWebView 内存增加了20M多，而使用 WKWebView 只增加了1M多。自己可以动手试试做个比较。也有很多人说在加载速度上有提升，本人测试了一下，在加载时间上并没有明显的提升。官方文档是这样描述的

Important
Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView.

很明显在 iOS 8.0 和 OS X 10.10 以后，苹果官方推荐使用 WKWebView，而不是 UIWebView 或 WebView，所以使用 WKWebView 是一种趋势，下面说说 WKWebView 的介绍和使用。

CoverImage.jpg

简介

• 更多的支持 HTML5 的特性
• 官方宣称的高达60fps的滚动刷新率以及内置手势
• 与 Safari 相同的 JavaScript 引擎
• 将 UIWebViewDelegate 与 UIWebView 拆分成了14个类与3个协议(Webkit 官方文档说明)
• 增加加载进度属性：estimatedProgress

WebKit框架概览.png

Class

• WKBackForwardList: 之前访问过的 web 页面的列表，可以通过后退和前进动作来访问到。
• WKBackForwardListItem: webview 中后退列表里的某一个网页。
• WKFrameInfo: 包含一个网页的布局信息。
• WKNavigation: 包含一个网页的加载进度信息。
• WKNavigationAction: 包含可能让网页导航变化的信息，用于判断是否做出导航变化。
• WKNavigationResponse: 包含可能让网页导航变化的返回内容信息，用于判断是否做出导航变化。
• WKPreferences: 概括一个 webview 的偏好设置。
• WKProcessPool: 表示一个 web 内容加载池。
• WKUserContentController: 提供使用 JavaScript post 信息和注射 script 的方法。
• WKScriptMessage: 包含网页发出的信息。
• WKUserScript: 表示可以被网页接受的用户脚本。
• WKWebViewConfiguration: 初始化 webview 的设置。
• WKWindowFeatures: 指定加载新网页时的窗口属性。
• WKWebsiteDataStore: 包含网页数据存储和查找。

Protocols

• WKNavigationDelegate: 提供了追踪主窗口网页加载过程和判断主窗口和子窗口是否进行页面加载新页面的相关方法。
• WKUIDelegate: 提供用原生控件显示网页的方法回调。
• WKScriptMessageHandler: 提供从网页中收消息的回调方法。

WKWebView中的三个代理

1. WKNavigationDelegate

// *******   页面跳转的代理方法有三种，分为（收到跳转与决定是否跳转两种）   *******
// 在发送请求之前，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    NSString *method = NSStringFromSelector(_cmd);
    NSLog(@"在发送请求之前，决定是否跳转  *******  %@  *******", method);
    // 在请求加载前决定是否继续加载当前请求
    //decisionHandler(WKNavigationActionPolicyCancel);
    decisionHandler(WKNavigationActionPolicyAllow);
}

// 接收到服务器跳转请求之后调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation
{
    NSString *method = NSStringFromSelector(_cmd);
    NSLog(@"接收到服务器跳转请求之后调用  *******  %@  *******", method);
}

// 在收到响应后，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler
{
    decisionHandler(WKNavigationResponsePolicyAllow);
    NSString *method = NSStringFromSelector(_cmd);
    NSLog(@"在收到响应后，决定是否跳转  *******  %@  *******", method);
}

// *******   用来追踪加载过程（页面开始加载、加载完成、加载失败）   *******
// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation
{
    NSString *method = NSStringFromSelector(_cmd);
    NSLog(@"页面开始加载  *******  %@  *******", method)
}

// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation
{
    NSString *method = NSStringFromSelector(_cmd);
    NSLog(@"内容开始返回  *******  %@  *******", method)
}

// 页面加载完成之后调用（有时候此方法执行特别慢）
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
    NSString *method = NSStringFromSelector(_cmd);
    NSLog(@"页面加载完成  *******  %@  *******", method)
    
    NSString *url = [webView.URL absoluteString];
    NSString *title = webView.title;
    // 注意：此方法有时候会执行特别慢，由于我在此方法里需要获取 webView.title 并设置导航栏的 title，导致有时候出现导航栏标题显示很慢，给人的错觉是标题为空
    // 解决办法：让H5加载的时候，H5调用我们native的一个方法，让他们去设置我们导航栏的 title，此处涉及到了 OC 与 JS 的交互，后面会讲到
    
    NSLog(@"title = %@, url = %@", title, url);
}

2. WKUIDelegate

- (nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures
{
    NSString *method = NSStringFromSelector(_cmd);
    NSLog(@"创建一个新的webView时调用  *******  %@  *******", method);
    if (!navigationAction.targetFrame.isMainFrame) {
        [webView loadRequest:navigationAction.request];
    }
    
    return nil;
}

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
    NSString *method = NSStringFromSelector(_cmd);
    NSLog(@"界面弹出警告框时调用  *******  %@  *******", method);
    //[self showMsg:message];
    NSLog(@"message = %@", message);
    completionHandler();
}

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler
{
    NSString *method = NSStringFromSelector(_cmd);
    NSLog(@"界面弹出确认框时调用  *******  %@  *******", method);
    //[self showMsg:message];
    NSLog(@"message = %@", message);
    completionHandler(YES);
}

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler
{
    NSString *method = NSStringFromSelector(_cmd);
    NSLog(@"界面弹出输入框时调用  *******  %@  *******", method);
}

注：在iOS 9 和 iOS 10 的时候添加了新的方法，这里就不一一举例了，有兴趣的同学自己去研究下。

3. WKScriptMessageHandler

这个协议中包含一个必须实现的方法，这个方法是 native 与 web 端交互的关键，它可以直接将接收到的 JS 脚本转为 OC 或 Swift 对象。

@required

/*! @abstract Invoked when a script message is received from a webpage.
 @param userContentController The user content controller invoking the
 delegate method.
 @param message The script message received.
 */
#pragma mark - WKScriptMessageHandler -
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    if ([message.name isEqualToString:@"testMethod1"]) {
        NSString *info = [NSString stringWithFormat:@"字符串：%@", message.body];
        NSLog(@"JS 调用 Native 的 testMethod1 方法，传递的参数是 %@", info);
    }

    if ([message.name isEqualToString:@"testMethod2"]) {
        NSArray *array = message.body;
        NSString *info = [NSString stringWithFormat:@"数组：元素1：%@  元素2：%@", array.firstObject, array.lastObject];
        NSLog(@"JS 调用 Native 的 testMethod2 方法，传递的参数是 %@", info);
    }
}

// 与此协议配合使用的（其实就是声明 Native 有方法 testMethod1 和 testMethod2）
[_webView.configuration.userContentController addScriptMessageHandler:self name:@"testMethod1"];
[_webView.configuration.userContentController addScriptMessageHandler:self name:@"testMethod2"];
// JS 端代码如下
//window.webkit.messageHandlers.testMethod1.postMessage('冬冬是冬瓜')
//window.webkit.messageHandlers.testMethod2.postMessage(['涂冬冬是冬冬', '徐冬冬也是冬冬'])

// 注意：在页面消失的时候，记得调用下面方法，否则会导致内存泄漏
[_webView.configuration.userContentController removeScriptMessageHandlerForName:@"testMethod1"];
[_webView.configuration.userContentController removeScriptMessageHandlerForName:@"testMethod2"];

填坑

1. 关于 Cookie

在使用的时候由于需求，需要在 webView 中设置 Cookie，天真的我一如既往的就这么做了，代码如下：

// 添加 Cookie
- (void)configCookie
{
    NSDictionary *inAppDic = @{NSHTTPCookieName:@"test_inApp",
                               NSHTTPCookieValue:@"1",
                               NSHTTPCookieDomain:@".test.com",
                               NSHTTPCookiePath:@"/"};
    NSHTTPCookie *cookieInApp = [NSHTTPCookie cookieWithProperties:inAppDic];
    [[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:cookieInApp];
    
    NSDictionary *appVersionDic = @{NSHTTPCookieName:@"test_appVersion",
                                    NSHTTPCookieValue:@"2.8.9",
                                    NSHTTPCookieDomain:@".test.com",
                                    NSHTTPCookiePath:@"/"};
    NSHTTPCookie *cookieAppVersion = [NSHTTPCookie cookieWithProperties:appVersionDic];
    [[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:cookieAppVersion];
}

// 删除 Cookie
- (void)deleteCookie
{
    NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
    for (NSHTTPCookie *cookie in [storage cookies]) {
        if ([cookie.name isEqualToString:@"test_inApp"] || [cookie.name isEqualToString:@"test_appVersion"]) {
            [storage deleteCookie:cookie];
        }
    }
}

事实证明：使用 WKWebView 时，这样设置 Cookie 是无效的。查了很多资料，主要有如下两种设置 Cookie 的方法。
方法一：在 WKWebView 加载请求的时候在请求头中注入 Cookie （针对于服务端）

- (void)configCookieWithRequest:(NSMutableURLRequest *)request
{
    [self configCookie];
    
    if (request.URL) {
        // 方法1（从NSHTTPCookieStorage中获取，手动添加到请求头中）
        NSDictionary *cookiesDic = [NSHTTPCookie requestHeaderFieldsWithCookies:[[NSHTTPCookieStorage sharedHTTPCookieStorage] cookiesForURL:request.URL]];
        if ([cookiesDic objectForKey:@"Cookie"]) {
            [request addValue:cookiesDic[@"Cookie"] forHTTPHeaderField:@"Cookie"];
        }
        // log: = {Cookie:test_inApp=1; test_appVersion=2.8.9}

        // 方法2（直接拼接好Cookie字符串，添加到请求头中）
        NSString *cookieStr = nil;
        NSString *cookieInApp = @"test_inApp=1";
        cookieStr = [NSString stringWithFormat:@"%@", cookieInApp];
        //[request addValue:cookieInApp forHTTPHeaderField:@"Cookie"];
    
        NSString *cookieAppVersion = [NSString stringWithFormat:@"test_appVersion=%@", @"2.8.9"];
        cookieStr = [NSString stringWithFormat:@"%@; %@", cookieStr, cookieAppVersion];
        //[request addValue:cookieAppVersion forHTTPHeaderField:@"Cookie"];
        // 切忌不要多次使用 addValue 方法添加 NSString 类型的 Cookie 字符串，这样生成的 Cookie 字符串是以 "," 号分隔的，注意上面方法1中的 cookiesDic[@"Cookie"] 是 NSHTTPCookie 类型是不存在此问题的，对比两者的不同。
        // log: = {Cookie:test_inApp=1,test_appVersion=2.8.9}
    
        // 此处也可使用 addValue 方法添加
        //[request addValue:cookieStr forHTTPHeaderField:@"Cookie"];
        [request setValue:cookieStr forHTTPHeaderField:@"Cookie"];
        // 正确的是以 ";" 号分隔
        // log: = {Cookie:test_inApp=1; test_appVersion=2.8.9}
    }
    
    NSDictionary *dic = request.allHTTPHeaderFields;
    NSLog(@"allHTTPHeaderFields = %@", dic);
}

方法二：在 JS 中注入 Cookie （针对于本地）

- (void)configCookieScript
{
    // 将所有 Cookie 以 document.cookie = 'key=value'; 形式进行拼接
    NSString *cookieInApp = @"test_inApp =1";
    NSString *cookieAppVersion = [NSString stringWithFormat:@"test_appVersion =%@", @"2.8.9"];
    NSString *cookieValue = [NSString stringWithFormat:@"document.cookie = '%@'; document.cookie = '%@'", cookieInApp, cookieAppVersion];
    
    WKUserScript *cookieScript = [[WKUserScript alloc] initWithSource:cookieValue injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
    [_webView.configuration.userContentController addUserScript:cookieScript];
}

对于以上两种方式添加 Cookie 其实意义是不一样的，第一种是针对于服务端在请求头中添加，第二种是针对于本地，直接在 JS 中注入。根据需求可以配合使用，如果 H5 页面只取服务端的 Cookie 则使用第一种添加方法；如果只取本地的 Cookie 则使用第二种方法即可，如果都取的话，则两种一起使用，不过个人建议还是做个 Cookie 同步，即用第一种方法添加完后再使用第二种方法同步添加到本地。

2. 关于 缓存

在 WKWebsiteDataStore 出现之前（iOS 9 中才出现），WKWebView 是没有缓存，也无从清理。WKWebView 是基于 WebKit 框架的，它会忽视先前使用的网络存储 NSURLCache, NSHTTPCookieStorage, NSCredentialStorage等，它也有自己的存储空间用来存储cookie和cache，其他的网络类如NSURLConnection 是无法访问到的。

// 清理缓存
- (void)removeWebViewDataCache
{
    if (IOS_GREATER_THAN_OR_EQUAL_TO(@"9.0")) {
        // iOS 9 以后终于可以使用 WKWebsiteDataStore 来清理缓存
        NSSet *types = [NSSet setWithArray:@[WKWebsiteDataTypeDiskCache,
                                             WKWebsiteDataTypeMemoryCache,
                                             //WKWebsiteDataTypeCookies,
                                             ]];
        NSDate *dateFrom = [NSDate date];
        [[WKWebsiteDataStore defaultDataStore] removeDataOfTypes:types modifiedSince:dateFrom completionHandler:^{
            NSLog(@"clear webView cache");
        }];
    }
    else {
        // iOS 8 可以通过清理 Library 目录下的 Cookies 目录来清除缓存
        NSString *libraryPath = NSSearchPathForDirectoriesInDomains(NSLibraryDirectory, NSUserDomainMask, YES).firstObject;
        NSString *cookiesFolderPath = [libraryPath stringByAppendingString:@"/Cookies"];
        [[NSFileManager defaultManager] removeItemAtPath:cookiesFolderPath error:nil];
    }
}

目前就遇到这些，以后有新坑接着填坑。