cordova热更新插件cordova-hot-code-push的使用方法

准备工作：
安装cordova hot code push客户端工具：
npm install -g cordova-hot-code-push-cli


本地热更新开发(该方法搬自官方github文档教程)：
1、创建一个新的测试demo工程：
cordova create MyCordovaApp-hotcodepush com.ambzer.cordova
cd ./MyCordovaApp-hotcodepush
cordova platform add android
cordova platform add ios


2、添加热更新插件
cordova plugin add cordova-hot-code-push-plugin
（可以通过该方式添加，但是安装的插件不稳定可能有bug：cordova plugin add https://github.com/nordnet/cordova-hot-code-push.git）


3、添加本地调试插件(当不使用本地调试，更新的代码放在服务器上时，建议去掉该插件)
cordova plugin add cordova-hot-code-push-local-dev-addon


4、上述步骤执行完之后，在项目的根目录下，执行（不要关闭这个终端，另外打开一个终端进行以后的操作）
cordova-hcp server


之后可以看见类似这样的log：
wsjs-MacBook-Pro:MyCordovaApp-hotcodepush wsj$ cordova-hcp server
Running server
Checking:  /Users/wsj/Desktop/cordova/MyCordovaApp-hotcodepush/www
local_url http://localhost:31284
Build 2017.11.09-13.58.36 created in /Users/wsj/Desktop/cordova/MyCordovaApp-hotcodepush/www
cordova-hcp local server available at: http://localhost:31284
cordova-hcp public server available at: https://4b007e7f.ngrok.io


5、启动热更新服务之后，我们要启动模拟器或者真机测试。
首先说一下在ios上遇到的一点问题：
添加完插件之后使用cordova build ios报错，然后我们使用xcode打开ios工程，build一下找到报错的位置，提示将Generator换成Iterator，按照提示修改完之后再编译就不会报错了，使用cordova build ios也是不会报错了。（这了改完之后以后就不需要改了，cordova build ios不会影响这个修改）


我们启动模拟器或者真机，（测试终端：真机Android4.4.4，genymotion模拟器Android7.0，ios模拟器11.0）
Android启动方式，可以使用cordova run Android或者在Android studio中打开Android工程，然后启动应用，ios的话我是在xcode中启动的。


6、修改www中的文件，比如修改主页中的文字，修改保存之后，在启动服务的终端中应该可以看见log
File changed:  /Users/wsj/Desktop/cordova/MyCordovaApp-hotcodepush/www/index.html
Build 2017.11.09-14.14.49 created in /Users/wsj/Desktop/cordova/MyCordovaApp-hotcodepush/www
Should trigger reload for build: 2017.11.09-14.14.49
这时候，模拟器或者真机中应该过一会就回看到变化，大概10s中之内，如果没有看到变化，请在真机或者模拟器中退出重新打开应用。

搭建远程服务器热更新环境：

测试终端：Android4.4.4真机、Android7.0模拟器、Android7.0真机（三星S8），IOS11.0模拟器，IOS11.1iphone6真机，IOS10.3.3iphone6s真机

前提：
我在服务器中使用nginx搭建了一个静态资源服务器，同学们需要有一个静态资源服务器，至少需要会用nginx或者Apache，通过一个url可以获取我们放在服务器上面的文件。
搭建步骤：
1、创建一个cordova工程，添加平台（或者使用已有的工程项目）
2、添加热更新插件：（不需要添加本地热更新调试插件：cordova-hot-code-push-local-dev-addon）
cordova plugin add cordova-hot-code-push-plugin
3、在项目根目录下的config.xml文件中添加一下内容：
<chcp>
<auto-download enabled="false" />
        <auto-install enabled="false" />
        <config-file url="http://x.x.x.x:8888/share/AppSourceCode/hotcodepush/chcp.json"/>
</chcp>


以下属于解释说明：


第一个auto-download表示是否自动下载更新，第二个表示是否自动安装更新，
第三个：是一个更新的配置文件，操作过“本地热更新开发”的同学可以看一下，当执行cordova-hcp server命令之后，会在项目根目录的www文件夹下生成chcp.json和chcp.manifest两个文件，app在检查更新（有自动检查更新和手动检查更新，我这里使用的是手动检查更新，能够自己控制会更好一点）的时候，会将app中www文件夹下的chcp.json与服务器中content_url访问的目录下的chcp.json比较，好像是当两个release时间不相等（不会比较大小）的时候，就会更新。
看一下chcp.json文件中的内容：
{
  "autogenerated": true,
  "release": "2017.11.09-14.14.49",
  "content_url": "https://4b007e7f.ngrok.io",
  "update": "now"
}
第一个表示自动编译，相等于文件修改之后，自动执行cordova-hcp build命令。编译完之后，会在chcp.manifest文件中生成www文件夹中每个文件的hash码，看一下chcp.minifest文件中的部分内容：
{
    "file": ".idea/inspectionProfiles/Project_Default.xml",
    "hash": "ca39aae2553e263f6545d7364a7aa0d4"
},
热更新插件会比对app本地和服务器上的同一个文件的hash码判断是否需要更新。
操作过“本地热更新开发”的同学可以看一下，原来那个工程根目录的config.xml中没有什么新内容，但是在平台的config.xml中多了一些内容，
Android的在：
……/MyCordovaApp-hotcodepush/platforms/android/res/xml/config.xml
IOS的在：
……/MyCordovaApp-hotcodepush/platforms/ios/HelloCordova/config.xml
增加的内容是：
<chcp>
    <local-development enabled="true"/>
    <config-file url="https://4b007e7f.ngrok.io/chcp.json"/>
