ionic应用热更新(亲测手写)

原理

当应用发布应用市场后更新代码超级麻烦,因此绕开应用市场在应用内进行更新则方便多了,其主要原理如下:

  • 生成发布代码到www目录
  • 生成每个文件的hash值到manifest文件,更新最新时间戳
  • 应用启动/恢复/下载完成时,下载manifest文件,并对比时间戳的差异,如果时间戳不同,则下载manifest文件来对比和更新发生变化的文件。

插件

安装cli:

npm install -g cordova-hot-code-push-cli

安装插件:

cordova plugin add cordova-hot-code-push-plugin

如果多搜几篇文档,一定还有人推荐你安装Cordova Hot Code Push Local Development Add-on,这个是用于本地开发用的,千万别安装,我就因为多安装了这个插件,半天都没调试成功!!还有很多人到处抄抄,东一下西一下的,文档还得看英文的!

更新代码

当有文件更新时,需要同步更新到www目录,可以通过

ionic serve

命令来监听,也可以手动执行

npm run build --prod

来发布文件到www目录。

配置文件

配置文件名字叫chcp.json,主要是记录发布时间戳和更新时机。通过

cordova-hcp init

会在项目根目录下生成chcp.json,生成以后也可以来手动修改这个文件,这个文件是实际www/chcp.json的模版文件,主要差异是release成员,这个字段是当前最新时间,app打包时也含有这个文件,插件会比较这二者的release是否一致。

cordova-hcp build

通过这条命令,可以会在www目录下生成chcp.json和chcp.manifest,manifest文件记录了www下各文件的hash值,当chcp.json与客户端时间戳不一致时,客户端会进一步获取chcp.manifest来对比哪些文件发生了变化。这里chcp.json中的content_url需配置www目录下的文件发布到服务器上的文件夹地址.

此外,检查config.xml下是否有chcp标签,如果没有,则需要手动添加一个(如果有,也需要手动配置其config-file位置),config-file的url指向服务器上的配置文件的路径。

发布服务器

通过ftp/scp等将www目录下所有文件发布至服务器,并确认服务器已给响应文件夹配置文件服务,在浏览器下能正常访问到这些文件,并确认config.xml和chcp.json中对应的配置地址和项目地址是否正确。

安装app到手机

通过数据线连接手机(打开开发者选项),执行

ionic cordova run android

将本地app发布到手机,安装完成后会自动打开。

验证更新

修改app内容,查看chcp.json中update的配置。如果是start表示在app启动时更新,resume则app进入后台后恢复时更新,now是指下载完成即更新。触发对应的操作,这时候应该会观察到app重新启动,并完成了热更新~!

手动模式

以上的方法是完全依赖组件的,如果想更进一步DIY则需要手动下载和更新。

更改config.xml

这时需要更改config.xml下的chcp标签,关闭自动下载和安装:

<chcp>
   <auto-download enabled="false" />
   <auto-install enabled="false" />
</chcp>

另外,需添加控制逻辑和代码,具体请参考附件的参考文献。

参考文档

  1. Hot deploy updates with the cordova-hot-code-push plugin
    原文作者:小胖子嘿嘿嘿
    原文地址: https://www.jianshu.com/p/ac4fb454f833
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