ionic2/3热更新(cordova-hot-code-pus

描述

• 此文摘抄自小军,此次记录主要是为了自己更深刻的理解和记忆。

准备

• 启动服务器tomcat，服务器tomcat的访问地址http://服务器ip:端口/

• 全局安装cli

cnpm i -g cordova-hot-code-push-cli

图片.png

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

  
  图片.png

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

  
  图片.png

图片.png

{
  "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值是否相等,来确定是否更新该文件

  
  图片.png

图片.png 图片.png

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

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

图片.png

• 此时访问http://服务器IP:端口/www/会看到我们的app界面

  
  图片.png

• 给项目安装热更新插件

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

图片.png

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

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

图片.png
图片.png

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

cordova platform rm android
cordova platform add android
cordova run android

图片.png

发布热更新

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

图片.png
图片.png

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

图片.png

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

  
  图片.png

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

4108891-1601e167e792a8ff.gif