Ionic 热更新

原理图：

插件安装

1.安装Python，cordova-hcp cli 依赖此程序

下载地址：https://www.python.org/downloads/release/python-2712/
 
 
1
 
 
1

2.cordova-hcp cli安装

npm install -g cordova-hot-code-push-cli
 
 
1
 
 
1

3.添加插件，插件介绍：https://github.com/nordnet/cordova-hot-code-push

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

4.添加本地开发插件[可选]，主要是针对真机调试时，不想页面有改动就要重新打包安装至真机的情形下，可以安装此插件，在发布时，应该移除该插件。

ionic plugin add cordova-hot-code-push-local-dev-addon
 
 
1
 
 
1

5.启动cordova-hcp 本地服务，控件台输入：

cordova-hcp server
 
 
1
 
 
1

启动后，控制台看到类似以下输出：

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

 
 
1
2
3
4
5
6
7
8
 
 
1
2
3
4
5
6
7
8

同时，我们的项目的www目录下将自动生成chcp.json和chcp.manifest两个配置文件，chcp.json文件主要是插件的配置信息，chcp.manifest文件则是我们www目录下各文件的hash值参照表。

6.将app安装至真机运行，以Android为例：

ionic run android
 
 
1
 
 
1

7.在www目录下任意修改某文件后，手机上的app就能马上看到实时更新内容。

---

更新内容从服务器下载

上面的方式只适应于本地开发，但，我们实际发布后的app肯定不能以这种方式来热更新，那么，我们需要将www下的更新内容提交至相应的服务器，以便客服端下载更新。我目前采取的方式是通过hudson从svn上下载最新的代码后，将更新后代码打包发布至相应服务器。hudson的配置，此处就不详细介绍了。要实现从指定服务器上下载，需要如下操作：

1.在项目的根目录创建cordova-hcp.json文件，添加这个文件的目的，是为了今后使用cordova-hcp build 命令时，不用每次手动去修改chcp.json配置文件。内容如下：

{
  "autogenerated": true,
  "content_url": "http://192.168.5.116:8080/aa/www",
  "update": "start"   "release": "2017.01.04-14.30.44"
}
 
 
1
2
3
4
5
 
 
1
2
3
4
5

• content_url：表示你的www目录下的文件所处服务器地址
• update：更新方式，我采用的是默认方式(app启动后检查更新)
• 给你们排个坑，上面的代码必须加上 "release": "2017.01.04-14.30.44"。版本号，对比当前应用内和你服务器上的版本，如果不一样，就去加载服务器上的www文件。看的两篇文章没用加这句，把我坑惨了。

根据你项目的情况选择合适的方式，更新方式有三种：

• start ：app启动时安装更新. 默认值.
• resume ： app从后台切换过来的时候安装更新.
• now ：web内容下载完毕即安装更新.

2.修改项目的config.xml文件，添加如下内容，指定客服端需要从哪请求最新的chcp.json配置文件，这里我们指定为www目录文件提交的服务器地址

<chcp>
   <config-file url="http://192.168.5.116:8080/aa/www/chcp.json"/>
 </chcp>
 
 
1
2
3
 
 
1
2
3

3.重新编译并将app安装至手机

cordova-hcp build
 
 
1
 
 
1

ionic run android
 
 
1
 
 
1

4.修改www目录下任意文件并重新编译，然后将www目录下的内容提交至服务器，最后，手机上app退出后，重新打开将实时更新

cordova-hcp build
 
 
1
 
 
1

记住，有修改文件要重新编译，以更新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://192.168.5.116:8080/aa/www/chcp.json"/>
  </chcp>
 
 
1
2
3
4
 
 
1
2
3
4

2.修改cordova-hcp.json文件，增加min_native_interface属性，cordova-hcp build 
后，chcp.json将会增加min_native_interface属性。

{
  "autogenerated": true,
  "content_url": "http://192.168.5.116:8080/aa/www",
  "update": "start"
  "min_native_interface": 3
  "release": "2017.01.04-14.30.44"
}
 
 
1
2
3
4
5
6
 
 
1
2
3
4
5
6

此属性将与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();