一、Cookie適配

1.現(xiàn)狀

WKWebView適配中最麻煩的就是cookie同步問(wèn)題

WKWebView采用了獨(dú)立存儲(chǔ)控件，因此和以往的UIWebView并不互通

雖然iOS11以后，iOS開放了WKHTTPCookieStore讓開發(fā)者去同步，但是還是需要考慮低版本的 同步問(wèn)題，本章節(jié)從各個(gè)角度切入考慮cookie同步問(wèn)題

2.同步cookie(NSHTTPCookieStorage->WKHTTPCookieStore)

iOS11+

可以直接使用WKHTTPCookieStore遍歷方式設(shè)值，可以在創(chuàng)建wkwebview時(shí)候就同步也可以是請(qǐng)求時(shí)候

// iOS11同步 HTTPCookieStorag到WKHTTPCookieStoreWKHTTPCookieStore *cookieStore = self.wkWebView.configuration.websiteDataStore.httpCookieStore;- (void)syncCookiesToWKCookieStore:(WKHTTPCookieStore *)cookieStore API_AVAILABLE(ios(11.0)){ NSArray *cookies = [[NSHTTPCookieStorage sharedHTTPCookieStorage] cookies]; if (cookies.count == 0) return; for (NSHTTPCookie *cookie in cookies) { [cookieStore setCookie:cookie completionHandler:^{ if ([cookies.lastObject isEqual:cookie]) {[self wkwebviewSetCookieSuccess]; } }]; }}

同步cookie可以在初始化wkwebview的時(shí)候，也可以在請(qǐng)求的時(shí)候。初始化時(shí)候同步可以確保發(fā)起html頁(yè)面請(qǐng)求的時(shí)候帶上cookie

例如：請(qǐng)求在線頁(yè)面時(shí)候要通過(guò)cookie來(lái)認(rèn)證身份，如果不是初始化時(shí)同步，可能請(qǐng)求頁(yè)面時(shí)就是401了

iOS11-

通過(guò)前端執(zhí)行js注入cookie,在請(qǐng)求時(shí)候執(zhí)行

//wkwebview執(zhí)行JS- (void)injectCookiesLT11 { WKUserScript * cookieScript = [[WKUserScript alloc] initWithSource:[self cookieString] injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO]; [self.wkWebView.configuration.userContentController addUserScript:cookieScript];}//遍歷NSHTTPCookieStorage,拼裝JS并執(zhí)行- (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) { // Skip cookies that will break our script if ([cookie.value rangeOfString:@'’'].location != NSNotFound) { continue; } [script appendFormat:@'if (cookieNames.indexOf(’%@’) == -1) { document.cookie=’%@’; };n', cookie.name, [self formatCookie:cookie]]; } return script;}//Format cookie的js方法- (NSString *)formatCookie:(NSHTTPCookie *)cookie { NSString *string = [NSString stringWithFormat:@'%@=%@;domain=%@;path=%@', cookie.name, cookie.value, cookie.domain, cookie.path ?: @'/']; if (cookie.secure) { string = [string stringByAppendingString:@';secure=true']; } return string;}

但是上面方法執(zhí)行js，也無(wú)法保證第一個(gè)頁(yè)面請(qǐng)求帶有cookie

所以請(qǐng)求時(shí)候創(chuàng)建request需要設(shè)置cookie，并且loadRequest

-(void)injectRequestCookieLT11:(NSMutableURLRequest*)mutableRequest { // iOS11以下，手動(dòng)同步所有cookie NSArray *cookies = NSHTTPCookieStorage.sharedHTTPCookieStorage.cookies; NSMutableArray *mutableCookies = @[].mutableCopy; for (NSHTTPCookie *cookie in cookies) { [mutableCookies addObject:cookie]; } // Cookies數(shù)組轉(zhuǎn)換為requestHeaderFields NSDictionary *requestHeaderFields = [NSHTTPCookie requestHeaderFieldsWithCookies:(NSArray *)mutableCookies]; // 設(shè)置請(qǐng)求頭 mutableRequest.allHTTPHeaderFields = requestHeaderFields;}

3.反向同步cookie(WKHTTPCookieStore->NSHTTPCookieStorage)

wkwebview產(chǎn)生的cookie也可能在某些場(chǎng)景需要同步給NSHTTPCookieStorage

iOS11+可以直接用WKHTTPCookieStore去同步，

iOS11-可以采用js端獲取，觸發(fā)bridge同步給NSHTTPCookieStorage

但是js同步方式無(wú)法同步httpOnly，所以真的遇到了，還是要結(jié)合服務(wù)器等方式去做這個(gè)同步。

二、JS和Native通信

1.Native調(diào)用JS

將代碼準(zhǔn)備完畢后調(diào)用API即可，回調(diào)函數(shù)可以接收js執(zhí)行結(jié)果或者錯(cuò)誤信息，So Easy。

[self.wkWebView evaluateJavaScript:jsCode completionHandler:^(id object, NSError *error){}];

2.注入JS

其實(shí)就是提前注入一些JS方法，可以提供給JS端調(diào)用。

比如有的框架會(huì)將bridge直接通過(guò)這種方式注入到WK的執(zhí)行環(huán)境中，而不是從前端引入JS,這種好處就是假設(shè)前端的JS是在線加載，JS服務(wù)器掛了或者網(wǎng)絡(luò)問(wèn)題，這樣前端頁(yè)面就失去了Naitve的Bridge通信能力了。

-(instancetype)initWithSource:(NSString *)source injectionTime:(WKUserScriptInjectionTime)injectionTime forMainFrameOnly:(BOOL)forMainFrameOnly;//WKUserScriptInjectionTime說(shuō)明typedef NS_ENUM(NSInteger, WKUserScriptInjectionTime) { WKUserScriptInjectionTimeAtDocumentStart, /**文檔開始時(shí)候就注入**/ WKUserScriptInjectionTimeAtDocumentEnd /**文檔加載完成時(shí)注入**/} API_AVAILABLE(macos(10.10), ios(8.0));

3.JS調(diào)用Native

3-1.準(zhǔn)備代理類

代理類要實(shí)現(xiàn)WKScriptMessageHandler

@interface WeakScriptMessageDelegate : NSObject<WKScriptMessageHandler> @property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate; - (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;@end

WKScriptMessageHandler就一個(gè)方法

@implementation WeakScriptMessageDelegate- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate { self = [super init]; if (self) { _scriptDelegate = scriptDelegate; } return self;}- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { [self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];}

3-2.設(shè)置代理類

合適時(shí)機(jī)（一般初始化）設(shè)置代理類，并且指定name

NSString* MessageHandlerName = @'bridge';[config.userContentController addScriptMessageHandler:[[WeakScriptMessageDelegate alloc] initWithDelegate:self] name:MessageHandlerName];

3-3.bridge的使用(JS端)

執(zhí)行完上面語(yǔ)句后就會(huì)在JS端注入了一個(gè)對(duì)象'window.webkit.messageHandlers.bridge'

//JS端發(fā)送消息，參數(shù)最好選用String，比較通用window.webkit.messageHandlers.bridge.postMessage('type');

3-4.Native端消息的接收

然后native端可以通過(guò)WKScriptMessage的body屬性中獲得傳入的值

- (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ if ([message.name isEqualToString:HistoryBridageName]) { } else if ([message.name isEqualToString:MessageHandlerName]) { [self jsToNativeImpl:message.body]; }}

3-5.思考題

這里我們?yōu)槭裁匆褂肳eakScriptMessageDelegate，并且再設(shè)置個(gè)delegate指向self(controller),為什么不直接指向？

提示：可以參考NSTimer的循環(huán)引用問(wèn)題

3-6.完整的示例

-(void)_defaultConfig{ WKWebViewConfiguration* config = [WKWebViewConfiguration new]; …… …… …… …… WKUserContentController* userController = [[WKUserContentController alloc] init]; config.userContentController = userController; [self injectHistoryBridge:config]; …… …… …… …… }-(void)injectHistoryBridge:(WKWebViewConfiguration*)config{ [config.userContentController addScriptMessageHandler:[[WeakScriptMessageDelegate alloc] initWithDelegate:self] name:HistoryBridageName]; NSString *_jsSource = [NSString stringWithFormat: @'(function(history) {n' ' function notify(type) {n' ' setTimeout(function() {n' ' window.webkit.messageHandlers.%@.postMessage(type)n' ' }, 0)n' ' }n' ' function shim(f) {n' ' return function pushState() {n' ' notify(’other’)n' ' return f.apply(history, arguments)n' ' }n' ' }n' ' history.pushState = shim(history.pushState)n' ' history.replaceState = shim(history.replaceState)n' ' window.addEventListener(’popstate’, function() {n' ' notify(’backforward’)n' ' })n' '})(window.history)n', HistoryBridageName ]; WKUserScript *script = [[WKUserScript alloc] initWithSource:_jsSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES]; [config.userContentController addUserScript:script];}

3-7.其它問(wèn)題

在iOS8 beta5前，JS和Native這樣通信設(shè)置是不行的，所以可以采用生命周期中做URL的攔截去解析數(shù)據(jù)來(lái)達(dá)到效果，這里不做贅述，可以自行參考網(wǎng)上類似UIWebview的橋接原理文章

三、實(shí)戰(zhàn)技巧

1.UserAgent的設(shè)置

添加UA

實(shí)際過(guò)程中最好只是原有UA上做添加操作，全部替換可能導(dǎo)致服務(wù)器的拒絕（安全策略）

日志中紅線部分是整個(gè)模擬器的UA，綠色部門是UA中的ApplicationName部分

iOS9上，WKWebview提供了API可以設(shè)置ua中的ApplicationName

config.applicationNameForUserAgent = [NSString stringWithFormat:@'%@ %@', config.applicationNameForUserAgent, @'arleneConfig'];

全部替換UA

iOS9以上直接可以指定wkwebview的customUserAgent,iOS9以下的話，設(shè)置NSUserDefaults

if (@available(iOS 9.0, *)) { self.wkWebView.customUserAgent = @'Hello My UserAgent';}else{ [[NSUserDefaults standardUserDefaults] registerDefaults:@{@'UserAgent':@'Hello My UserAgent'}]; [[NSUserDefaults standardUserDefaults] synchronize];}

2.監(jiān)聽進(jìn)度和頁(yè)面的title變化

wkwebview可以監(jiān)控頁(yè)面加載進(jìn)度，類似瀏覽器中打開頁(yè)面中的進(jìn)度條的顯示

頁(yè)面切換的時(shí)候也會(huì)自動(dòng)更新頁(yè)面中設(shè)置的title,可以在實(shí)際項(xiàng)目中動(dòng)態(tài)切換容器的title，比如根據(jù)切換的title設(shè)置navigationItem.title

原理直接通過(guò)KVO方式監(jiān)聽值的變化，然后在回調(diào)中處理相關(guān)邏輯

//kvo 加載進(jìn)度[self.webView addObserver:self forKeyPath:@'estimatedProgress' options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil];//kvo title[self.webView addObserver:self forKeyPath:@'title' options:NSKeyValueObservingOptionNew context:nil];/** KVO 監(jiān)聽具體回調(diào)**/- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{ if ([keyPath isEqual:@'estimatedProgress'] && object == self.webView) { ALLOGF(@'Progress--->%@',[NSNumber numberWithDouble:self.webView.estimatedProgress]); }else if([keyPath isEqualToString:@'title'] && object == self.webview){ self.navigationItem.title = self.webView.title; }else{ [super observeValueForKeyPath:keyPath ofObject:object change:change context:context]; }}/**銷毀時(shí)候記得移除**/[self.webView removeObserver:self forKeyPath:NSStringFromSelector(@selector(estimatedProgress))];[self.webView removeObserver:self forKeyPath:NSStringFromSelector(@selector(title))];

3.Bridge通信實(shí)戰(zhàn)

下面介紹自己實(shí)現(xiàn)的bridge通信框架，前端無(wú)需關(guān)心所在容器，框架層做適配。

import {WebBridge} from ’XXX’/*** 方法: WebBridge.call(taskName,options,callback)* 參數(shù)說(shuō)明: * taskName String task的名字，用于Native處理分發(fā)任務(wù)的標(biāo)識(shí)* options Object 傳遞的其它參數(shù)* callback function 回調(diào)函數(shù)*. 回調(diào)參數(shù)* json object native返回的內(nèi)容**/WebBridge.call('Alert',{'content':'彈框內(nèi)容','btn':'btn內(nèi)容'},function(json){ console.log('call back is here',JSON.stringify(json));});

上面調(diào)用了Native的Alert控件，然后返回調(diào)用結(jié)果。

調(diào)用到的Native代碼如下:

//AlertTask.m#import 'AlertTask.h'#import <lib-base/ALBaseConstants.h>@interface AlertTask (){}@property (nonatomic,weak) ArleneWebViewController* mCtrl;@end@implementation AlertTask-(instancetype)initWithContext:(ArleneWebViewController*)controller{ self = [super init]; self.mCtrl = controller; return self;}-(NSString*)taskName{ return @'Alert';}-(void)doTask:(NSDictionary*)params{ ALShowAlert(@'Title',@'message');//彈出Alert NSMutableDictionary* callback = [ArleneTaskUtils basicCallback:params];//獲取callback [callback addEntriesFromDictionary:params]; [self.mCtrl callJS:callback];//執(zhí)行回調(diào)}@end

具體實(shí)現(xiàn)原理可以點(diǎn)擊下方視頻鏈接:

點(diǎn)擊獲取框架原理視頻

到此這篇關(guān)于iOS WKWebView適配實(shí)戰(zhàn)篇的文章就介紹到這了,更多相關(guān)iOS WKWebView適配 內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！