迁至WKWebView跨过的那些坑

前言

在iOS中有两种网页视图可以加载网页除了系统的那个控制器。一种是UIWebView，另一种是WKWebView，其实WKWebView就是想替代UIWebView的，因为我们都知道UIWebView非常占内存等一些问题，但是现在很多人还在使用UIWebView这是为啥呢？而且官方也宣布在iOS12中废弃了UIWebView让我们尽快使用WKWebView。其实也就是这些东西：**页面尺寸问题、JS交互、请求拦截、cookie带不上的问题。**所以有时想要迁移还得解决这些问题，所以还是很烦的，所以一一解决喽。

页面尺寸的问题

我们知道有些网页在UIWebView上显示好好地，使用WKWebView就会出现尺寸的问题，这时很纳闷，安卓也不会，你总不说是前端的问题吧？但其实是WKWebView中网页是需要适配一下，所以自己添加JS吧，当然和前端关系好就可以叫他加的。下面通过设置配置中的userContentController来添加JS。

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];
configuration.userContentController = wkUController;

JS交互

我们都知道在UIWebView中可以使用自家的JavaScriptCore来进行交互非常的方便。在JavaScriptCore中有三者比较常用那就是JSContext(上下文)、JSValue（类型转换）、JSExport(js调OC模型方法)。

在UIWebView中的便利交互方法

//JSContext就为其提供着运行环境 H5上下文
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext = jsContext;
}

// 执行脚本增加js全局变量
[self.jsContext evaluateScript:@"var arr = [3, '3', 'abc'];"];

// ⚠️添加JS方法，需要注意的是添加的方法会覆盖原有的JS方法，因为我们是在网页加载成功后获取上下文来操作的。
// 无参数的
self.jsContext[@"alertMessage"] = ^() {
   NSLog(@"JS端调用alertMessage时就会跑到这里来！");
};
// 带参数的，值必须进行转换
 self.jsContext[@"showDict"] = ^(JSValue *value) {
    NSArray *args = [JSContext currentArguments];
    JSValue *dictValue = args[0];
    NSDictionary *dict = dictValue.toDictionary;
    NSLog(@"%@",dict);
 };

// 获取JS中的arr数据
JSValue *arrValue = self.jsContext[@"arr"];

// 异常捕获
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
    weakSelf.jsContext.exception = exception;
    NSLog(@"exception == %@",exception);
};

// 给JS中的对象重新赋值
OMJSObject *omObject = [[OMJSObject alloc] init];
self.jsContext[@"omObject"] = omObject;
NSLog(@"omObject == %d",[omObject getSum:20 num2:40]);

// 我们都知道object必须要遵守JSExport协议时，js可以直接调用object中的方法，并且需要把函数名取个别名。在JS端可以调用getS，OC可以继续使用这个getSum这个方法
@protocol OMProtocol <JSExport>
// 协议 - 协议方法 
JSExportAs(getS, -(int)getSum:(int)num1 num2:(int)num2);
@end

在WKWebView中如何做呢？

不能像上面那样，系统提供的是通过以下两种方法，所以是比较难受，而且还得前端使用messageHandler来调用，即安卓和iOS分开处理。

// 直接调用js
NSString *jsStr = @"var arr = [3, '3', 'abc']; ";
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
   NSLog(@"%@----%@",result, error);
}];

// 下面是注册名称后，js使用messageHandlers调用了指定名称就会进入到代理中

// OC我们添加了js名称后
- (void)viewDidLoad{
  //...
  [wkUController addScriptMessageHandler:self name:@"showtime"];
  configuration.userContentController = wkUController;
}

// JS中messageHandlers调用我们在OC中的名称一致时就会进入后面的到OC的代理
window.webkit.messageHandlers.showtime.postMessage('');

// 代理，判断逻辑
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    if ([message.name isEqualToString:@"showtime"]) {
        NSLog(@"来了！");
    }
    NSLog(@"message == %@ --- %@",message.name,message.body); 
}

// 最后在dealloc必须移除
[self.userContentController removeScriptMessageHandlerForName:@"showtime"];

//如果是弹窗的必须自己实现代理方法
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
   UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert];
   [alert addAction:[UIAlertAction actionWithTitle:@"知道了" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }]];
    
   [self presentViewController:alert animated:YES completion:nil];
}

一直用一直爽的交互

我们上面写了两者的一些交互，虽然可以用呢，但是没有带一种很简单很轻松的境界，所以有一个开源库：WebViewJavaScriptBridge。这个开源库可以同时兼容两者，而且交互很简单，但是你必须得前端一起，否则就哦豁了。

// 使用
self.wjb = [WebViewJavascriptBridge bridgeForWebView:self.webView];
// 如果你要在VC中实现 UIWebView的代理方法 就实现下面的代码(否则省略)
[self.wjb setWebViewDelegate:self];

