整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

WKWebView适配（实战篇）

、Cookie适配

1.现状

WKWebView适配中最麻烦的就是cookie同步问题

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

虽然iOS11以后，iOS开放了WKHTTPCookieStore让开发者去同步，但是还是需要考虑低版本的 同步问题，本章节从各个角度切入考虑cookie同步问题

2.同步cookie(NSHTTPCookieStorage->WKHTTPCookieStore)

iOS11+

可以直接使用WKHTTPCookieStore遍历方式设值，可以在创建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的时候，也可以在请求的时候。初始化时候同步可以确保发起html页面请求的时候带上cookie

例如：请求在线页面时候要通过cookie来认证身份，如果不是初始化时同步，可能请求页面时就是401了

iOS11-

通过前端执行js注入cookie,在请求时候执行

//wkwebview执行JS
- (void)injectCookiesLT11 {
    WKUserScript * cookieScript = [[WKUserScript alloc] initWithSource:[self cookieString] injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
    [self.wkWebView.configuration.userContentController addUserScript:cookieScript];
}
//遍历NSHTTPCookieStorage,拼装JS并执行
- (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;
}

但是上面方法执行js，也无法保证第一个页面请求带有cookie

所以请求时候创建request需要设置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数组转换为requestHeaderFields
    NSDictionary *requestHeaderFields = [NSHTTPCookie requestHeaderFieldsWithCookies:(NSArray *)mutableCookies];
    // 设置请求头
    mutableRequest.allHTTPHeaderFields = requestHeaderFields;
}

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

wkwebview产生的cookie也可能在某些场景需要同步给NSHTTPCookieStorage

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

iOS11-可以采用js端获取，触发bridge同步给NSHTTPCookieStorage

但是js同步方式无法同步httpOnly，所以真的遇到了，还是要结合服务器等方式去做这个同步。

二、JS和Native通信

1.Native调用JS

将代码准备完毕后调用API即可，回调函数可以接收js执行结果或者错误信息，So Easy。

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

2.注入JS

其实就是提前注入一些JS方法，可以提供给JS端调用。

比如有的框架会将bridge直接通过这种方式注入到WK的执行环境中，而不是从前端引入JS,这种好处就是假设前端的JS是在线加载，JS服务器挂了或者网络问题，这样前端页面就失去了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调用Native

3-1.准备代理类

代理类要实现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.设置代理类

合适时机（一般初始化）设置代理类，并且指定name

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

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

执行完上面语句后就会在JS端注入了一个对象"window.webkit.messageHandlers.bridge"

//JS端发送消息，参数最好选用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.思考题

这里我们为什么要使用WeakScriptMessageDelegate，并且再设置个delegate指向self(controller),为什么不直接指向？

提示：可以参考NSTimer的循环引用问题

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这样通信设置是不行的，所以可以采用生命周期中做URL的拦截去解析数据来达到效果，这里不做赘述，可以自行参考网上类似UIWebview的桥接原理文章

三、实战技巧

1.UserAgent的设置

添加UA

实际过程中最好只是原有UA上做添加操作，全部替换可能导致服务器的拒绝（安全策略）

日志中红线部分是整个模拟器的UA，绿色部门是UA中的ApplicationName部分

iOS9上，WKWebview提供了API可以设置ua中的ApplicationName

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

全部替换UA

iOS9以上直接可以指定wkwebview的customUserAgent,iOS9以下的话，设置NSUserDefaults

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

2.监听进度和页面的title变化

wkwebview可以监控页面加载进度，类似浏览器中打开页面中的进度条的显示

页面切换的时候也会自动更新页面中设置的title,可以在实际项目中动态切换容器的title，比如根据切换的title设置navigationItem.title

原理直接通过KVO方式监听值的变化，然后在回调中处理相关逻辑

