关于 WKWebView 的一些使用总结

2022-04-08 本文已影响0人 _涼城

前言

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 方法。