阅读 4214

一篇文章了解JsBridge之IOS篇

之前发布在掘金Android栏目下的文章“一篇文章了解Js Bridge”受到了较多的反馈,本文在该文章的基础上,添加了一些针对IOS平台下的一些问题的讨论。

什么是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?

什么是好的JSBridge?

可用性

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

健壮性

所谓健壮就是经得住考验,bug少、兼容性好、在各种情况下都能稳定运行。然而,可怕的事,现有的知名开源jsbridge 质量都存在着严重问题,现在Github上一个上万star的IOS平台下的开源JS Bridge项目 marcuswestin/WebViewJavascriptBridge ,纵观其issue列表,也是各种各样的问题反馈。

Android 方面问题更多,下面是我在两个知名Android JS Bridge开源库下提的问题:

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

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

跨平台

为了保证同一份Javascript代码既能同时在Android和IOS下正常运行,那么好的JavaScript Bridge 应该要能跨平台,这样才能保证在Android和IOS和H5通信协议一致。然而,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 存在任意代码执行漏洞,这就会导致严重的安全问题。

在IOS下 UIWebView 存在跨域访问漏洞,成功利用该漏洞的攻击者可以远程获取手机应用沙盒内所有本地文件系统内容,包括浏览器的Cookies、用户的配置文件、文档等敏感信息。而WKWebView可通过手动设置是否允许“file://”域发起跨域请求。

性能

对于IOS来说,WKWebView 在打开页面速度和资源消耗方面比UIWebView 要好的多,苹果对UIWebView内存泄露问题一直没有很好的解决,现在苹果官方已经废弃UIWebView,开发者是时候使用WKWebView了。

使用简单

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

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

考虑到安全和性能问题,DSBridge v3.0.0之后只支持WKWebView,而不会再支持UIWebView。如果您的项目还需要使用UIWebView,请使用DSBridge v2.0.0

当然得给出源码地址:

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

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

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

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

关注下面的标签,发现更多相似文章
评论