资讯专栏INFORMATION COLUMN

一篇文章了解Js Bridge

Karuru / 2790人阅读

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

什么是JS Bridge

在大多数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 和原生配合实现的,而它们都用到了 Js Bridge, 可见使用一个好的Js Bridge的重要性。而不同的混合开发框架、Web APP中Js Bridge的实现和通信协议都不相同,当然,如果你使用的事这些开发框架,你只需要了解相应框架下的通信协议就行,这没有什么问题。 但是,对于采用原生加H5的APP,就需要自己挑选一个合适的Js Bridge了,那么对于开发者来说,什么是好的JavaScript Bridge?

什么是好的JS Bridge? 可用性

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

健壮性

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

https://github.com/lzyzsd/JsB...

https://github.com/jesse01/We...

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

跨平台

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

安全

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

使用简单

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

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

强大

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

不支持检测是否存在某个API的方法;有时随着版本迭代不确定某个版本下是否存在某个Native或Javascript方法(在版本迭代过程中一些是新添加的)。

不支持进度回调;现有JS Bridge基本都只支持一次调用一次返回,但是有些时候,如js调用原生下载文件功能的方法时,原生需要在下载过程中将下载进度不停返回给js。

不支持API管理;现有JS Bridge注册API时基本都是每个API都需要多带带注册,这样在API多的情况下,不仅使用回非常麻烦,也不利于API分类管理。

福音

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

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

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

Android、IOS、Javascript 三端易用,轻量且强大、安全且健壮。

同时支持同步调用和异步调用

支持以类的方式集中统一管理API

支持API命名空间

支持调试模式

支持API存在性检测

支持进度回调:一次调用,多次返回

支持Javascript关闭页面事件回调

支持Javascript 模态/非模态对话框

支持腾讯X5内核

当然得给出源码地址:

DSBridge for IOS:https://github.com/wendux/DSBridge-IOS

DSBridge for Android: https://github.com/wendux/DSBridge-Android

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92977.html

相关文章

  • 实现electron-bridge

    electron-bridge github链接 求star Motivition 如果想一套代码同时能跑在web环境和electron环境中,就需要在代码中先判断环境,再分别写对应的逻辑。每次写到electron环境下的逻辑,又要区分渲染进程和主进程,因为有些事只能渲染进程做,有些事只能主进程做。所以,我希望能将这些抽象出来,某个方法,只能在electron环境下被调用,并且不需要关心在什么进...

    Hujiawei 评论0 收藏0
  • web与APP之间的交互---WebViewJavascriptBridge

    摘要:在实际项目之中,经常会遇到之中嵌入网页的情况,就需要网页与原生之间交互,比如获取当前用户信息等。一种简单的方式就是通过参数来搞定,但是这种方式异常死板,所以有了。本文章旨在记录的实现,如有错误,还请指正如有需要了解原理,请。 在实际项目之中,经常会遇到app之中嵌入网页的情况(Hybrid),就需要web网页与原生app之间交互,比如获取当前用户信息等。一种简单的方式就是通过url参数...

    mingzhong 评论0 收藏0
  • web与APP之间的交互---WebViewJavascriptBridge

    摘要:在实际项目之中,经常会遇到之中嵌入网页的情况,就需要网页与原生之间交互,比如获取当前用户信息等。一种简单的方式就是通过参数来搞定,但是这种方式异常死板,所以有了。本文章旨在记录的实现,如有错误,还请指正如有需要了解原理,请。 在实际项目之中,经常会遇到app之中嵌入网页的情况(Hybrid),就需要web网页与原生app之间交互,比如获取当前用户信息等。一种简单的方式就是通过url参数...

    3fuyu 评论0 收藏0

发表评论

0条评论

Karuru

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<