从前端初识JSBridge
什么是 JSBridge
目前在很多 app 中,有利用 webview 组件内嵌 h5 实现一部分页面和功能,h5 部分采用 js 开发,native 部分原生开发,就是 Hybrid 的混合开发模式。由于 h5 部分 的 js 是运行在app 沙盒中,故怎么实现 h5 和 native 的通信是很重要的事情,JSBridge 就是可用于解决 js 和 native 双向通信的一种方案。
例如:
- 基于web UI 的 hybrid 解决方案:微信浏览器,公司内的 hybrid 方案
- 非基于 Web UI 但业务逻辑基于 JavaScript 的解决方案:例如 React-Native
为什么需要JSBridge
客户端对于前端而言,功能更强大,有系统级别的调用,如摄像头,获取用户端信息,GPS等。有了 JSBridge 之后,前端如果也想拥有这些功能,就可以借助 JSBridge ,通知 native 调用特定功能,然后将结果再通过 JSBridge 返回给 js 。客户端也比前端环境更安全,可以对js 请求进行校验。
有时候使用前端构建页面比客户端方便,前端拥有强大的动态化功能。前端在执行某些业务后,可以通过 JSBridge 通知 Native 相关状态
JSBridge的实现方式
Javascript 运行在独立的JS Context中,与原生部分天然隔离。则 js 和 native 的相互通信调用可以类比为 RPC 远程过程调用。从前端的角度看,两者的通信过程可以用 jsonp 进行类比。
Bridge 本质是跨领域,跨语言通信 javascript <-> OC/Java
,实现方式常见大致有2种:
- 信号式,伪造请求。eg: 微信:wx://,支付宝:alipay://,
优点:兼容性好,可扩展性强
缺点:调用延迟较高,创建请求需要时间 - 注入式,通过webView 注入,类似于BOM
优点:调用速度快,参照alert
缺点:版本兼容问题,且可能会造成线程阻塞