前言
- 之前已经在这里介绍了一款热更新插件.本文将介绍另一款热更新插件: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
<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 serve或ionic build使代码编译到www目录下.
你的生产环境可能是压缩的,需要ionic build --prod
-
使用
cordova-hcp build重新生成文件的hash.这一步很容易被忽略
-
拷贝www目录到tomcat服务器上
-
重启app.稍等几秒,页面会立即刷新(因为我们的更新类型是
now)
-
热更新演示：有人留言说第一次热更新成功后，再次重启就没有更新内容了。我进行了回归测试，发现没有问题，演示效果如下gif图
