Ionic 热更新

原理

插件安装

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 serverChecking:  /Cordova/TestProject/wwwlocal_url http://localhost:31284Warning: .chcpignore does not exist.Build 2015.09.02-10.17.48 created in /Cordova/TestProject/wwwcordova-hcp local server available at: http://localhost:31284cordova-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();