// 注册js方法名称
[self.wjb registerHandler:@"jsCallsOC" handler:^(id data, WVJBResponseCallback responseCallback) {
   NSLog(@"currentThread == %@",[NSThread currentThread]);
   NSLog(@"data == %@ -- %@",data,responseCallback);
}];

// 调用JS
dispatch_async(dispatch_get_global_queue(0, 0), ^{
        [self.wjb callHandler:@"OCCallJSFunction" data:@"OC调用JS" responseCallback:^(id responseData) {
           NSLog(@"currentThread == %@",[NSThread currentThread]);
           NSLog(@"调用完JS后的回调：%@",responseData);
        }];
});

前端使用实例如下，具体使用方法可以查看WebViewJavaScriptBridge。

function setupWebViewJavascriptBridge(callback) {
	if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
	if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
	window.WVJBCallbacks = [callback];
	var WVJBIframe = document.createElement('iframe');
	WVJBIframe.style.display = 'none';
	WVJBIframe.src = 'https://__bridge_loaded__';
	document.documentElement.appendChild(WVJBIframe);
	setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

setupWebViewJavascriptBridge(function(bridge) {
	
	/* Initialize your app here */

	bridge.registerHandler('JS Echo', function(data, responseCallback) {
		console.log("JS Echo called with:", data)
		responseCallback(data)
	})
	bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
		console.log("JS received response:", responseData)
	})
})

请求拦截

我们UIWebView在早期是使用- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType来根据scheme、host、pathComponents进行拦截做自定义逻辑处理。但是这种方法不是很灵活，于是就使用NSURLProtocol来进行拦截，例如微信拦截淘宝一样，直接显示一个提示。又或者是拦截请求调用本地的接口，打开相机、录音、相册等功能。还能直接拦截后改变原有的request，直接返回数据或者其他的url，在一些去除广告时可以的用得上。

我们使用的时候必须要使用NSURLProtocol的子类来进行一些操作。并在使用前需要注册自定义的Class。拦截后记得进行标记一下，防止自循环多执行。可惜的是在WKWebView中不能进行拦截后处理的操作，只能监听却改变不了。源于WKWebView采用的是webkit加载，和系统的浏览器一样的机制。

// 子类
@interface OMURLProtocol : NSURLProtocol<NSURLSessionDataDelegate>
@property (nonatomic, strong) NSURLSession *session;
@end

// 注册
[NSURLProtocol registerClass:[OMURLProtocol class]];

// 1. 首先会在这里来进行拦截，返回YES则表示需要经过我们自定义处理，NO则走系统处理
+ (BOOL)canInitWithRequest:(NSURLRequest *)request;

// 2.拦截处理将会进入下一个环节, 返回一个标准化的request，可以在这里进行重定向
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request;

// 3.是否成功拦截都会走这个方法, 可以在这里进行一些自定义处理
- (void)startLoading;

// 4. 任何网络请求都会走上面的拦截处理，即使我们重定向后还会再走一次或多次流程，需要标记来处理
// 根据request获取标记值来决定是否需要拦截，在canInitWithRequest内处理
+ (nullable id)propertyForKey:(NSString *)key inRequest:(NSURLRequest *)request;
// 标记
+ (void)setProperty:(id)value forKey:(NSString *)key inRequest:(NSMutableURLRequest *)request;
// 移除标记
+ (void)removePropertyForKey:(NSString *)key inRequest:(NSMutableURLRequest *)request;

请求头或数据混乱问题

还需要注意的一点是，如果实现线了拦截处理的话，我们在使用AFN和URLSession进行访问的时候拦截会发现数据或请求头可能和你拦截处理后的数据或请求不符合预期，这是因为我们在拦截的时候只是先请求了A后请求了B，这是不符合预期的，虽然URLConnection不会但是已被废弃不值得提倡使用。我们通过在拦截的时候通过LLDB打印session中配置的协议时，发现是这样的没有包含我们自定义的协议，我们通过Runtime交换方法交换protocolClasses方法，我们实现我们自己的protocolClasses方法。但是为了保证系统原有的属性，我们应该在系统原有的协议表上加上我们的协议类。在当前我们虽然可以通过[NSURLSession sharedSession].configuration.protocolClasses;获取系统默认的协议类，但是如果我们在当前自定义的类里protocolClasses写的话会造成死循环，因为我们交换了该属性的getter方法。我们使用保存类名然后存储至NSUserDefaults，取值时在还原class。

po session.configuration.protocolClasses
<__NSArrayI 0x600001442d00>(
_NSURLHTTPProtocol,
_NSURLDataProtocol,
_NSURLFTPProtocol,
_NSURLFileProtocol,
NSAboutURLProtocol
)

