当前位置:网站首页>一文深入了解 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都去服务端请求资源,而是只有当服务端资源更新时才进行请求,这样就能减少资源加载的时间。
实现思路:只有当用户版本号和服务器版本号不一致时才去进行资源的请求,如下图:
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
边栏推荐
猜你喜欢
随机推荐
试试使用 Vitest 进行组件测试,确实很香。
测试/开发程序员喜欢跳槽?跳了就能涨工资吗?
LeetCode 131.分割回文串
110+ public professional datasets summarized
学长告诉我,大厂MySQL都是通过SSH连接的
openEuler Xiong Wei: How do you view the SIG organization model in the open source community?
程序员的专属浪漫——用3D Engine 5分钟实现烟花绽放效果
kafka 通过 jdbc 从oracle抓取数据
SkiaSharp 之 WPF 自绘 投篮小游戏(案例版)
如何仿造一个websocket请求?
A40 - 基于51单片机的GSM模块优化设计
【解决】虚拟机VMware通过局域网连接机器人no route to host
3 Feature Binning Methods!
B019 - 甲醛甲烷煤气温湿度时间测试仪
硬件开发的发展前景
Apache Doris Community PMC Yang Zhengguo: How do open source projects strike a balance between their own and the community's needs?
Sigrity PowerSI Characteristic Impedance and Coupling Simulation
.NET 6学习笔记(4)——解决VS2022中Nullable警告
【燃】是时候展现真正的实力了!一文看懂2022华为开发者大赛技术亮点
What is hardware integrated development?What are the cores of hardware integrated development?