</chcp>

这个url就是本地的url，在“本地热更新开发”的步骤4的log中可以看到，这时候服务器地址就是本地 http://localhost:31284

在服务启动的情况下，在浏览器中输入：https://4b007e7f.ngrok.io/index.html会直接打开app应用主页

4、在项目的根目录下添加一个文件，文件名为cordova-hcp.json（该文件与config.xml文件目录位置同级），文件内容：
{
  "update": "start",
  "content_url": "http://x.x.x.x:8888/share/AppSourceCode/hotcodepush"
}
以后每次cordova-hcp build的时候，都会以cordova-hcp.json文件为模板，比如现在添加完这个文件之后，执行cordova-hcp build，chcp.json的文件的内容就回变成：
{
  "update": "start",
  "content_url": "http://x.x.x.x:8888/share/AppSourceCode/hotcodepush",
  "release": "2017.11.09-15.01.03"
}
5、app中调用代码手动更新：（我这里用了angularJs和OnsenUI，主要是chcp.fetchUpdate，chcp.installUpdate两个方法，这里应该写一个按钮，点击之后调用以下代码）
chcp.fetchUpdate(function (error, data) {
            if (!error) {
                ons.notification.confirm({
                    message: '更新已经下载完毕，确认安装更新?',
                    title: '更新提示',
                    buttonLabels: ['取消', '确定'],
                    primaryButtonIndex: 1,
                    cancelable: true,
                    callback: function (index) {
                        switch (index) {
                            case 1:
                                chcp.installUpdate(function (error) {
                                    if (!error) {
                                        showAlert('安装更新失败...', JSON.stringify(error));
                                    } else {
                                        showAlert('安装更新完成...');
                                    }
                                });
                                break;
                            default:
                                console.log("取消安装更新...");
                                break;
                        }
                    }
                });
            } else {
                showAlert('下载更新失败...', JSON.stringify(error));
            }
        });


6、配置完成，现在打包安装到模拟器或者真机中（最好先把原来的卸载掉，原因在下面）。
7、修改www中的文件（相当于发版更新），然后执行cordova-hcp build，将www文件夹上传到服务器中url指定的位置。
8、上传完成之后，点击按钮检查更新（检查更新失败的原因有很多，有一个是因为本地已经是最新的版本，这个需要后续完善判断条件），获取更新之后会安装更新，我这里安装更新比获取更新要久一点，获取更新大概3s，安装更新大概要5s，建议写一个模态遮罩显示旋转进度条，安装完之后会自动退到主页，这时候就可以看到更新了，不需要重新打开应用。


其他说明：
1、首先判断www上传到服务器url指定位置是否正确，在浏览器能够访问
http://x.x.x.x:8888/share/AppSourceCode/hotcodepush/chcp.json
如果能得到build之后.json的内容，则表示www文件夹放置正确。
2、使用了该插件之后，我这里出现了一个问题就是，再次cordova run、或者通过Android studio、xcode启动或者打包之后安装到模拟器或者手机都不生效，都不是最新打包的内容。这时候发生这种情况的话，每次更新外壳（热更新无法更新外壳，比如添加插件之后需要更新app外壳）都需要在项目跟目录下的config.xml中增加应用的版本号：
<widget id="com.ambzer.cordova" version="1.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

widge中的version就是app应用的版本号。

3、2017-11-23前几天，在给项目的正式环境app工程中添加热更新插件，奇怪的是一直闪退，研究了几天都咩有研究出来，明明在开发环境和测试环境都是测试成功可以使用的，到了正式环境就是不行，然后我自己开了一个新的工程测试热更新插件，还是闪退，我简直是一脸懵逼，不知道错在哪里。最后在无聊的时候翻到这么一篇网页：https://github.com/nordnet/cordova-hot-code-push/issues/240

里面描述道：导致闪退的原因很有可能是配置文件出错了，

1）在config.xml中检查是否配置了config-file的url地址；

2）在www文件夹中是否存在chcp.json和chcp.manifest两个文件；

3）检查在chcp.json文件中，content_url和release是否配置正确，服务器和本地都要检查一遍。

我仔细对照了前面两点，亲自操作一遍，确定在浏览器里可以直接通过url的方式获取到chcp.json文件的内容，当然chcp.minifest文件也是，也可以获取到项目的index.html文件，最后当我看到“服务器和本地都要检查一遍”时，我才想到，好像打包的时候，是没有chcp.json和chcp.manifest文件的，所以我这里解决问题的办法就是，在打包之前，一定要运行一遍cordova-hcp build命令生成配置文件，我发现仅仅使用cordova build ios一样会有热更新的log显示，但是没有生成chcp.json和shcp.manifest文件。