前言
WKWebView 从 iOS 8.0 推出，拥有 60 fps 滚动刷新率、和 safari 相同的 JavaScript 引擎，用以替代 UIKit 中笨重难用、内存泄漏的 UIWebView 。
什么是 WebKit
WebKit 框架提供了一组核心类来在窗口中显示 Web 内容，并且默认实现了诸如跟随用户单击的链接等功能。然而，WebKit 并没有实现一整套网络浏览器功能。但是，可以通过实现自定义委托、视图和模型对象来扩展 WebKit。例如，可以实现一个委托来显示加载状态和当前 URL。还可以从 Objective-C 访问 JavaScript，反之亦然。 WebKit 是开源的，可以访问 WebKit 源码链接查看。
Safari Debug
在 Hybrid 混合开发中，Safari 调试对于开发来说是必不可少的。那么要如何进行Safari 调试呢？
Mac 电脑 -> Safari 浏览器 -> 偏好设置 -> 高级 -> 勾选 在菜单栏中显示“开发”菜单
iPhone -> 设置 -> Safari 浏览器 -> 高级 -> 开启 JavaScript 和 网页检查器
iPhone 数据线连接 Mac
通过 App 或浏览器打开相应网页
Mac 电脑 -> Safari 浏览器 -> 开发 -> 对应的 iphone -> 对应的网页
进入调试器开始调试
注： 由于 iOS 系统版本和 Safari 版本不同，可能导致无法调试，可下载 Safari Technology Preview 进行调试
WKWebView Pre-load
由于 WKWebView 初始化消耗大约 200ms，在使用场景较多的情况，可以通过预加载以及复用池的方式用内存换取时间，并且提前加载渲染某些必要的网页。例：
@implementation WKWebViewPool
+ (instancetype)sharedInstance {
static id _sharedInstance = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
_sharedInstance = [[self alloc] init];
});
return _sharedInstance;
}
- (instancetype)init
{
self = [super init];
if (self) {
self.pool = [NSMutableArray array];
WKWebView *webviewCache1 = [[WKWebView alloc] init];
[self.pool addObject:webviewCache1];
//可以设置 frame 为1px 提前加载所需要的网页
// [webviewCache1 loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
}
return self;
}
@end
WKWebView Allow-Origin
一般地，Html 页面加载用时最长的阶段，分别为资源请求与资源渲染，资源加载可以通过缓存策略，CDN 加速或者离线包本地资源加载从而缩减资源请求时间。加载本地资源是最快的一种，但是，同样会存在跨域问题。
-
网络请求跨域
- 通过服务器配置允许跨域；
- 通过客户端转发网页请求绕过跨域；
-
iframe 资源加载跨域
- 不建议
WKProcessPool
WKProcessPool 代表 WebKit 用来管理 Web 内容的单个进程。默认情况下，WebKit 为每个 Web 视图提供自己的进程空间，直到达到实现定义的进程限制。之后，具有相同对象的 Web 视图共享相同的 Web 内容进程。苹果官方建议如下：
如果您的应用程序创建多个 Web 视图，请将同一对象分配给可以安全共享进程空间的 Web 视图。实例化此类的一个实例并将其分配给每个 Web 视图对象的属性。
在实际开发中，发现的影响为：同时开启多个 WebView，在同一个域下设置的 LocalStorage、cookie 等不会同步，因此参照官方文档建议，解决方案如下：
-
在程序中通过单例或者静态全局变量维持一个
WKProcessPool实例[WKProcessPoolSingleInstance sharedInstance].wkProcessPool -
WKWebView初始化时赋值WKWebViewConfiguration * webConfiguration = [[WKWebViewConfiguration alloc]init]; webConfiguration.processPool = [WKProcessPoolSingleInstance sharedInstance].wkProcessPool;
UserAgent
在网页开发中，常常用 window.navigator.userAgent 获取浏览器所在操作系统等信息。在 iOS 中，WKWebView 默认的 UserAgent 可以通过下面代码获取：
[webview evaluateJavaScript:@"window.navigator.userAgent" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
//Mozilla/5.0 (iPhone; CPU iPhone OS 15_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
NSLog(@"%@",result);
}];
可以看到上面的 UserAgent 有机型、系统、WebKit 版本等等。在 WebKit/WebCore 源码中可以找到默认 UserAgent 的生成源码如下：
String standardUserAgentWithApplicationName(const String& applicationName, const String& userAgentOSVersion, UserAgentType type)
{
if (type == UserAgentType::Desktop) {
String appNameSuffix = applicationName.isEmpty() ? "" : makeString(" ", applicationName);
return makeString("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko)", appNameSuffix);
}
// FIXME: We should deprecate and eventually remove this obsolete UA override;
// see https://bugs.webkit.org/show_bug.cgi?id=217927 for details.
// Check to see if there is a user agent override for all WebKit clients.
auto override = adoptCF(CFPreferencesCopyAppValue(CFSTR("UserAgent"), CFSTR("com.apple.WebFoundation")));
if (override) {
if (CFGetTypeID(override.get()) == CFStringGetTypeID())
return (__bridge NSString *)override.get();
}
String osVersion = userAgentOSVersion.isEmpty() ? systemMarketingVersionForUserAgentString() : userAgentOSVersion;
String appNameSuffix = applicationName.isEmpty() ? "" : makeString(" ", applicationName);
return makeString("Mozilla/5.0 (", deviceNameForUserAgent(), "; CPU ", osNameForUserAgent(), " ", osVersion, " like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko)", appNameSuffix);
}
一般地，都会对 UserAgent 做一些改动，加入 App 的标识以及其他信息。WKWebView 提供下面两个方法用于修改 UserAgent:
-
修改
CustomUserAgent，完全覆盖默认UserAgent，注意：尽量不要删除原有的默认UserAgent，避免第三方页面使用异常。webview.customUserAgent = @"Mozilla/5.0 (iPhone; CPU iPhone OS 15_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 xxx"; -
修改
applicationNameForUserAgent，applicationNameForUserAgent具有默认值Mobile/xxx，最好是拼接在其后，推荐使用WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]; configuration.applicationNameForUserAgent = [configuration.applicationNameForUserAgent stringByAppendingString:@" test"];
JSBridge
什么是 JSBridge
JSBridge 是一种 webview 侧和 native 侧进行通信的手段，webview 可以通过 jsb 调用 native 的能力，native 也可以通过 jsb 在 webview 上执行一些逻辑。
WKWebViewJavascriptBridge
WKWebViewJavascriptBridge 是 Github上的一个用于 JavaScript 与 Objective-C 通讯开源库，主要是通过拦截 URL 请求来达到 native 端和 webview 端相互通信的效果的。
WKScriptMessageHandler
WKWebView 的 userController 内置了一个addScriptMessageHandler:name:方法用于 JavaScript 调用，
- (void)addScriptMessageHandler:(id<WKScriptMessageHandler>)scriptMessageHandler
name:(NSString *)name;
- (void)removeScriptMessageHandlerForName:(NSString *)name;
相应的，苹果官方文档介绍了 JS 调用方式如下，其中 name 对应 上面方法中的 name 参数，messageBody 为 id 类型。
window.webkit.messageHandlers.<name>.postMessage(<messageBody>),
WKScriptMessageHandler 是一个 protocol，当 js 调用时， userContentController:didReceiveScriptMessage: 方法会被调用，返回 WKScriptMessage，WKSciptMessage 类信息如下：
@interface WKScriptMessage : NSObject
/*! @abstract The body of the message.
@discussion Allowed types are NSNumber, NSString, NSDate, NSArray,
NSDictionary, and NSNull.
*/
@property (nonatomic, readonly, copy) id body;
/*! @abstract The web view sending the message. */
@property (nullable, nonatomic, readonly, weak) WKWebView *webView;
/*! @abstract The frame sending the message. */
@property (nonatomic, readonly, copy) WKFrameInfo *frameInfo;
/*! @abstract The name of the message handler to which the message is sent.
*/
@property (nonatomic, readonly, copy) NSString *name;
/*! @abstract The content world from which the message was sent. */
@property (nonatomic, readonly) WKContentWorld *world API_AVAILABLE(macos(11.0), ios(14.0));
@end
由于 addScriptMessageHandler:name: 方法中 scriptMessageHandler 会被 WKWebView 强引用，为了避免循环引用导致无法释放，建议使用中介者作为 scriptMessageHandler。
LocalStorage
在 iOS App WebView 中，LocalStorage 等持久化存储会保存沙盒目录中，低概率存在 LocalStorage 被清空的情况。建议使用 IndexDB 或 调用 Native 进行持久化存储。
Cookies
由于许多 H5 会话都依赖于 Cookie，而 WKWebView 上请求不会自动携带 Cookie, 目前的主要解决方案是：
-
通过注入 Cookie 解决问题
-
WKWebView loadRequest前，在request header中设置Cookie, 解决首个请求Cookie带不上的问题；WKWebView *webView = [WKWebView new]; NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]; [request addValue:@"cookieKey=cookieValue" forHTTPHeaderField:@"Cookie"]; [webView loadRequest:request]; -
通过
document.cookie设置Cookie解决后续页面(同域)Ajax、iframe 请求的Cookie问题；WKUserContentController* userContentController = [WKUserContentController new]; WKUserScript * cookieScript = [[WKUserScript alloc] initWithSource: @"document.cookie = 'cookieKey=cookieValue';" injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO]; [userContentController addUserScript:cookieScript];
-
通过客户端转发网页请求
WKWebView 的释放
在 WKWebview 释放前要停止加载，调用 stopLoading 方法。
