当前位置：网站首页>一文深入了解 Hybrid 的实现原理

一文深入了解 Hybrid 的实现原理

2022-08-09 16:38:00 【油墨香^_^】

- 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都去服务端请求资源，而是只有当服务端资源更新时才进行请求，这样就能减少资源加载的时间。

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