前端工程师所需要了解的WebView

导语现如今，在做移动端 H5 时，少不了与 Native 之间进行交互。而在Native中，H5的承载容器为 WebView，其核心是使用 WebView 控件实现加载 url。

WebView的概念

以上是一个客户端者描述的，而站在一个前端者的角度，使用过后的感受就是：

WebView可以简单理解为页面里的 iframe。原生app与 WebView 的交互可以简单看作是页面与页面内 iframe页面进行的交互。就如页面与页面内的 iframe 共用一个 Window一样，原生与 WebView也共用了一套原生的方法。

既然我们使用了 WebView 来承载 H5 ，那么便少不了与 Native 之间发生交互， WebView 所承载的页面，通过 JS 与 Native 进行通信，我们将这个通信“桥梁”为 JSBridge 。如果你参与过内置浏览器的 H5 ，会发现一个经常出现的东西，叫做WeixinJSBridge。

JSBridge

既然是『简单来讲』那么 JSBridge 的用途肯定不只『调用 Native 功能』这么简单宽泛。实际上，JSBridge 就像其名称中的『Bridge』的意义一样，是 Native 和非 Native 之间的桥梁，它的核心是 构建 Native 和非 Native 间通信的通道，而且是 双向通信的通道。

所谓 双向通信的通道：

JS 向 Native 发送 ： 调用相关功能、 Native 当前 JS 的相关状态等。

Native 向 JS 发送 ： 回溯调用结果、推送、 JS 当前 Native 的状态等。

Java 是运行在一个单独的 JS Context 中（例如，WebView 的 Webkit 引擎、JSCore）由于这些 Context 与原生运行环境的天然隔离，我们可以将这种情况与 RPC（Remote Procedure Call，远程过程调用）通信进行类比，将 Native 与 Java 的每次互相调用看做一次 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， Java的支持。不过它的API却没有很大的改动，在兼容低版本的同时只引进了少部分新的API，并不需要你做很大的改动。

在 Android WebView，要实现 JS 调用 Java，有 3种 方法：

JavaInterface

WebViewClient.shouldOverrideUrlLoading

WebChromeClient.onXXX

1、JavaInterface

这是 Android 的 JS 与 Native 通信的解决方案。

首先 Native 端需要实现这么一个类，给 Java 调用。

publicclassWebAppInterface

@JavaInterface

publicvoidshowToast（String toast）

Toast.makeText（mContext， toast， Toast.LENGTH_SHORT）.show。

将这个WebAppInterface类，通过以下代码，添加到 WebView 的 JavaInterface 中。

WebView webView = （WebView） findViewById（R.id.webview）

webView.addJavaInterface newWebAppInterface this “Android”。

// 这里的Android会被当做一个变量，注入到页面的window中。

接着就可以在 JS 中调用 Native 了。

functionshowAndroidToast（ toast）

Android.showToast（toast）

2、WebViewClient.shouldOverrideUrlLoading

这个方法的作用是拦截所有 WebView 的 URL Scheme。

拦截 URL Scheme的主要流程是：Web 端通过某种方式（例如 iframe.src/location.href）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL Scheme（包括所带的参数）进行相关操作。

页面可以构造一个特殊格式的 URL Scheme触发，shouldOverrideUrlLoading 拦截 URL 后判断其格式， Native 就能执行自身的逻辑了。

publicclassCustomWebViewClientextendsWebViewClient

@Override

publicbooleanshouldOverrideUrlLoading

WebView view。

String url

ifisJsBridgeUrlurl

// JSbridge的处理逻辑

returntrue。

returnsuper.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的值。

publicclassCustomWebChromeClient extendsWebChromeClient

@Override

publicbooleanonJsPrompt

WebView view。

Stringurl。

Stringmessage。

StringdefaultValue。

JsPromptResult result

// 处理JS 的调用逻辑

result.confirm。

returntrue。

Java 调用 Java

Android，在 Kitkat（4.4）只能用 loadUrl 一段 Java 代码。

webView.loadUrl（“ java：” + javaString）

