iOS WKWebView

WKWebView

UIWebView从 iOS2 就有,iOS8 以后,WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用、内存泄漏的 UIWebView,速度更快了,占用内存少了,体验更好了。

优势:

  1. 性能、稳定性、功能方面有很大提升。
  2. 支持更多 HTML5 的特性。
  3. 高达60FPS的滚动刷新率、内置手势。
  4. Safari 相同的 Nitro JS 引擎性能,对HTML5性能也提升了4倍。
  5. 加载耗时差别不大,WKWebView 的内存优化减少了几乎4倍。
  6. 无论跳转多少 Web 页面都没有内存泄漏了。
  7. 将 UIWebViewDelegate 与 UIWebView 拆分成了14类和3个协议,包含更细节功能的实现。
WKWebView

1. 关于缓存

WKWebView 是基于 WebKit 框架的,它会忽视先前使用的网络存储 NSURLCache, NSHTTPCookieStorage, NSCredentialStorage等,它也有自己的存储空间用来存储cookie和cache,其他的网络类如NSURLConnection 是无法访问到的。

WKWebView发起的资源请求也是不经过NSURLProtocol的,导致无法拦截或自定义新请求。

iOS 9以后终于可以使用 WKWebsiteDataStore 来清理缓存,iOS 8可以通过清理 Library 目录下的 Cookies 目录来清除缓存。代码如下:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 9.0) {
        NSSet *types = [NSSet setWithArray:@[WKWebsiteDataTypeDiskCache,
                                             WKWebsiteDataTypeMemoryCache,
                                             WKWebsiteDataTypeOfflineWebApplicationCache,
                                             WKWebsiteDataTypeCookies,
                                             WKWebsiteDataTypeSessionStorage,
                                             WKWebsiteDataTypeLocalStorage,
                                             WKWebsiteDataTypeWebSQLDatabases,
                                             WKWebsiteDataTypeIndexedDBDatabases]];
        NSDate *sinceDate = [NSDate date];
        [[WKWebsiteDataStore defaultDataStore] removeDataOfTypes:types modifiedSince:sinceDate completionHandler:^{
            NSLog(@"clear web cache");
        }];
    } else {
        NSString *libraryPath = NSSearchPathForDirectoriesInDomains(NSLibraryDirectory, NSUserDomainMask, YES).firstObject;
        NSString *cookiesFolderPath = [libraryPath stringByAppendingString:@"/Cookies"];
        [[NSFileManager defaultManager] removeItemAtPath:cookiesFolderPath error:NULL];
    }

2. 关于 Cookie

UIWebVIew自动去获取Cookie,因为在调用登录接口的时候无论是AFNetworking,还是其他,登录成功之后都会自动保存在[NSHTTPCookieStorage sharedHTTPCookieStorage].cookies 中。

  • WKWebView 的 Cookie 存储在它的私有存储 WKWebsiteDataStore 中。 WKWebsiteDataStore 中存储了包括 cookies、disk、memory caches、WebSQL、IndexedDB 数据库和本地存储等Web内容。
  • UIWebView 在浏览网页后会将网页中的 cookie 自动存入 NSHTTPCookieStorage 标准容器中。在后续访问中会将 cookie 自动带到 request 请求当中。

WKWebView 的存储体系与 UIWebVIew 完全不一样,最终采用每次 Web 开始加载之时判断 Cookie 是否存在,否则手动添加重新加载,代码如下:

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    
    WKNavigationActionPolicy policy = WKNavigationActionPolicyAllow;
    NSURL *url = navigationAction.request.URL;
    if (policy == WKNavigationActionPolicyAllow && [url.host containsString:@"showjoy.com"]) {
        NSDictionary *dic = navigationAction.request.allHTTPHeaderFields;
        NSString *cookie = [dic objectForKey:@"Cookie"];
        if (cookie == nil) {
            NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:navigationAction.request.URL];
            request.allHTTPHeaderFields = dic;
            [request setValue:@"替换custom cookie" forHTTPHeaderField:@"Cookie"];
            [webView loadRequest:request];
            policy = WKNavigationActionPolicyCancel;
        }
    }
    if (decisionHandler) {
        decisionHandler(policy);
    }
}

3. 关于跨域

