Android/iOSWebview容器下JSBridgeSDK原理浅析——前端视角

在 Hybrid 开发的过程中&＃xff0c;由于前端和客户端同学存在认知差异&＃xff0c;导致在解决一些 bridge 问题时存在一定的沟通成本和信息不对称。本文从前端视角切入&＃xff0c;讲述 bridge 方法如何和客户端进行交互&＃xff0c;以及在此过程中进行的各种中间处理。

Native 与 Webview 的通信方式

• Javascript 调用 Native 方法

在 Webview 内&＃xff0c;Javascript 调用 Native 方法主要存在 3 种方式&＃xff1a;

1. Native 向 Webview 的 Context ( 即 Webview 中的 window ) 注入一个暴露指定 Native 方法 ( Android ) 或接受 Javascript 消息 ( iOS ) 的对象。

2. 拦截 Webview 内的某类特定的 URL Scheme&＃xff0c;并根据 URL 来执行对应的 Native 方法。

3. 拦截 Javascript 的 console.log 、alert 、prompt 或 confirm&＃xff0c;并执行对应的 Native 方法。

在目前主流的 JSSDK 实现中&＃xff0c;主要采用了前两种通信方式&＃xff0c;并以注入式为主、拦截式为兜底策略进行通信&＃xff0c;本文也会主要介绍基于这两种方式的实现原理和应用场景。

注入式&＃xff08; 即第一种方式 &＃xff09;有更好的性能和更优的开发体验&＃xff0c;但并非兼容所有系统版本。

Android 的 JavascriptInterface 在 Android 4.2 版本前因没有注解导致暴露了包括系统类 ( java.lang.Runtime ) 方法在内的其他不应暴露的接口&＃xff0c;存在较大的安全隐患&＃xff1b;而 iOS 的 WKScriptMessageHandler 仅支持 iOS 8.0&＃43; 的版本。

因此、在较低的系统版本中&＃xff0c;会采用拦截式&＃xff08; 即第二种方式 &＃xff09;作为与 Native 通信的方法。

• Native 调用 Javascript 方法

Native 调用特定 Webview 内的 Javascript 方法主要存在 2 种方式&＃xff1a;

1. 直接通过 URL 执行 Javascript 语句&＃xff0c;例如 Javascript:alert(&＃39;calling...&＃39;); 。

2. 通过 Android 和 iOS 同名的方法 evaluateJavascript() 来执行 Javascript 语句。

第二种方式仅兼容 Android 4.4&＃43; 和 iOS 8.0&＃43;&＃xff0c;而相比第一种&＃xff0c;它的优势在于可以获取到 Javascript 的返回值&＃xff0c;是官方提供的推荐通信方式。

调用 NATIVE 方法

结合目前各类主流的 JSSDK 实现&＃xff0c;调用 NATIVE 方法的流程大致如下&＃xff1a;

关于奇舞团

奇舞团是 360 集团最大的大前端团队&＃xff0c;代表集团参与 W3C 和 ECMA 会员&＃xff08;TC39&＃xff09;工作。奇舞团非常重视人才培养&＃xff0c;有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择&＃xff0c;并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。