//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 监听具体回调**/
- (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通信实战

下面介绍自己实现的bridge通信框架，前端无需关心所在容器，框架层做适配。

import {WebBridge} from 'XXX'
/**
* 方法: WebBridge.call(taskName,options,callback)
* 参数说明: 
*	taskName String task的名字，用于Native处理分发任务的标识
* options  Object 传递的其它参数
* callback function 回调函数
*.         回调参数
*					 json object native返回的内容
**/
WebBridge.call("Alert",{"content":"弹框内容","btn":"btn内容"},function(json){
	 console.log("call back is here",JSON.stringify(json));
});

上面调用了Native的Alert控件，然后返回调用结果。

调用到的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];//执行回调
}
@end

关于我

期待与要求上进的您进一步沟通

微信号：maako127

可以加入我的公众号（二码前端说），定期更新前端相关技术干货

年做了大量的 HTML5 项目，遇到了很多坑。在这个过程中学到了一些之前不具备的知识，所以这篇文章就简单分享一下这方面的话题。

传统的MPA

首先，说一个比较古老的东西，叫做 MPA。

MPA 的全称是 Multi-page Application，意思是整个应用（站点）由多个完整的 html 构成。用户在页面 1 点击跳转，需要向服务端请求页面 2，请求成功后渲染。而用户返回时，相当于是点击了浏览器的返回，页面退回到之前的历史记录，并重新加载出来。

在这样的模式下，页面间切换慢、不流畅的问题比较突出，尤其是在移动端。

同时，它还产生了几个小问题：

  • 跳转动画：页面间的跳转无法实现转场动画效果。
  • 如果前一个页比较长，用户滑动到页面比较靠下方的位置后点击，返回时，页面无法默认停留在原位置。
  • iOS 右滑返回产生问题，从页面 1 跳转到页面 2，再从页面 2 跳转到页面 3，右滑返回，会直接回到页面 1 前的页。

SPA

随着对移动端体验需求的提高以及技术的进步，另一种模式 SPA（Single-page Application）逐渐成为主流。

SPA 简单来说，就是原来在 MPA 中的多个 html，现在被放在了一个 html 中，并被分成若干个片段。跳转、返回的本质变成了分段的「隐藏」与「显示」。跳转不需要反复对服务端进行请求，从而使得页面与页面之间切换更加快速流畅。

在这样的机制下，跳转与返回完全由代码控制，所以可以通过代码定义页面转场的效果、返回。

在设计转场动画时，我们需要留意的是导航栏是 Native 的还是 HTML5 的。如果导航栏是 Native 的，那 HTML5 页面不包括导航栏，它相当于是网页外的元素，不在转场效果的设计范围内。

WebView

说 HTML5 的跳转，就不得不说 WebView。简单来说，WebView 是在 App 中用于显示 web 内容的容器。上文提到的 MPA 和 SPA，都装在了这个叫做 WebView 的容器中。

用户点击页面中的元素进行跳转，除了前面的两种方式外，还有第三种：新打开 WebView 的方式。在这样的方式下，跳转的本质是 HTML5「告诉」Native，由 Native 执行打开新 WebView，并在新 WebView 中加载页面。

因为 Native 的机制，打开新 WebView 的同时，之前的 WebView 会被自然、完整地保留。所以这时，之前的几个问题就变为：

  • 跳转动画：页面间的跳转动画由 WebView 之间的跳转动画来决定。
  • 返回后页面停留在原位置：完美支持。
  • iOS 右滑返回：完美支持。

不过需要注意的地方是，打开新 WebView 是一个资源消耗比较大的操作。如果我们在设计一个流程时，需要比较多的连续使用这种方式，需要和研发同学进行充分的沟通。

比较特殊的Replace

前述的三种跳转，都会产生历史记录。MPA、SPA 的历史记录是在 HTML5 中产生，新开 WebView 中的记录是在 Native 中产生。

在 MPA 或 SPA 中，如果跳转时使用 Replace 方法，它会用新页面替换之前的页面，历史记录中没有之前页面的记录。