WebKit框架对跨域进行了安全性检查限制,不允许跨域,比如从一个 HTTP 页对 HTTPS 发起请求是无效的(有一个界面要跳到支付宝页面去支付,死活没反应)。而系统的 Safari ,iOS 10出现的 SFSafariViewController 都是支持跨域的,
解决跨域问题,代码如下:

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    WKNavigationActionPolicy policy = WKNavigationActionPolicyAllow;
    NSURL *url = navigationAction.request.URL;
    if (WKNavigationTypeLinkActivated == navigationAction.navigationType && [url.scheme isEqualToString:@"https"]) {
        [[UIApplication sharedApplication] openURL:url];
        policy = WKNavigationActionPolicyCancel;
    }
    if (decisionHandler) {
        decisionHandler(policy);
    }
}

4. 关于 JavaScript 交互

UIWebView 使用的 JavaScriptCore 框架,交互时为 JavaScript 运行的上下文环境 JSContext 注入对象 Bridge;WKWebView 使用的 WebKit 框架,交互时为 webkit.messageHandlers 注入对象,如下:

前端H5需要做判断两种不同注入方式带来的不同调用方式:

5. 关于 Request 拦截

WKWebView 基于 WebKit 框架,与 UIWebView 机制不同,WKWebView 在独立于 app 进程之外的进程中执行网络请求,请求数据不经过主进程,因此,在 WKWebView 上直接使用 NSURLProtocol 无法拦截请求。

6. 关于 POST 请求

使用通用的 Web&Native 交互协议,为 Web 提供 Native POST 请求的接口+回调 CallBack 即可。参考

7. 关于本地 HTML 加载

当使用 loadRequest 来读取本地 Documents 目录的 HTML 文件时,WKWebView 是无法读取成功的。
iOS 9以后可以通过新的接口来加载:

/*! @abstract Navigates to the requested file URL on the filesystem.
 @param URL The file URL to which to navigate.
 @param readAccessURL The URL to allow read access to.
 @discussion If readAccessURL references a single file, only that file may be loaded by WebKit.
 If readAccessURL references a directory, files inside that file may be loaded by WebKit.
 @result A new navigation for the given file URL.
 */
- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));

iOS9以下的版本是没提供这个便利的方法的,解决办法:

先将本地 HTML 文件的数据 copy 到 tmp 目录中,资源文件 js,css,image 等也必须一同 copy 到 tmp,然后再使用 loadRequest 来加载。iOS 8下还必须 copy 到 tmp 的 www 目录下 WKWebView 才能读取。 参考

8. 关于捏合手势

UIWebView 可以使用捏合手势来进行放大和缩小,观看 Web 内容。
WKWebView 在手机上不支持,却支持其他iOS设备

#if !TARGET_OS_IPHONE
/* @abstract A Boolean value indicating whether magnify gestures will
 change the web view's magnification.
 @discussion It is possible to set the magnification property even if
 allowsMagnification is set to NO.
 The default value is NO.
 */
@property (nonatomic) BOOL allowsMagnification;

/* @abstract The factor by which the page content is currently scaled.
 @discussion The default value is 1.0.
 */
@property (nonatomic) CGFloat magnification;

/* @abstract Scales the page content by a specified factor and centers the
 result on a specified point.
 * @param magnification The factor by which to scale the content.
 * @param point The point (in view space) on which to center magnification.
 */
- (void)setMagnification:(CGFloat)magnification centeredAtPoint:(CGPoint)point;

#endif

9. 不支持URL Scheme

UIWebView加载URL是支持customscheme://…这种形式的,UIWebView会执行openUrl函数。
WKWebView需要自己支持,代码如下:

// 如果不是http和https开头,就手动执行openURL函数。
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    if(![self.currentRequest.URL.absoluteString hasPrefix:@"http://"] && ![self.currentRequest.URL.absoluteString hasPrefix:@"https://"]) {
        if([[UIApplication sharedApplication] canOpenURL:self.currentRequest.URL]) {
            [[UIApplication sharedApplication] openURL:self.currentRequest.URL];
        }
    }
}

10. WKWebView 白屏问题

在 UIWebView 上当内存占用太大的时候,App Process 会 crash,在 WKWebView 上当总体的内存占用比较大的时候,WebContent Process 会 crash,从而出现白屏现象。
iOS 9以后 WKNavigtionDelegate 新增了一个回调函数:

// 当 WKWebView 总体内存占用过大,页面即将白屏的时候,系统会调用下面的回调函数,在函数里执行[webView reload]解决白屏问题。
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView API_AVAILABLE(macosx(10.11), ios(9.0));

参考文章

NSHipster—WKWebView
iOS 8 WebKit框架概览(上)
iOS 8 WebKit框架概览(下)
WKWebView 那些坑
WKWebView从入门到趟坑

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容