iOS WKWebView適配實戰(zhàn)篇

更新時間：2020年06月23日 08:28:41 作者：ArleneDD

這篇文章主要介紹了iOS WKWebView適配實戰(zhàn)篇，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、Cookie適配

1.現(xiàn)狀

WKWebView適配中最麻煩的就是cookie同步問題

WKWebView采用了獨立存儲控件，因此和以往的UIWebView并不互通

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

2.同步cookie(NSHTTPCookieStorage->WKHTTPCookieStore)

iOS11+

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

// iOS11同步 HTTPCookieStorag到WKHTTPCookieStore
WKHTTPCookieStore *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的時候，也可以在請求的時候。初始化時候同步可以確保發(fā)起html頁面請求的時候帶上cookie

例如：請求在線頁面時候要通過cookie來認證身份，如果不是初始化時同步，可能請求頁面時就是401了

iOS11-

通過前端執(zhí)行js注入cookie,在請求時候執(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，也無法保證第一個頁面請求帶有cookie

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

-(void)injectRequestCookieLT11:(NSMutableURLRequest*)mutableRequest {
  // iOS11以下，手動同步所有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è)置請求頭
  mutableRequest.allHTTPHeaderFields = requestHeaderFields;
}

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

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

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

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

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

二、JS和Native通信

1.Native調(diào)用JS

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

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

2.注入JS

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

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

-(instancetype)initWithSource:(NSString *)source injectionTime:(WKUserScriptInjectionTime)injectionTime forMainFrameOnly:(BOOL)forMainFrameOnly;

//WKUserScriptInjectionTime說明
typedef NS_ENUM(NSInteger, WKUserScriptInjectionTime) {
  WKUserScriptInjectionTimeAtDocumentStart, /**文檔開始時候就注入**/
  WKUserScriptInjectionTimeAtDocumentEnd /**文檔加載完成時注入**/
} API_AVAILABLE(macos(10.10), ios(8.0));

3.JS調(diào)用Native

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

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

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

WKScriptMessageHandler就一個方法

@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è)置代理類，并且指定name

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

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

執(zhí)行完上面語句后就會在JS端注入了一個對象"window.webkit.messageHandlers.bridge"

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

3-4.Native端消息的接收

然后native端可以通過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è)置個delegate指向self(controller),為什么不直接指向？

提示：可以參考NSTimer的循環(huá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.其它問題

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

三、實戰(zhàn)技巧

1.UserAgent的設(shè)置

添加UA

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

日志中紅線部分是整個模擬器的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)聽進度和頁面的title變化

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

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

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

//kvo 加載進度
[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];
  }
}

/**銷毀時候記得移除**/
[self.webView removeObserver:self
      forKeyPath:NSStringFromSelector(@selector(estimatedProgress))];
[self.webView removeObserver:self
           forKeyPath:NSStringFromSelector(@selector(title))];

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

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

import {WebBridge} from 'XXX'
/**
* 方法: WebBridge.call(taskName,options,callback)
* 參數(shù)說明: 
*  taskName String task的名字，用于Native處理分發(fā)任務(wù)的標(biāo)識
* 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

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

點擊獲取框架原理視頻

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

您可能感興趣的文章: