前端工程师需要了解的 WebView 知识
| 导语
现如今,在做移动端 H5 开发时,少不了与 Native 之间进行交互。而在Native中,H5的承载容器为 WebView,其核心是使用 WebView 控件实现加载 url。
WebView的概念
WebView
用来展示网页的view
组件,该组件是你运行自己的浏览器或者在你的线程中展示线上内容的基础。使用Webkit
渲染引擎来展示,并且支持前进后退等基于浏览历史,放大缩小,等更多功能。
简单来说
WebView
是手机中内置了一款高性能Webkit
内核浏览器,在 SDK 中封装的一个组件。不过没有提供地址栏和导航栏,只是单纯的展示一个网页界面。
以上是一个客户端开发者描述的,而站在一个前端开发者的角度,使用过后的感受就是:
WebView
可以简单理解为页面里的iframe
。原生app
与WebView
的交互可以简单看作是页面与页面内iframe
页面进行的交互。就如页面与页面内的iframe
共用一个Window
一样,原生与WebView
也共用了一套原生的方法。
既然我们使用了 WebView
来承载 H5
,那么便少不了与 Native
之间发生交互,WebView
所承载的页面,通过 JS
与 Native
进行通信,我们将这个通信的”桥梁“为 JSBridge
。如果你参与过微信内置浏览器的 H5
开发,会发现一个经常出现的东西,叫做 WeixinJSBridge
。
JSBridge
JSBridge
简单来讲,主要是 给 JavaScript 提供调用 Native 功能的接口
,让混合开发中的『前端部分』可以方便地使用地址位置、摄像头甚至支付等 Native
功能。
既然是『简单来讲』,那么 JSBridge 的用途肯定不只『调用 Native 功能』这么简单宽泛。实际上,JSBridge 就像其名称中的『Bridge』的意义一样,是 Native 和非 Native 之间的桥梁,它的核心是 构建 Native 和非 Native 间消息通信的通道
,而且是 双向通信的通道
。
所谓 双向通信的通道
:
-
JS 向 Native 发送消息 : 调用相关功能、通知 Native 当前 JS 的相关状态等。
-
Native 向 JS 发送消息 : 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。
JavaScript 是运行在一个单独的 JS Context 中(例如,WebView 的 Webkit 引擎、JSCore)。由于这些 Context 与原生运行环境的天然隔离,我们可以将这种情况与 RPC(Remote Procedure Call,远程过程调用)通信进行类比,将 Native 与 JavaScript 的每次互相调用看做一次 RPC 调用。如此一来我们可以按照通常的 RPC 方式来进行设计和实现。
在 JSBridge 的设计中,可以把前端看做 RPC 的客户端,把 Native 端看做 RPC 的服务器端,从而 JSBridge 要实现的主要逻辑就出现了:通信调用(Native 与 JS 通信
和 句柄解析调用
。(如果你是个前端,而且并不熟悉 RPC 的话,你也可以把这个流程类比成 JSONP 的流程。)
通过以上的分析,可以清楚地知晓 JSBridge
主要的功能和职责,接下来,就分析一下在 Android WebView
和 iOS WebView
中实现 Native 与 JS 通信的原理。
Android WebView
Android 4.4 前:
Android WebView
在低版本 & 高版本采用了不同的 Webkit 版本的内核(正因为如此,H5 的很多新特性,在 Android 版本小于4.4的安卓机上,都不支持) Android 4.4后:原本基于Webkit
的WebView
开始基于Chromium
内核,这一改动大大提升了WebView
组件的性能以及对HTML5
,CSS3
,JavaScript
的支持。不过它的API却没有很大的改动,在兼容低版本的同时只引进了少部分新的 API,并不需要你做很大的改动。
在 Android WebView,要实现 JS 调用 Java,有 3 种方法:
JavascriptInterface
WebViewClient.shouldOverrideUrlLoading()
WebChromeClient.onXXX()
1、 JavascriptInterface
这是 Android 提供的 JS 与 Native 通信的官方解决方案。
首先 Native 端需要实现这么一个类,给 JavaScript 调用。
public class WebAppInterface {
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}
然后将这个 WebAppInterface
类,通过以下代码,添加到 WebView 的 JavaScriptInterface 中。
WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
// 这里的Android会被当做一个变量,注入到页面的window中。
接着就可以在 JS 中调用 Native 了。
function showAndroidToast(toast) {
Android.showToast(toast);
}
2、WebViewClient.shouldOverrideUrlLoading()
这个方法的作用是拦截所有 WebView 的 URL Scheme 。
URL Scheme
是一种类似于 URL
的链接,是为了方便 app
直接互相调用设计的,形式和普通的 URL
近似,主要区别是 protocol
和 host
一般是自定义的。
拦截 URL Scheme
的主要流程是:Web
端通过某种方式(例如 iframe.src/location.href
)发送 URL Scheme
请求,之后 Native
拦截到请求并根据 URL Scheme
(包括所带的参数)进行相关操作。
页面可以构造一个特殊格式的 URL Scheme 触发,shouldOverrideUrlLoading
拦截 URL
后判断其格式,然后 Native
就能执行自身的逻辑了。
public class CustomWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(
WebView view,
String url
) {
if (isJsBridgeUrl(url)) {
// JSbridge的处理逻辑
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
}
3、WebChromeClient.onXXX()
通过修改原来浏览器的 window某些方法,然后拦截固定规则的参数,然后分发给Java 对应的方法去处理
- alert,可以被 WebView 的
WebChromeClient.onJsAlert()
监听
- confirm,可以被 WebView 的
WebChromeClient.onJsConfirm()
监听
- console.log,可以被 WebView 的
WebChromeClient.onConsoleMessage()
监听
- prompt,可以被 WebView 的
WebChromeClient.onJsPrompt()
监听
prompt 简单举例说明,Web 页面通过调用 prompt()
方法,安卓客户端通过监听WebChromeClient.onJsPrompt()
事件,拦截传入的参数,如果参数符合一定协议规范,那么就解析参数,扔给后续的 Java 去处理。
window.prompt(message, value);
WebChromeClient.onJsPrompt()就会受到回调。onJsPrompt()方法的 message参数的值正是JS的方法 window.prompt()的 message的值。
public class CustomWebChromeClient extends WebChromeClient {
@Override
public boolean onJsPrompt(
WebView view,
String url,
String message,
String defaultValue,
JsPromptResult result
) {
// 处理JS 的调用逻辑
result.confirm();
return true;
}
}
Java 调用 JavaScript
Android,在 Kitkat(4.4)只能用 loadUrl 一段 JavaScript 代码。
webView.loadUrl("javascript:" + javaScriptString);
而 Kitkat 之后的版本,也可以用 evaluateJavascript 方法实现:
webView.evaluateJavascript(javaScriptString, new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
// native代码
}
});
IOS WebView
In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView. Additionally, consider setting the WKPreferences property javaScriptEnabled to NO if you render files that are not supposed to run JavaScript.
在 IOS8 之前,苹果手机的 WebView 使用的 UIWebView,UIWebView长期以来存在某些问题:
- 加载速度慢
- 存在内存泄漏
- 内存占用多,内存优化困难
- 如果内存占用过多还可能因为占用过多被系统kill掉 在 WWDC 2014 大会上,IOS8推出了 WKWebView,WKWebView 是现代 Webkit API 在 iOS 8 和 OS X Yosemite 应用中的核心部分。它代替了 UIKit 中的 UIWebView 和 AppKit 中的 WebView,提供了统一的跨双平台 API。拥有 60fps 滚动刷新率、内置手势、高效的 app 和 web 信息交换通道、和 Safari 相同的 JavaScript 引擎。
JavaScript ↔︎ Swift 对话机制
使用用户脚本来注入 JavaScript
WKUserScript 允许在正文加载之前或之后注入到页面中。这个强大的功能允许在页面中以安全且唯一的方式操作网页内容。
一个简单的例子如下,用户改变背景的用户脚本被插入到网页中:
let source = "document.body.style.background = #777";
// 注入脚本 在文档加载完成后执行
let userScript = WKUserScript()
let userScript = WKUserScript(source: source, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)
let userContentController = WKUserContentController()
userContentController.addUserScript(userScript)
let configuration = WKWebViewConfiguration()
configuration.userContentController = userContentController
self.webView =WKWebView(frame: self.view.bounds, configuration: configuration)
对象可以以 JavaScript 源码形式初始化,初始化时还可以传入是在加载之前还是结束时注入,以及脚本影响的是这个布局还是仅主要布局。于是用户脚本被加入到 WKUserContentController
中,并且以 WKWebViewConfiguration
属性传入到 WKWebView
的初始化过程中。
这个样例可以简单扩展为更为高级的页面修改方法,例如去除广告、隐藏评论等。
Message Handlers
利用以下代码,可以跟 Native 进行通信
window.webkit.messageHandlers.{NAME}.postMessage()
Handler
的 name 可以通过 WKScriptMessageHandler
协议中的 addScriptMessageHandler()
接口函数设置:
class NotificationScriptMessageHandler: NSObject, WKScriptMessageHandler {
func userContentController(
userContentController: WKUserContentController,
didReceiveScriptMessage message: WKScriptMessage!
) {
println(message.body)
}
}
let userContentController = WKUserContentController()
let handler = NotificationScriptMessageHandler()
userContentController.addScriptMessageHandler(handler, name: "notification")
于是当通知进入 app 的时候,比如说在页面中创建一个新对象,相关信息就可以这样传递:
window.webkit.messageHandlers.notification.postMessage({body: '发送给Native'});
添加用户脚本来对 web 事件监听并用 Message Handler 将信息传回 app。
总结
通信原理是 JSBridge
实现的核心,实现方式可以各种各样,但是万变不离其宗。这里,推荐的实现方式如下:
-
JavaScript
调用Native
推荐使用注入 API
的方式。( iOS6 忽略,Android 4.2 以下使用WebViewClient
的onJsPrompt
方式。) -
Native
调用JavaScript
则直接执行拼接好的JavaScript
代码即可。
对于其他方式,诸如 React Native、微信小程序 的通信方式都与上描述的近似,并根据实际情况进行优化。
以 React Native 的 iOS 端举例:JavaScript 运行在 JSCore 中,实际上可以与上面的方式一样,利用注入 API 来实现 JavaScript 调用 Native 功能。不过 React Native 并没有设计成 JavaScript 直接调用 Object-C,而是 为了与 Native 开发里事件响应机制一致
,设计成 需要在 Object-C 去调 JavaScript 时才通过返回值触发调用
。原理基本一样,只是实现方式不同。
推荐阅读
-
前端工程师需要了解的 WebView 知识
-
硬件工程师知识点 2 -- 对电源的基本了解
-
每个人都需要了解一些心理学知识--阅读 "普通心理学"(上)的简短说明
-
弄清电场 Ex、Ey、Ez、normE(电场模式)对场分布的影响,读懂这些不需要看磁场就能基本了解所有场分布的知识
-
纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。 云智慧的敏捷教练——Iris Xu近期在公司做了一场分享,主题为「敏捷需求挖掘和组织方法,交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验,完成了企业多个团队从传统模式到敏捷转型的落地和实施,积淀了很多的经验。 这次分享主要包含以下2个部分: 第一部分是用户影响地图 第二部分是事件驱动的业务分析Event driven business analysis(以下简称EDBA) 用户影响地图,是一种从业务目标到产品需求映射的需求挖掘和组织的方法。 在软件开发过程中可能会遇到一些问题,比如大家使用不同的业务语言、技术语言,造成角色间的沟通阻碍,还会导致一些问题,比如需求误解、需求传递错误等;这会直接导致产品的功能需求和要实现的业务目标不是映射关系。 但在交付期间,研发人员必须要将这些需求实现交付,他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案,需要把它实现,但没有和业务侧一起去思考解决方案是否正确,能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。 我们在每次迭代里加入的假设,也就是功能需求。首先把它先实现,再逐步去验证我们每一个小目标是否已经实现,再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。 我们在软件开发中可能存在的一些问题 针对这些问题,我们如何避免?先简单介绍做敏捷转型的常规思路: 先做团队级的敏捷,首先把产品、开发、测试人员,还有一些更后端的人员比如交互运维的同学放在一起,组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。 接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的,第一层是业务需求,在这个层级是以用户目标和业务目标作为输入进行规划,同时需要去考虑客户的诉求。业务人员通过获取到的业务需求,进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元,它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能,它是我们集成和测试的对象,也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队,映射到迭代计划会上要把它分解为相应的技术任务,包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。 将这几个点串起来,形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程,最后生产。另外产品需求包含了操作流程和业务规则,具需求交付时间、工程时间以及我们的一些质量标准的要求。 谈到用户影响的地图,在敏捷江湖上其实有一个传说,大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉,在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前,先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后,用户故事地图才去梳理我们整个的业务工作流,以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题,我们包括以下这些: 首先是范围蔓延,我们在整张地图上,功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上,那大家都有不同想法些立场,会提出很多需求(正确以及错误的需求)。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。 这里提到的错误需求,比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话,就需要降低优先级或弃掉。另外,通常我们去制定解决方案的时候,会考虑较完美的实现,导致解决方案括很多的功能。这个时候关键目标至关重要,会帮助我们梳理筛选、确定优先级。 看一下用户影响到地图概貌 总共分为一个三层的结构: 第一层why,你的业务目标哪个是最重要的,为什么?涉及到的角色有哪些? 第二层how ,怎样产生影响?影响用户角色什么样的行为? (不需要去列出所有的影响,基于业务目标) 第三层what,最关键的是在梳理需求时不需一次把所有细节想全,这通常团队中经常遇到的问题。 我们用这个例子来看一下 这是一个客服中心的影响地图,业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的,specific非常的具体,miserable 是可以衡量的,action reoriented是面向活动的, real list 也是很实际的。 量化的目标会指引我们接下来的行动,梳理一个业务目标,尽量去量化,比如 :我们通过打造一条什么样的流水线,能够提高整个部署的效率,时间是原来的 1/2 。这样才是一个能量化的有意义的目标。 回到这幅图, how 层级识别出来的内容,客服角色:想要对它施加的影响,把客户引导到论坛上,帮助客户更容易的跟踪问题,更快速的去定位问题。初级用户:方论坛上找到问题。高级用户:在论坛上回答问题。通过我们这些用户角色,进行活动,完成在不增加客户客服人数的前提下支持更多的用户数量。 最后一个层级,才是我们日常接触比较多的真正的功能的特性和需求,比如引导到客户到论坛上,其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付,在每个迭代之前做进一步的梳理,细化成相应的用户故事。 这个是云智慧团队中,自己做的影响地图的范例,可以看下整个的层级结构。序号表示优先级。 那我们用户影响地图可以总结为:
-
硬件工程师需要了解哪些基础知识
-
声学工程师应了解的 150 项声学基础知识(全文)
-
测试还需要了解中间件知识--不同层次中间件的作用
-
2021 年前端开发人员需要了解的 JS/React 规范
-
您需要了解的企鹅最新排名调整和发布规则知识