WKWebView入坑指南

前言

开发 App 的过程中，常常会遇到在 App 内部加载网页，通常用 UIWebView 加载。iOS 8.0 和 OS X 10.10 以后，苹果推出了新框架 Webkit（使用时导入<WebKit/WebKit.h>），提供了替换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];
    }
}

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,839评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,543评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,116评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,371评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,384评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,111评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,416评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,053评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,558评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,756评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,324评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2赞 345

推荐阅读更多精彩内容

  • WKWebview 处理
    前言 关于UIWebView的介绍，相信看过上文的小伙伴们，已经大概清楚了吧，如果有问题，欢迎提问。 本文是本系列...
    CoderLF阅读 8,944评论 2赞 12
  • UIWebView/WkWebView用法的一些总结
    iOS 的 Cookie 存取 https://juejin.im/entry/58d4c4cc44d904006...
    Farmers阅读 5,894评论 0赞 16
  • 面试题
    Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,089评论 1赞 32
  • WKWebView的 开发坑
    1、WKWebView 白屏问题WKWebView 自诩拥有更快的加载速度，更低的内存占用，但实际上 WKWebV...
    iosRn阅读 2,095评论 1赞 10
  • WKWebView 那些坑(转自 腾讯Bugly)
    导语 WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件，用以替代 UIKit...
    hope7th阅读 14,980评论 4赞 65