good

iOS WKWebView

2019-09-18  本文已影响0人  LuisX
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 的存储体系与 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从入门到趟坑

上一篇下一篇

猜你喜欢

热点阅读