【原创】JSBridge前传：Hybrid

• 目录：

• • file 和 schema协议

  • webview

  • hybrid技术：如何利用file、schema协议和webview控件来实现 ？

  • hybrid 技术的起源

  • hybrid技术是如何实现的？

  • 总结

  • 参考链接

在介绍JSBridge之前，先简单介绍下hybrid。

在前端移动端开发，主要分为三种类型：

• 原生APP开发(以Android 和 iOS为主导)；

• HTML5 web app 开发；

• 原生 APP 和 HTML5 混合开发，即 hybrid 技术；

hybrid 技术的起源

首先，我们先来对比下 web app 和 原生app：

image.png

结合他两的优缺点，Hybrid(混合) 应用诞生了。简单来说，Hybrid 应用就是 web 应用套了原生应用的外壳。Hybrid 技术：

• 可以兼容多平台，可以调用 手机系统提供的功能，可以在app store中下载；

• 它的性能、用户体验不如原生 app但高于web app；

• 它的上线时间取决于其中的功能是由web 还是由native来实现；

• hybrid技术需要懂得原生APP开发、前端开发、后台开发才能进行完成，因此开发成本高、维护成本也高。

hybrid技术是如何实现的？

hybrid技术的实现依赖于以下两点：

• file 和 schema协议；

• webview；下面分别介绍下它们。

file 和 schema协议

app中经常用到的有这3个协议：

• file协议：用于打开本地文件，优点是速度快；

• https协议：http 和 ssl/tls协议，这个协议需要发送网络请求，自然相对file协议就慢很多；

• schema协议：用于客户端和前端通讯的协议；

• 微信部分schema协议列举如下：

• • weixin://dl/scan  扫一扫

  • weixin://dl/moments  朋友圈

webview

webview 是手机系统中，一个基于webkit内核，拥有渲染引擎和JS引擎，用于展示html页面的浏览器控件。它和浏览器展示页面的原理是相同的，可以把它当成一个阉割版的浏览器。简单来说就是一个用于展示页面的容器，举个例子：

image.png

红框部分就是展示页面的webview 控件/容器，而红框之外则是native(原生app) 控制的其他控件、组件。

hybrid技术：如何利用file、schema协议和webview控件来实现 ？

webview加载页面有2种方式：

• 加载网络页面，只需传入http的URL即可；

• 加载本地页面，这里又细分两种：

• • 加载assets目录下面的html页面：这样访问本地离线文件，不用进行网络请求，可以减少用户的数据流量；

  • 加载缓存到本地的页面：主要用来做页面的离线缓存，如将html文件缓存存储到本地的文件目录下。详情见 WebView加载页面的两种方式——网络页面和本地页面：https://www.cnblogs.com/zxxiaoxia/p/6831085.html

如果webview加载的是本地页面，则一般都是通过file协议来调用，如下：

webView.loadUrl("file:///android_asset/staticHtml.html");

那么此时在webview容器中直接通过file协议调用渲染前端页面肯定比html5发送https请求再去渲染快，因为我们前面讲到file协议获取资源比https快。

webview容器通过file协议调用获取前端页面资源如下图所示：

image.png

若webview中加载的页面资源经常迭代，那如何让用户同步更新呢？

此时，我们可以用原生app的api发送网络请求从而获取服务端页面资源，那对比html5去发送请求获取资源，有何优势或不同呢？是这样的，通过原生app，我们可以在打开app的同时就把服务器的页面全部请求过来，到我们要显示页面时，页面资源已在本地，拿到后直接渲染执行js即可，这样就快很多，也就是做了预加载页面资源的处理。这里也不是每次打开app都去服务端请求资源，而是只有当服务端资源更新时才进行请求，这样就能减少资源加载的时间。

实现思路：只有当用户版本号和服务器版本号不一致时才去进行资源的请求，如下图：

image.png

那在客户端(即app)中，如何与前端页面进行交互呢，就是用到前面讲的schema协议，简单讲就是拦截带有我们约定好的schema格式的url，来做一些处理，具体后面会细讲。

总结

简单来讲，hybrid技术就是通过webview和 file、schema协议来实现页面的加载、渲染、显示，以及与native、服务端之间的通信。hybrid不是完美的，是否使用取决于你的实际应用场景和需求。

参考链接：

• hybrid技术  https://blog.csdn.net/yexudengzhidao/article/details/82811185

• WebView加载页面的两种方式——网络页面和本地页面：https://www.cnblogs.com/zxxiaoxia/p/6831085.html

• webview与手机浏览器是什么关系？https://www.zhihu.com/question/40871670

关注「前端加加」, 第一时间获取优质文章. 

往期推荐

这可能是大型复杂项目下数据流的最佳实践

你要知道的 Npm Script 都在这里

图解 React-router 带你深入理解路由本质

NPM 组件你应该知道的事

如何搭建一个完美的组件库？

npx， 你了解吗？

一文快速入门 Graphql

8个问题带你进阶 React

从0实现一个脚手架

一个栗子带你上手CSS3动画

你不知道的 useRef

面试官：你怎么优雅写 CSS？

Typescript 最佳实践

内推社群

我组建了一个氛围特别好的阿里巴巴内推社群，如果你对加入阿里巴巴感兴趣的话（后续有计划也可以），我们可以一起进行面试相关的答疑、聊聊面试的故事、并且在你准备好的时候随时帮你内推。下方加 peen 好友回复「面试」即可。

添加 peen 好友，拉你进交流划水聊天群，有看到好文章/代码都会发在群里。

如果觉得这篇文章还不错，来个【转发、收藏、在看】三连吧，让更多的人也看到~

❤️ 顺手点个在看呗 ↓