而 Kitkat 之后的版本，也可以用evaluateJava方法实现：

webView.evaluateJavajavaString， newValueCallback< String>

@Override

publicvoidonReceiveValue（ Stringvalue）

// 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 javaEnabled to NO if you render files that are not supposed to run Java.

在 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 相同的 Java 引擎。

Java ↔︎ Swift 对话机制

使用用户脚本来注入 Java

WKUser允许在正文加载之前或之后注入到页面中。这个强大的功能允许在页面中以安全且唯一的方式操作网页内容。

一个简单的例子如下，用户改变背景的用户脚本入到网页中：

letsource = “document.body.style.background = ”777。

// 注入脚本 在文档加载完成后执行

let user = WKUser

let user = WKUser（source： source， injectionTime： .AtDocumentEnd， forMainFrameOnly： true）

let userContentController = WKUserContentController

userContentController.addUser（user）

let configuration = WKWebViewConfigurationconfiguration.userContentController = userContentControllerself.webView =WKWebView（frame： self.view.bounds， configuration： configuration）

对象可以以 Java 源码形式初始化，初始化时还可以传入是在加载之前还是结束时注入，以及脚本影响的是这个布局还是仅主要布局。于是用户脚本被加入到WKUserContentController中，并且以WKWebViewConfiguration属性传入到WKWebView的初始化过程中。

这个样例可以简单扩展为更为高级的页面修改方法，例如去除广告、隐藏评论等。

Message Handlers

利用以下代码，可以跟Native进行通信

window.webkit.messageHandlers.{NAME}.postMessage

Handler的name可以通过WKMessageHandler协议中的addMessageHandler接口函数设置：

classNotificationMessageHandler： NSObject， WKMessageHandler{funcuserContentController（userContentController： WKUserContentController，didReceiveMessage message： WKMessage！{println（message.body）}}letuserContentController = WKUserContentControllerlethandler = NotificationMessageHandleruserContentController.addMessageHandler（handler， name： “notification”

于是当进入 app 的时候，比如说在页面中创建一个新对象，相关信息就可以这样传递：

window.webkit.messageHandlers.notification.postMessage（{ body： “发送给Native”}）

添加用户脚本来对 web 事件监听并用 Message Handler 将信息传回 app。

总结

通信原理是 JSBridge 实现的核心，实现方式可以各种各样，但是万变不离其宗。这里，推荐的实现方式如下：

Java 调用 Native 推荐使用 注入 API 的方式。 iOS6 忽略，Android 4.2以下使用 WebViewClient 的 onJsPrompt 方式。

Native 调用 Java 则直接执行拼接好的 Java 代码即可。

对于其他方式，诸如 React Native、小程序 的通信方式都与上描述的近似，并根据实际情况进行优化。

以 React Native 的 iOS 端举例：Java 运行在 JSCore 中，实际上可以与上面的方式一样，利用注入 API 来实现 Java 调用 Native 功能。不过 React Native 并没有设计成 Java 直接调用 Object-C，而是 为了与 Native 里事件响应机制一致，设计成需要在 Object-C 去调 Java 时才通过返回值触发调用。原理基本一样，只是实现方式不同。

本文相关词条概念解析：

页面

雷晓东，男，1973年生，博士，教授，博士生导师。2006年毕业于北京化工大学应用化学专业获工学博士学位后留校任教。主要从事水处理工程与技术。无机功能材料及其应用、膜材料制备及其性能、废弃资源有效利用、镁资源有效利用方面的科研与教学工作。现承担国家支撑计划、863计划和国家自然科学基金和与企业合作的项目等共9项。2013年英国UniversityCollegeLondon(UCL)访问学者。已在AIChEJ.、Chem.Eng.Sci.和J.Mater.Chem.等刊物上发表论文六十余篇，获授权专利16项，参与撰写专着2部。ACSAppl.Mater.Interfaces、Chem.Eng.J、Appl.Catal.A、Ind.Eng.Chem.Res.、DaltonTransRSCAdv.和Nanoscale等期刊审稿人。