原理
插件安装
1.安装python,cordova-hcp cli 依赖此程序
下载地址:https://www.python.org/downloads/release/python-2712/
2.cordova-hcp cli安装
npm install -g cordova-hot-code-push-cli
3.添加插件,插件介绍:https://github.com/nordnet/cordova-hot-code-push
ionic plugin add cordova-hot-code-push-plugin
4.添加本地开发插件[可选],主要是针对真机调试时,不想页面有改动就要重新打包安装至真机的情形下,可以安装此插件,在发布时,应该移除该插件。
ionic plugin add cordova-hot-code-push-local-dev-addon
5.启动cordova-hcp 本地服务,控件台输入:
cordova-hcp server
启动后,控制台看到类似以下输出:
Running server
Checking: /Cordova/TestProject/www
local_url http://localhost:31284
Warning: .chcpignore does not exist.
Build 2015.09.02-10.17.48 created in /Cordova/TestProject/www
cordova-hcp local server available at: http://localhost:31284
cordova-hcp public server available at: https://5027caf9.ngrok.com
同时,我们的项目的www目录下将自动生成chcp.json和chcp.manifest两个配置文件,chcp.json文件主要是插件的配置信息,chcp.manifest文件则是我们www目录下各文件的hash值参照表。
6.将app安装至真机运行,以android为例:
ionic run android
7.在www目录下任意修改某文件后,手机上的app就能马上看到实时更新内容。
更新内容从服务器下载
上面的方式只适应于本地开发,但,我们实际发布后的app肯定不能以这种方式来热更新,那么,我们需要将www下的更新内容提交至相应的服务器,以便客服端下载更新。我目前采取的方式是通过hudson从svn上下载最新的代码后,将更新后代码打包发布至相应服务器。hudson的配置,此处就不详细介绍了。要实现从指定服务器上下载,需要如下操作:
1.在项目的根目录创建cordova-hcp.json文件,添加这个文件的目的,是为了今后使用cordova-hcp build 命令时,不用每次手动去修改chcp.json配置文件。内容如下:
{
"autogenerated": true,
"content_url": "http://hotcode.example.com",
"update": "start"
}
- content_url:表示你的www目录下的文件所处服务器地址
- update:更新方式,我采用的是默认方式(app启动后检查更新)
根据你项目的情况选择合适的方式,更新方式有三种:
- start :app启动时安装更新. 默认值.
- resume : app从后台切换过来的时候安装更新.
- now :web内容下载完毕即安装更新.
2.修改项目的config.xml文件,添加如下内容,指定客服端需要从哪请求最新的chcp.json配置文件,这里我们指定为www目录文件提交的服务器地址
<chcp>
<config-file url="http://hotcode.example.com/chcp.json"/>
</chcp>
3.重新编译并将app安装至手机
cordova-hcp build
ionic run android
4.修改www目录下任意文件并重新编译,然后将www目录下的内容提交至服务器,最后,手机上app退出后,重新打开将实时更新
cordova-hcp build
记住,有修改文件要重新编译,以更新chcp.json和chcp.manifest两个配置文件,这两个文件有更新后,客服端才能判断是否需要从服务器上下载新的文件。
app 外壳更新
通过上面的方式,我们已经能够实现www目录下的文件有变动时,直接从服务器上下载最新的代码,但这种方式只限于我们没有对app外壳进行更新的情况下使用,当我们对外壳进行了更新时,我们应该提示用户升级app,比如我们增加了某个插件时。要实现app外壳更新,我们需要做如下操作:
1.修改我们项目的config.xml,在原有配置上增加native-interface属性,告诉cordova-hot-code-push插件,我们的app内核版本号,修改后的配置如下:
<chcp>
<native-interface version="3"/>
<config-file url="http://hotcode.example.com/chcp.json"/>
</chcp>
2.修改cordova-hcp.json文件,增加min_native_interface属性,cordova-hcp build
后,chcp.json将会增加min_native_interface属性。
{
"autogenerated": true,
"content_url": "http://hotcode.example.com",
"update": "start"
"min_native_interface": 3
}
此属性将与config.xml中的native-interface进行匹配,如果发现两者不同时,将会触发相应的事件,比如,手机端app中config.xml的native-interface值比服务器上的chcp.json文件中的min_native_interface值小时,将会触发’chcp_updateLoadFailed’事件,同时,错误代码为:chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW
var appUpdate = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('chcp_updateLoadFailed', this.onUpdateLoadError, false);
},
onUpdateLoadError: function(eventData) {
var error = eventData.detail.error;
// 当检测到外壳有更新
if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
// 针对不同平台进行相应更新操作
}
}
};
appUpdate.initialize();