html5app热更新,HybridApp跨平台热更新方案实践附带源码

前言

移动开发的跨平台与快速发布一直是开发者的追求&＃xff0c;也是技术的一个发展趋势&＃xff0c;现在各大厂开始有了自己的大前端团队&＃xff0c;所以我们也开始了自己的探索&＃xff0c;目前来说主要有两种思路&＃xff1a;

Hybrid App 代表:Cordova

通过Webview加载Web页面&＃xff0c;在Native和Web页面之间建立双向通信

H5代码Native化 代表:ReactNative,Weex等

使用各平台Api&＃xff0c;把H5代码编译成二进制代码直接运行

其实关于这两种思路对比&＃xff0c;网上有很多大牛分析的很全面了&＃xff0c;总结来说各有利弊很难完美&＃xff0c;本篇文章我们主要讲一下Hybrid App实践&＃xff0c;采用前后端分离以及单页应用技术开发Web页面&＃xff0c;使用WebView加载Web页面&＃xff0c;并通过JS通信提供一些Native层的支持&＃xff0c;通过接口获取差异化页面资源文件&＃xff0c;在本地整合更新&＃xff0c;还可以达到热更新的需求。在我看来此方案更适用于需要快速发布、多端兼容、对性能要求稍低的业务&＃xff0c;正好符合我们的需求。

源码

这里我整理了Android端会用到代码&＃xff0c;包含JS通信&＃xff0c;文件处理工具类&＃xff0c;闪屏辅助类和WebView的封装。

Github地址&＃xff1a;https://github.com/free46000/HybridFoundation&＃xff0c;请大家多多关注&＃xff0c;由于源码并没有完善&＃xff0c;所以暂时没有发布到Maven仓库

方案详解

既然确定了方向&＃xff0c;那么就应该确定具体的方案了&＃xff0c;通过自己的经验和网上资料整理&＃xff0c;画了时序图&＃xff1a;

image

按照图上的时序&＃xff0c;接下来说一下每一步中的实践&＃xff0c;以及碰到的坑。下面讲解

初次安装

打包

在打包程序时这一步主要是把Html相关资源文件压缩后放在assets文件夹下即可

安装

用户安装完应用程序打开后&＃xff0c;检测是否为初次使用&＃xff0c;如果是则通过程序直接解压包内资源到手机存储上即可&＃xff0c;不局限于SD卡。

展示页面

闪屏页展示

由于上面的解压资源&＃xff0c;还有Webview初始化、JS的加载执行、html的渲染都是耗时操作&＃xff0c;并且都是发生在Html展示之前&＃xff0c;所以我们选择把闪屏页用Native原生代码来编写&＃xff0c;采用覆盖WebView所在页面的方案&＃xff0c;这样在闪屏页隐藏的时候&＃xff0c;用户就可以看到业务界面&＃xff0c;提升用户体验。

注&＃xff1a;另外提供Android两种闪屏优化的小技巧&＃xff0c;使用透明主题或者设置主题背景图片

加载本地Html页面

直接使用WebView#loadUrl()加载本地资源文件即可。由于WebView加载不同页面会出现闪屏的问题&＃xff0c;所以我们采用Vue &＃43; Vue Router构建单页应用。

这里Vue Router会有一个小坑&＃xff0c;提醒大家注意一下&＃xff1a;Vue Router默认采用hash模式&＃xff0c;会有一个丑陋的#符号&＃xff0c;作为一个有追求的程序员怎么能允许这种很丑的hash&＃xff0c;一种更优雅的方式使用HTML5 History模式&＃xff0c;但是不幸的是&＃xff0c;加载本地资源文件的方式并不能正常解析HTML5 History模式的url&＃xff0c;所以只能采用hash模式。

数据请求

为了节省用户的流量和时间&＃xff0c;需要把Html资源文件存储在本地&＃xff0c;这样数据的请求必须在客户端完成。有两种方案供选择&＃xff1a;

一是Native层拦截并请求数据再返回给Html层去展示&＃xff0c;这样会增加工作量&＃xff0c;也不利于职责的分离&＃xff0c;所以放弃。

二是直接使用JS请求数据&＃xff0c;这样会出现跨域访问的问题&＃xff0c;相比较来说还是这个比较容易解决的&＃xff0c;采用CORS即可

Native调用JS

Native层调用JS比较简单&＃xff0c;执行一段JS代码即可&＃xff0c;如&＃xff1a;Javascript:callJS()

JS调用Native

JS层调用Native,在Android上来说主要分为三种&＃xff1a;

一&＃xff1a;通过WebView#addJavascriptInterface()进行映射&＃xff0c;使用起来简单&＃xff0c;但是有安全风险&＃xff0c;弃用

二&＃xff1a;自定义协议然后由Native层拦截并解析请求&＃xff0c;使用起来复杂&＃xff0c;容易和业务耦合&＃xff0c;也不是最优选&＃xff0c;弃用

三&＃xff1a;拦截JS#prompt()方法并解析&＃xff0c;使用起来复杂&＃xff0c;但是比第一种更安全&＃xff0c;比第二种灵活&＃xff0c;所以使用此方案

资源文件获取

资源文件采取差异化更新方案&＃xff0c;本地存储一个标识&＃xff0c;可以为版本号或者更新时间&＃xff0c;这个可以和后端同学一起商量确定。

资源文件下载还有推送之类的由于Html的局限性&＃xff0c;所以还是直接由Native层做比较合适&＃xff0c;下面简单讲解下应用中的两种更新方式&＃xff1a;

服务端推送下发

可以通过集成第三方的推送服务&＃xff0c;在客户端收到更新推送后主动去请求下载差异化文件

主动请求

可以在选择合适的时机&＃xff0c;如在应用启动时去请求差异化文件

资源文件更新

根据差异化清单对资源文件进行整合&＃xff0c;存放在临时目录中&＃xff0c;然后在第二次打开应用时更换&＃xff0c;并展示更新后的界面&＃xff0c;达到热更新的效果。

总结

本文只是概括的讲了结构的内容&＃xff0c;可能会遗漏一些要点&＃xff0c;如果大家有什么问题欢迎留言或者去GitHub上提交issue

作者开源了一个优雅的实现多类型的RecyclerView类库 支持DataBinding Form表单录入&＃xff0c;跨多个RecyclerView拖动 Github地址&＃xff1a;https://github.com/free46000/MultiItem