iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >iOS WKWebView适配实战篇
  • 769
分享到

iOS WKWebView适配实战篇

iOSWKWebView适配 2022-05-16 04:05:55 769人浏览 安东尼
摘要

一、Cookie适配 1.现状 WKWEBView适配中最麻烦的就是cookie同步问题 WKWebView采用了独立存储控件,因此和以往的UIWebView并不互通 虽然iOS

一、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];


- (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("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

具体实现原理可以点击下方视频链接:

点击获取框架原理视频

到此这篇关于iOS WKWebView适配实战篇的文章就介绍到这了,更多相关iOS WKWebView适配 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: iOS WKWebView适配实战篇

本文链接: https://www.lsjlt.com/news/30438.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iOS 16 版本适配
    iOS 16 真机调试时需要在设备的设置 —> 隐私与安全 —> 开发者模式 中打开开发者模式。 隐私权限增强,如通过 UIDevice 获取设备名称时,无法获取用户的信息,只能获取设备对应的名称([UIDevice currentDevi...
    99+
    2023-09-30
    ios iOS版本适配
  • IOS安全区域适配
    对于 iPhone 8 和以往的 iPhone,由于屏幕规规整整的矩形,安全区就是整块屏幕。但自从苹果手机 iphoneX 发布之后,前端人员在开发移动端Web页面时,得多注意一个对 IOS 所谓安全区域范围的适配。这其实说白了就是 iph...
    99+
    2023-08-30
    ios ui
  • iOS 17 适配 Xcode 15 问题
    在适配 iOS 17 + xcode 15时遇到的问题,记录一下。 1、 Could not build module ‘WebKit’ type argument 'nw_proxy_config_...
    99+
    2023-09-21
    ios xcode cocoa
  • 配置iOS 16 屏幕旋转适配实例详解
    目录正文一. AppDelegate 配置定义一个 bool 类型的变量二. 适配 iOS16 旋转屏幕三. 强制旋转屏幕四. 自动旋转正文 我们公司的 app 只支持竖屏, 只有在...
    99+
    2024-04-02
  • uniapp音频组件,适配ios,Android
    uniapp视频组件,适配ios,Android 说明: 有个需求是需要有音频的时长和拖动进度,我对音频使用只停留在使用audio标签,在uniapp插件市场未找到适合的组件,在通过百度只找到下面的组件,了解使用 unia...
    99+
    2023-08-19
    uni-app android ios 音频
  • 实战:移动端适配的最佳实践
    移动端适配我们需要做哪些事情 一个最佳实践除了设置 viewport 和 rem 基准值,随着iPhone手机的不断升级,我们不得不正视以下2个问题:安全区域适配识别刘海屏关于viewpoint-fit在切入正题之前,我们先展开介绍一下vi...
    99+
    2023-06-01
  • iOS无障碍适配西瓜视频Voice Over实践示例
    目录一、Voice Over 简介二、Voice Over 使用指南Voice Over 开发环境配置Voice Over 基本使用 —— 以西瓜为例入门手势...
    99+
    2024-04-02
  • Xcode 15新特性与iOS 17适配要点
    Xcode 15新特性 在 WWDC 23 上 Apple 推出了 Xcode 15,相比较 Xcode 14,它有如下的变化。 项目 安装包的大小继续减小,安装速度继续提升,因为 iOS 的 Components 也需要动态下载安装,否...
    99+
    2023-09-03
    ios xcode macos
  • 「docker实战篇」python的do
    原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!原文链接地址:「docker实战篇」python的docker爬虫技术-appium+python实战(18) 上次通过appium进行了,录制脚本的功能,而且还可以进行转换成...
    99+
    2023-01-31
    实战篇 docker python
  • k8s 实战篇 - mysql部署 - 1
    在项目的开发中肯定是需要使用数据库进行数据化持久操作。在JAVA项目中使用比较多的数据库是mysql,这篇文章主要描述怎么在k8s中安装mysql数据库。 mysql部署 1、获取mysql镜像 可以在dockerhub中搜索镜像地址...
    99+
    2023-08-19
    mysql docker 数据库
  • spring cloud gateway集成hystrix实战篇
    spring cloud gateway集成hystrix 本文主要研究一下spring cloud gateway如何集成hystrix maven <dependenc...
    99+
    2024-04-02
  • 《Redis实战篇》四、分布式锁
    文章目录 4.1 基本原理和实现方式对比4.2 Redis分布式锁的实现核心思路4.3 实现分布式锁版本一4.4 Redis分布式锁误删情况说明4.5 解决Redis分布式锁误删问题4.6 分布式锁的原子性问题4.7 Lua脚本解决...
    99+
    2023-08-17
    redis 分布式 java
  • Android 逆向之脱壳实战篇
    作者:37手游安卓团队 前言 这篇文章比较干,比较偏实战,看之前建议先喝足水,慎入。 在学脱壳之前,我们先来复习一下,什么时候是加固? 加固本质上就是对 dex 文件进行加壳处理,让一些反编译工具反编译到的是 dex 壳,而不...
    99+
    2023-08-30
    android java 开发语言 移动开发 安卓逆向 逆向安全
  • 《Redis实战篇》六、秒杀优化
    6、秒杀优化 6.0 压力测试 目的:测试1000个用户抢购优惠券时秒杀功能的并发性能~ ①数据库中创建1000+用户 这里推荐使用开源工具:https://www.sqlfather.com/ ,导...
    99+
    2023-09-02
    redis 数据库 java
  • iOS13 即将到来,iOS 推送 DeviceToken 适配步骤详解
    随着苹果iOS13系统即将发布,个推提前推出DeviceToken适配步骤,以确保新版本的兼容与APP推送服务的正常使用。iOS13的一个重要变化是"[deviceTokendescription]" 会受不同运行环境及...
    99+
    2023-06-05
  • 〖Python 数据库开发实战 - Redis篇⑤〗- Redis 的常用配置参数
    订阅 Python全栈白宝书-零基础入门篇 可报销!白嫖入口-请点击我。推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 Python全栈白宝书专栏,免费阶段订...
    99+
    2023-09-05
    python 数据库开发 redis Redis配置参数
  • Python操作lxml库实战之Xpath篇
    目录​一、Xpath概述1、Xpath简介2、 Xpath的安装二、Xpath的常用规则1、路径查找2、节点查找3、未知节点4、获取节点中的文本5、选取多个路径总结​一、X...
    99+
    2022-12-23
    python lxml xpath python lxml python操作lxml
  • 《Redis实战篇》三、优惠券秒杀
    文章目录 3.1 全局唯一ID3.2 Redis实现全局唯一Id3.3 添加优惠卷3.4 实现秒杀下单3.5 库存超卖问题分析3.6 乐观锁解决超卖问题3.7 优惠券秒杀-一人一单3.8 集群环境下的并发问题 3.1 全局唯...
    99+
    2023-08-23
    redis 数据库 java
  • ASP.NET Core快速入门之实战篇
    目录NO1 留言板(mysql的使用)NO2 聊天室(WebSocket的使用)NO3 找工作(AngleSharp的使用)部署多个站点一些其它的细节部署阿里云mysql的客户端获取...
    99+
    2024-04-02
  • h5适配ios顶部和底部安全区域的问题
    一. 前言: 苹果手机从iphoneX之后,屏幕顶部都有一个齐刘海,iPhoneX 取消了物理按键,改成底部小黑条,如果不做适配,这些地方就会被遮挡,所以本文记录一下齐刘海与底部小黑条的适配方法。 二...
    99+
    2023-09-17
    css3 css html javascript
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作