积跬步,至千里
精前端,通全栈

Ionic App升级流程实践(全量更新&热更新)

App升级方式会受到不同的业务情景和产品定位影响,比如互联网的产品,稳定迭代,体验较好的方式都是走 商城下载安装 的方式,比如应用宝、Google Play等。

小公司或者一些业务变更较快的创业公司,多数为传统行业的公司,较多可能采用下载安装包的方式,不走商城,因为商城需要审核,相对比较慢。也有可能是两种方式都结合,稳定迭代的方式走商城,紧急的方式走下载安装包升级或者热更新。

热更新会更方便,只会更新HTML5部分代码,相对于ionic这类APP来说,热更新可能是最好的选择,但是你不能只支持热更新这种升级方式,因为总会有兼容性意外,或者失败的情况,或者是APP插件升级,原生组件升级的情况,这时候就需要全量升级了,因为这部分代码不在HTML5中。

以下是个人在公司里对升级改造的设计流程

升级与热更新解决方案

以下介绍说的以安卓为例,IOS如果是热更新其实也是一样的过程

App管理平台

需要一个APP管理平台去维护APP升级版本,控制APP版本、升级时间、升级内容说明、上传apk安装包、是否为内测版本,内测用户指定控制等。这部分就简单的增删改查维护工作

Ionic App 实现

热更新

下边代码会包含一些个人脚本,这里先贴一下。

package.json脚本命令

以上 node scripts/changeConfig.js dev 的脚本是动态修改对应环境的脚本,为了方便Jenkins构建时,不同环境,自动替换对应环境配置。此处不做介绍

安装热更新依赖插件:

热更新修改参考相关文章

热更新升级App操作步骤:

  • npm run build:www
  • npm run build:hcp
  • 复制 www 文件夹替换 content_url 指定的目录内容 (Jenkins构建操作)

Jenkins自动构建脚本

gitlab配合Jenkins,构建不同环境下热更新代码进行测试。(全量安装包apk也是走Jenkins构建,此部分这里不做说明)

更新代码 HotCodeUpdate.ts

统一在一个service里实现apk全量升级和热更新逻辑,然后通过依赖注入的方式调用。appUpdateController.getVersion 接口即为上边所说的 App版本管理 中获取最新的APP版本信息,更加是否存在新版本来进行下一个逻辑处理。整个代码逻辑是根据流程图实现的。

最后在 app.component.ts 中进行 resume 事件监听,我这里热更新触发时机也是 resume

另外,在我的——关于我们——检查更新下可以也可以调用checkApkUpdates()方法。

总结

更新升级如果不走商城,热更新和全量升级难免遇到很多坑,不管是系统版本的兼容性,还是其他兼容性问题,都是试坑解决的过程。

赞(2) 打赏
未经允许不得转载:前端学堂 » Ionic App升级流程实践(全量更新&热更新)

讨论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    可惜 cordova-hot-code-push-plugin 已不再维护

    camelwoo3周前 (11-24)回复
    • 对原生android熟悉的人是可以维护的,有bug还是能改。

      giscafer3周前 (11-30)回复

前端实战学习群 学以致用,进步更快

demo演示立即加入

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