ionic2/3实战-热更新(cordova-hot-code-push)

前言

  • 之前已经在这里介绍了一款热更新插件.本文将介绍另一款热更新插件:cordova-hot-code-push
  • 两款热更新插件最大的区别在于,本文介绍的插件是把更新的资源文件(html,css,js)放在自己的服务器上,需要手动维护热更新资源.之前的插件放在别人的服务器上,只用命令就完成了发布.

准备

  • 启动自己的服务器,我用tomcat演示.关于tomcat的基本使用可以看这里
    我本地服务地址是http://88.128.18.144:8080/

    启动tomcat服务器

  • 全局安装cli
    cnpm i -g cordova-hot-code-push-cli

  • 启动ionic项目ionic serve,主要是把src下的代码生成最新的www代码 ,也可以使用ionic build

  • 使用命令cordova-hcp init生成热更新配置,最终会在项目根目录下生成一个cordova-hcp.json文件


{
  "name": "ionic2test",
  "ios_identifier": "com.kit.ionic2test",
  "android_identifier": "com.kit.ionic2test",
  "update": "now",
  "content_url": "http://88.128.18.144:8080/www/"
}

其中content_url为更新内容的服务器地址;update是更新类型,有三种,分别为now,start,resume.

app每次启动去服务器判断有无更新,有更新则下载更新内容
now:下载完,立即刷新页面应用更新.(方便测试)
start:下载完,app下次启动的时候才应用更新的内容
resume:下载完,当app从后台切换到前台时应用更新(按手机home键进入后台)

  • 使用命令cordova-hcp build,会在www目录下生成两个文件,chcp.manifestchcp.json
    其中chcp.manifest描述了www目录中每个文件的hash值,热更新就是通过对比文件的hash值是否相等,来确定是否更新该文件

  • 把整个www目录拷贝tomcat服务器上

你当然也可以修改www目录名.修改后对应的访问url做相应修改.我这里不修改只是为了方便,建议你先不要修改,等你集成成功后在修改.

  • 此时访问http://88.128.18.144:8080/www/会看到我们的app界面

  • 给项目安装热更新插件
    ionic cordova plugin add cordova-hot-code-push-plugin
    官网还推荐安装插件cordova plugin add cordova-hot-code-push-local-dev-addon没必要

  • 在项目根目录下的config.xml文件配置config-file url

<chcp>
    <config-file url="http://88.128.18.144:8080/www/chcp.json" />
</chcp>

浏览器一定要能访问到哦
  • 打包app,把app安装在真机上
cordova platform rm android
cordova platform add android
cordova run android

发布热更新

  • 修改页面代码
    注意:我这里修改的是src下的html,需要使用ionic serveionic build使代码编译到www目录下.
    你的生产环境可能是压缩的,需要ionic build --prod


  • 使用cordova-hcp build重新生成文件的hash.这一步很容易被忽略

  • 拷贝www目录到tomcat服务器上

  • 重启app.稍等几秒,页面会立即刷新(因为我们的更新类型是now)

  • 热更新演示:有人留言说第一次热更新成功后,再次重启就没有更新内容了。我进行了回归测试,发现没有问题,演示效果如下gif图

推荐阅读更多精彩内容