目录:
file 和 schema协议
webview
hybrid技术:如何利用file、schema协议和webview控件来实现 ?
hybrid 技术的起源
hybrid技术是如何实现的?
总结
参考链接
在介绍JSBridge之前,先简单介绍下hybrid。
在前端移动端开发,主要分为三种类型:
原生APP开发(以Android 和 iOS为主导);
HTML5 web app 开发;
原生 APP 和 HTML5 混合开发,即 hybrid 技术;
hybrid 技术的起源
首先,我们先来对比下 web app 和 原生app:
![](https://i-blog.csdnimg.cn/blog_migrate/2b85538c72cdc37315617bee97f49b48.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页面的浏览器控件。它和浏览器展示页面的原理是相同的,可以把它当成一个阉割版的浏览器。简单来说就是一个用于展示页面的容器,举个例子:
![](https://i-blog.csdnimg.cn/blog_migrate/71a25935f349bc4f4c6612cda3201d41.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协议调用获取前端页面资源如下图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/23e002571e64ca4b91f3c44a074ed258.png)
若webview中加载的页面资源经常迭代,那如何让用户同步更新呢?
此时,我们可以用原生app的api发送网络请求从而获取服务端页面资源,那对比html5去发送请求获取资源,有何优势或不同呢?是这样的,通过原生app,我们可以在打开app的同时就把服务器的页面全部请求过来,到我们要显示页面时,页面资源已在本地,拿到后直接渲染执行js即可,这样就快很多,也就是做了预加载页面资源的处理。这里也不是每次打开app都去服务端请求资源,而是只有当服务端资源更新时才进行请求,这样就能减少资源加载的时间。
实现思路:只有当用户版本号和服务器版本号不一致时才去进行资源的请求,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/854f3a04ebac736f4f35842cd5d64eb3.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
关注「前端加加」, 第一时间获取优质文章.
往期推荐
内推社群
我组建了一个氛围特别好的阿里巴巴内推社群,如果你对加入阿里巴巴感兴趣的话(后续有计划也可以),我们可以一起进行面试相关的答疑、聊聊面试的故事、并且在你准备好的时候随时帮你内推。下方加 peen 好友回复「面试」即可。
添加 peen 好友,拉你进交流划水聊天群,有看到好文章/代码都会发在群里。
如果觉得这篇文章还不错,来个【转发、收藏、在看】三连吧,让更多的人也看到~
❤️ 顺手点个在看呗 ↓