Hybrid混合开发和JSBridge的原理

参考文章：
https://juejin.cn/post/7103693942780067877
https://juejin.cn/post/7062967241268019214
https://blog.csdn.net/yuzhengfei7/article/details/93468914
https://juejin.cn/post/6844903585268891662

Hybrid混合开发

APP的种类

App目前主要分为三类，分为Web App、Hybrid App、 Native App。

Hybrid开发

混合开发（即Hybrid App）其实是一种开发模式，它混合使用了Native和Web技术开发来实现同一个应用，把Native开发和Web开发的优点结合了起来。
接下来，我们先来对比一下，原生和H5的优缺点是什么吧：

Hybrid开发主要原理

主要原理就是将 APP 的一部分需要动态变动的内容通过 H5 来实现，通过原生的网页加载控件 WebView (Android)或 WKWebView（iOS）来加载H5页面
优点：

• 开发成本较低，可以跨平台，调试方便 维护成本低，功能可复用。
• 功能更加完善，性能和体验要比起web app好太多，更新较为自由。

缺点：

• 相比原生，性能仍然有较大损耗，不适用于交互性较强的app。

想要完成这种Hybrid混合开发就要知道移动端和网页端如何进行通信，接下来就介绍移动端和网页端通信的一种方法JSBridge

JSBridge的使用的原理

JSBridge 的用途

JSBridge 简单来讲，主要是 给 JavaScript 提供调用 Native 功能的接口，让混合开发中的『前端部分』可以方便地使用地址位置、摄像头甚至支付等 Native 功能。
实际上，JSBridge 就像其名称中的『Bridge』的意义一样，是 Native 和非 Native 之间的桥梁，它的核心是 构建 Native 和非 Native 间消息通信的通道，而且是 双向通信的通道。

实现JSBridge的方式

注入API

注入 API 方式的主要原理是，通过 WebView 提供的接口，向 JavaScript 的 Context（window）中注入对象或者方法，让 JavaScript 调用时，直接执行相应的 Native 代码逻辑，达到 JavaScript 调用 Native 的目的。

拦截 URL SCHEME

拦截 URL SCHEME 的主要流程是：Web 端通过某种方式（例如 iframe.src）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL SCHEME（包括所带的参数）进行相关操作。
在时间过程中，这种方式有一定的缺陷：

• 使用 iframe.src 发送 URL SCHEME 会有 url 长度的隐患。
• 创建请求，需要一定的耗时，比注入 API 的方式调用同样的功能，耗时会较长。