UIWebView从 iOS2 就有,iOS8 以后,WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用、内存泄漏的 UIWebView,速度更快了,占用内存少了,体验更好了。
优势:
- 性能、稳定性、功能方面有很大提升。
- 支持更多 HTML5 的特性。
- 高达60FPS的滚动刷新率、内置手势。
- Safari 相同的 Nitro JS 引擎性能,对HTML5性能也提升了4倍。
- 加载耗时差别不大,WKWebView 的内存优化减少了几乎4倍。
- 无论跳转多少 Web 页面都没有内存泄漏了。
- 将 UIWebViewDelegate 与 UIWebView 拆分成了14类和3个协议,包含更细节功能的实现。
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从入门到趟坑