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.manifest和chcp.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

浏览器一定要能访问到哦

• 打包app,把app安装在真机上

cordova platform rm android
cordova platform add android
cordova run android

发布热更新

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

  
  
  
  

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

  

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

  

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

  

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