// 自定义返回我们的协议类
- (NSArray *)protocolClasses {
    NSArray *originalProtocols = [OMURLProtocol readOriginalProtocols];
    NSMutableArray *newProtocols = [NSMutableArray arrayWithArray:originalProtocols];
    [newProtocols addObject:[OMURLProtocol class]];
    return newProtocols;
}

// 我们再次打印时发现已经加上我们自定义的协议类了
po session.configuration.protocolClasses
<__NSArrayM 0x60000041a4f0>(
_NSURLHTTPProtocol,
_NSURLDataProtocol,
_NSURLFTPProtocol,
_NSURLFileProtocol,
NSAboutURLProtocol,
OMURLProtocol
)

// 存储系统原有的协议类
+ (void)saveOriginalProtocols: (NSArray<Class> *)protocols{
    NSMutableArray *protocolNameArray = [NSMutableArray array];
    for (Class protocol in protocols){
        [protocolNameArray addObject:NSStringFromClass(protocol)];
    }
    NSLog(@"协议数组为： %@", protocolNameArray);
    [[NSUserDefaults standardUserDefaults] setObject:protocolNameArray forKey:originalProtocolsKey];
    [[NSUserDefaults standardUserDefaults] synchronize];
}

// 获取系统原有的协议类
+ (NSArray<Class> *)readOriginalProtocols{
    NSArray *classNames = [[NSUserDefaults standardUserDefaults] valueForKey:originalProtocolsKey];
    NSMutableArray *origianlProtocols = [NSMutableArray array];
    for (NSString *name in classNames){
        Class class = NSClassFromString(name);
        [origianlProtocols addObject: class];
    }
    return origianlProtocols;
}

+ (void)hookNSURLSessionConfiguration{
    NSArray *originalProtocols = [NSURLSession sharedSession].configuration.protocolClasses;
    [self saveOriginalProtocols:originalProtocols];
    Class cls = NSClassFromString(@"__NSCFURLSessionConfiguration") ?: NSClassFromString(@"NSURLSessionConfiguration");
    Method originalMethod = class_getInstanceMethod(cls, @selector(protocolClasses));
    Method stubMethod = class_getInstanceMethod([self class], @selector(protocolClasses));
    if (!originalMethod || !stubMethod) {
        [NSException raise:NSInternalInconsistencyException format:@"没有这个方法 无法交换"];
    }
    method_exchangeImplementations(originalMethod, stubMethod);
}

Cookie的携带问题

很多应用场景中需要使用session来进行处理，在UIWebView中很容易做到携带这些Cookie，但是由于WKWebView的机制不一样，跨域会出现丢失cookie的情况是很糟糕的。目前有两种用法：脚本和手动添加cookie。脚本不太靠谱，建议使用手动添加更为保险。

// 使用脚本来添加cookie

// 获取去cookie数据
- (NSString *)cookieString
{
    NSMutableString *script = [NSMutableString string];
    [script appendString:@"var cookieNames = document.cookie.split('; ').map(function(cookie) { return cookie.split('=')[0] } );\n"];
    for (NSHTTPCookie *cookie in [[NSHTTPCookieStorage sharedHTTPCookieStorage] cookies]) {

        if ([cookie.value rangeOfString:@"'"].location != NSNotFound) {
            continue;
        }
        [script appendFormat:@"if (cookieNames.indexOf('%@') == -1) { document.cookie='%@'; };\n", cookie.name, cookie.kc_formatCookieString];
    }
    return script;
}

// 添加cookie
WKUserScript * cookieScript = [[WKUserScript alloc] initWithSource:[self cookieString] injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
[[[WKUserContentController alloc] init] addUserScript: cookieScript];

// 添加一个分类来修复cookie丢失的问题
@interface NSURLRequest (Cookie)

- (NSURLRequest *)fixCookie;

@end

@implementation NSURLRequest (Cookie)

- (NSURLRequest *)fixCookie{
    NSMutableURLRequest *fixedRequest;
    if ([self isKindOfClass:[NSMutableURLRequest class]]) {
        fixedRequest = (NSMutableURLRequest *)self;
    } else {
        fixedRequest = self.mutableCopy;
    }
    //防止Cookie丢失
    NSDictionary *dict = [NSHTTPCookie requestHeaderFieldsWithCookies:[NSHTTPCookieStorage sharedHTTPCookieStorage].cookies];
    if (dict.count) {
        NSMutableDictionary *mDict = self.allHTTPHeaderFields.mutableCopy;
        [mDict setValuesForKeysWithDictionary:dict];
        fixedRequest.allHTTPHeaderFields = mDict;
    }
    return fixedRequest;
}

@end
  
  
  // 使用场景
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    [navigationAction.request fixCookie];
    decisionHandler(WKNavigationActionPolicyAllow);
}