一篇文章了解JsBridge

12,118 阅读5分钟

什么是JSBridge

在大多数APP开发过程中,都会通过H5来实现部分功能,而Hybird APP基本90%以上都是H5。现在很少有纯原生的APP。但是,由于H5页面是内嵌到原生应用的WebView组件(一个浏览器内核)中,而手机浏览器Javascript引擎是在一个沙箱环境中运行,因此JavaScript的权限受到严格限制,比如没有本地文件读写权限、不能使用GPS、不能修改系统配置等。所以,如果JavaScript要用到这些受限的能力时,就需要委托原生去实现,原生完成后,再将结果通知JavaScript,因此,JavaScript和原生之间就需要一个通信的桥梁,而这个桥梁本质上就是原生的浏览器组件(我们统一称之为WebView)与Javascript 通信的通道,一般称为 WebView JavaScript Bridge, 为了简单,一般简称为 JS bridge。需要说明的是,原生不仅仅指移动端(Android、IOS)上原生代码开发的部分,它也可以是Windows、MAC上的,所以原生一词主要是为了区分H5,而本文只讨论移动端的Js Bridge 。

移动开发的大势

今年来,动态化是移动开发的主流趋势,所谓动态化是指可以随时更新APP的能力,这是为了克服原生应用修改后必须重新发版的天然不足。目前动态化的技术主要有四种:热补丁、混合开发框架(React-Native、Weex等)、纯粹的Web APP、原生加H5(需要经常更新的部分用H5实现)。 其中热补丁技术主要用于修复一些线上bug,不用于主流开发,当然也有一些基于热补丁技术的分包动态化方案,本文暂不讨论。而剩余的三种方案,都是通过Javascript 和原生配合实现的,而它们都用到了 JsBridge, 可见使用一个好的Js Bridge的重要性。而不同的混合开发框架、Web APP中Js Bridge的实现和通信协议都不相同,当然,如果你使用的事这些开发框架,你只需要了解相应框架下的通信协议就行,这没有什么问题。 但是,对于采用原生加H5的APP,就需要自己挑选一个合适的Js Bridge了,那么对于开发者来说,什么是好的JavaScript Bridge?

什么是好的JS Bridge?

可用性

能够满足通信需求、功能完善;当然,如果都不能用,还是回家洗洗睡吧~。

健壮性

所谓健壮就是经得住考验,bug少、兼容性好、在各种情况下都能稳定运行。然而,可怕的事,现有的知名开源jsbridge 质量都存在着严重问题,下面是我在两个知名Android JSBridge开源库下提的问题:

  1. https://github.com/lzyzsd/JsBridge/issues/119
  2. https://github.com/jesse01/WebViewJavascriptBridge/issues/5

可见,要想造一座好桥,还是不容易的。

跨平台

为了保证同一份Javascript代码既能同时在Android和IOS下正常运行,那么好的JavaScript Bridge 应该要能跨平台,这样才能保证在Android和IOS和H5通信协议一致。然而,目前Github上万star的 marcuswestin/WebViewJavascriptBridge 官方也只提供了IOS版,尽管有一些第三方Android实现,但大都存在各种各样的问题,有的存在严重bug,如 https://github.com/jesse01/WebViewJavascriptBridge/issues/5 , 有的和IOS版差别太大,如 https://github.com/fangj/WebViewJavascriptBridge 。

安全

安全是很重要的,现在有些Android实现中使用了 webview.addJavascriptInterface ,而在Android 4.2.2之前, webview.addJavascriptInterface 存在任意代码执行漏洞,这就会导致严重的安全问题。

使用简单

一个好东西应该是用起来简单的。

对于JS Bridge来说,使用简单应该包括三个端:Android、IOS、 JavaScript, 也就是说无论对于哪个端,用起来要足够的简单,这很重要,这样可以避免大量的原生开发和前端开发的撕逼。

强大

在满足可用性和使用简单的基础上,功能要尽可能强大。现在的很多实现,基本上只满足了可用性,而功能方面都比较弱,比如:

  1. 不支持检测是否存在某个API的方法;有时随着版本迭代不确定某个版本下是否存在某个Native或Javascript方法(在版本迭代过程中一些是新添加的)。
  2. 不支持进度回调;现有JS Bridge基本都只支持一次调用一次返回,但是有些时候,如js调用原生下载文件功能的方法时,原生需要在下载过程中将下载进度不停返回给js。
  3. 不支持API管理;现有JS Bridge注册API时基本都是每个API都需要单独注册,这样在API多的情况下,不仅使用回非常麻烦,也不利于API分类管理。

福音

我给大家捅破了现实,也必须为大家重塑希望!听不懂?那简单来说,就是前面都是铺垫,下面才是真正目的!

那么到底有没有一个可用、健壮、跨平台、安全、使用简单、强大的现成的JS Bridge?

哈哈,当然是有的, 经过我通宵达旦、四处浏览、呕心沥血、废寝忘食,终于创造了这么一个健壮、跨平台、安全、使用简单、强大的JS Bridge,那就是DSBridge,它有如下特点:

  1. Android、IOS、Javascript 三端易用,轻量且强大、安全且健壮。
  2. 同时支持同步调用和异步调用
  3. 支持以类的方式集中统一管理API
  4. 支持API命名空间
  5. 支持调试模式
  6. 支持API存在性检测
  7. 支持进度回调:一次调用,多次返回
  8. 支持Javascript关闭页面事件回调
  9. 支持Javascript 模态/非模态对话框
  10. 支持腾讯X5内核

当然得给出源码地址:

DSBridge for IOS:github.com/wendux/DSBr…

DSBridge for Android: github.com/wendux/DSBr…

详情请参考Github文档,都有中文哦。

最后,如果你喜欢DSBridge, 欢迎star,不能多年辛苦无人知啊,哈哈。