这是一种特殊的跳转方式，在设计一些不可逆的流程时可考虑使用。

多页面回退

了解了上述的几种机制后，我们来看一个小的应用场景──多页面回退。

我们在实际业务中，经常会有这样的需求。假设我们有 1、2、3 三个页组成的一个流程，在页面 3 上有个「完成」按钮点击回到页面 1。在不同的交互模式下，实现这样的跳转有着不同的机制。

1. SPA模式下的正常跳转

这种模式是 3 个页面都在一个 WebView 中。点击页面 3 中的「完成」按钮，回退 -2 ，即回退 2 步历史记录，到页面 1。

2. 新打开WebView

打开新 WebView 又分三种方式。

如果我们把 3 个页面，拆分到 2 个 WebView 中，如下图，点击完成按钮，即关闭自身所在的 WebView。

同样是打开新的 WebView，如果我们按如下图的方法拆分会稍微复杂。这时点击完成按钮，首先关闭自身所在的 WebView，当页面 2「意识」到自己重新被展现时，自动退回 1 步到页面 1。

每次打开新的 WebView，这时点击完成，回退的本质是 HTML5「告诉」Native 关闭多个 WebView。需要特别注意的是，HTML5 中实现这种方式不是天然具备的，它需要 Native 具有一次关闭多个 WebView 的能力。所以我们在设计方案时，需要了解清楚自家的 Native 是否有这样的能力。

总结

以上，简单说了几种 HTML5 的跳转方式。这些跳转方式，没有绝对的对与错，我们在设计方案时，需要根据实际的业务需求与技术的限制，来整体考虑解决方案。

根据个人经验，也有几点小帖士分享给大家：

  • 前后逻辑交织不复杂的单个页面，可以考虑使用新 WebView 打开跳转。
  • 如果是一个任务型的流程，可以考虑将一个任务流包在一个 WebView 中，在任务内使用 SPA 跳转。不同的任务使用不同的 WebView。保持任务之间的关系清晰明了。
  • 设计上需要着重表现页面间转场动画的效果，优先考虑使用 SPA 跳转。
  • 为防止流程过于复杂，尽量不要自定义关闭、返回的行为。保持关闭为默认的关闭行为，保持返回为默认的返回行为。

N 在 0.37 版本中加入了WebView功能，所以想要在使用WebView,版本必须>=0.37，发送的 message 只能是字符串，所以需要将其他格式的数据转换成字符串，在接收到后再转换回去，其实直接用JSON.stringify和JSON.parse就可以加载html source属性用于指定加载的 html，可以加载在线的页面，也可以加载本地的页面，代码如下：

注意 ⚠️在 RN 中可以加载 WebView，但是无法调试，也不能使用 alert 来验证代码 js 代码是否运行成功，只能通过往 html 写入东西（innerHTML）来验证 js 是否运行成功。

WebView 与 html 的通信

webview 发送信息到 html。WebView 给 html 发送信息需要使用postMessage，而 html 接收 RN 发过来的信息需要监听message事件，代码如下：

这里需要注意一点，postMessage需要在 webview 加载完成之后再去 post，如果放在commponentWillMount里由于页面没有加载完成就 post 信息，会导致 html 端无法监听到 message 事件。html 发送信息到 webview。

RN 中 debug webview 和安卓开发中看起来是差不多的，连接好设备后，在 chrome 中输入chrome://inspect。就可以看到安卓设备上正在运行的 webview 了，点击inspect就会开启一个调试页面，就可以进行 debug 了，RN 似乎默认开启了 debug 调试，直接就可以看到 webview 中输出的信息。


在线咨询
上一篇：7套渐变风企业宣传介绍PPT模板，现代感十足！
下一篇：3种纯CSS方式实现Tab 切换

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 汕尾 广水市 滴道区 台江区 禹城 郊区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服