关于 WKWebView 的一些使用总结

前言

    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 调试呢？

1. Mac 电脑 -> Safari 浏览器 -> 偏好设置 -> 高级 -> 勾选 在菜单栏中显示“开发”菜单

2. iPhone -> 设置 -> Safari 浏览器 -> 高级 -> 开启 JavaScript 和 网页检查器

3. iPhone 数据线连接 Mac

4. 通过 App 或浏览器打开相应网页

5. Mac 电脑 -> Safari 浏览器 -> 开发 -> 对应的 iphone -> 对应的网页

6. 进入调试器开始调试

注： 由于 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 加速或者离线包本地资源加载从而缩减资源请求时间。加载本地资源是最快的一种，但是，同样会存在跨域问题。

1. 网络请求跨域

   • 通过服务器配置允许跨域；
   • 通过客户端转发网页请求绕过跨域；

2. iframe 资源加载跨域

   • 不建议

WKProcessPool

     WKProcessPool 代表 WebKit 用来管理 Web 内容的单个进程。默认情况下，WebKit 为每个 Web 视图提供自己的进程空间，直到达到实现定义的进程限制。之后，具有相同对象的 Web 视图共享相同的 Web 内容进程。苹果官方建议如下：

如果您的应用程序创建多个 Web 视图，请将同一对象分配给可以安全共享进程空间的 Web 视图。实例化此类的一个实例并将其分配给每个 Web 视图对象的属性。

    在实际开发中，发现的影响为：同时开启多个 WebView，在同一个域下设置的 LocalStorage、cookie 等不会同步，因此参照官方文档建议，解决方案如下：

1. 在程序中通过单例或者静态全局变量维持一个 WKProcessPool 实例

     [WKProcessPoolSingleInstance sharedInstance].wkProcessPool
   

2. 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:

1. 修改 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";
   

2. 修改 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 方法。