Ionic 热更新
简介
关于Cordova的热更新问题，国内的资料比较少，许多博客上都是胡乱的抄袭，准确性极低，无任何实用性，并且步骤不够完整，在此亲手测试了一下，并整理详细的步骤以供备忘和参考。
热更新的好处
通常ionic源码可包括（HTML，JavaScript，CSS文件和其他资源），
通过cordova热更新插件cordova-hot-code-push-plugin来是实现客户端的代码热更新。
避免了之前更改代码后重新打版再提交至应用商店审核的流程，实现后台动态更新代码
热更新原理图（扒来的。。。图不孬，有助理解）
内壳更新
基本的配置步骤
Python简单服务器本地搭建
首先，我们自己搭建个本地的服务器Python，测试用。在此只做开发版的热更新测试，（本地的不做，容易混，也没什么用）
Python服务器安装包云盘下载眼
下载好后，我们用命令行操作：
$ cd desktop
在桌面创建文件夹，
$ mkdir pythonServe
$ cd pythonServer
进入到所创建的的文件夹，执行：* 注意遵循大小写<9999 为端口号可自定义>
$ python -m SimpleHTTPServer 9999
效果如下即为搭建成功：
用终端查看下自己的ip, 执行命令$ ifconfig即可获取，此 ip+端口号 就是你服务器地址，如果切换网络，要更新下面的服务器地址，切记哦！
服务器到此搭建完毕告一段落...
ionic项目文件 配置：
首先，创建工程：#创建de略过...
$ cordova create bankapp com.example.bankapp bankapp
或 $ ionic start bankapp tabs -a "bankapp" -i com.example.bankapp
关键de配置
1、安装 cordova-hot-code-push-cli,执行命令：
$ npm install -g cordova-hot-code-push-cli
作用：使用该命令行生成检测配置文件，通常是在 www 目录下动态生成 chcp.json 和 chcp.manifest 生成两个文件，插件源码地址：https://github.com/nordnet/cordova-hot-code-push
2、进入项目目录
$ cd 你的项目路径。比如 我的项目在桌面上：$ cd desktop/bankapp
3、 安装热更新插件，执行命令(cordova或ionic都可以)：
$ cordova plugin add cordova-hot-code-push-plugin
*注意：网上有安装下插件，没什么用，这是个实时更新插件，用于本地的同步更新，此处我们用不到:$ ionic plugin add cordova-hot-code-push-local-dev-addon
4、创建cordova-hcp.json模板
在cordova项目根目录下创建一个 cordova-hcp.json模板文件。
cordova-hcp.json内容如下：
{
"autogenerated": true,
"name": "bankapp",
"min_native_interface": 1, //最小支持的外壳app版本
"content_url": "http://192.168.1.101:9999/www",
"ios_identifier":"https://itues.apple.com/cn/***", //打版提交App Store下载的地址
"update": "now"
}
&注意 ：content_url：是你服务器上要更新的文件地址，
执行： $ cordova-hcp build
就会利用这个模板自动在www文件夹下生成新的 chcp.json和chcp.manifest文件，而不用手动更改 www/chcp.json了。
解析下：
min_native_interface: 记录当前App的外壳版本值
chcp.manifest文件记录版本的hash值
ios_identifier:记录App在苹果商店上的位置，就是外壳地址
release：内壳时间戳版本，根据时间戳来更新的。
content_url: 是你服务器内更新的文件地址。此处建议设为www文件夹，因为我们改动代码后要把www文件进行更新，可以直接将改动后的www文件夹把服务器上旧的的www替换掉。
5、 配置config.xml文件
在config.xml文件中添加以下代码:
<chcp> <native-interface version="1" /> <config-file url="http://192.168.1.101:9999/www/chcp.json" /> </chcp>
&注意：url为你服务器中更新文件的地址/ chcp.json
&注意：内壳更新 要把cordova-hcp.json和config.xml中的 版本号设置为一样的
6、完成以上准备，开始测试 热更新(html、css或js等资源的动态更新，即内壳更新）
执行下面：
$ cordova platform add ios 生成平台
$ cordova-hcp build 生成新chcp.json和chcp.manifest文件（重新打个时间戳realease）
$ cordova build ios/android 编译包到各个平台
将www文件夹拷贝到服务器中
在Xcode 中运行工程应用
在webStore中（开发工具自选）更改一些www文件夹中的内容（如html、css、js或其它的资源）
在此，随便改下就可以
$ cordova-hcp build
再次将更改后的www的文件拷贝到服务器中，把原来旧的www文件替换即可
&在浏览器中测试下自己的服务器通否：
这是我的我的临时搭建Python地址 ：http://192.168.1.101:9999
在Xcode中再次运行应用，查看内容是否进行了更新
热更新完成后日志如下:
到此内壳更新就结束了，在这总结下可能会遇到的问题:
一、chcp.json和config.xml中的服务器的地址不要写错,chcp.json中的地址：服务器上更新文件的地址；config.xml中的地址：服务器上更新文件的地址+chcp.json
二、首次要先在服务器上打个初始版本，流程如下：
即生成平台-->模板生成chcp文件-->编译到各个平台-->上传www到服务器-->运行应用--->修改内容--> 模板重新生成chcp文件-->上传www文件覆盖旧的--->运行应用--->查看更新
三、服务器保证通的通的、、、
四、再不中看这 -坑眼-https://github.com/nordnet/cordova-hot-code-push/issues/223
外壳更新
描述
这个外壳更新有点强制化，比如你在使用应用时，突然弹出个pop,提示你有新的版本更新了，人性化点的还有个取消按钮；强制性的就确定后直接跳转到AppStore了。这在你自己怎么设置了。
像原生的版本更新就没有强制；如你打版提交审核上架了，客户端也就仅在appStore商店有个更新提醒，更不更在客户了。
外壳更新配置
上面的内壳更新整好后，这就比较简单了，因该配的已配置好，只在这改改某些属性就可以
通过min_native_interface监控app是否提示更新
所需最小的外壳app版本. 这是app的build版本号，是个整型数字, 不是应用商店中看到的形如”1.0.0”字符串。
在 config.xml中，这样指定build版本号，例如：app外壳里的config.xml是这样的：
<chcp>
<native-interface version="1" />
<config-file url="http://192.168.191.2:9999/www/chcp.json" />
</chcp>
与www目录下的cordova-hcp.json/chcp.json里面的min_native_interface数值相对应，
若服务器里的min_native_interface也对应是1，就不会出现提示用户升级版本的状态（即外壳更新），正常修改www目录的内容通过更新release值，和客户端进行对比，可实现热更新（即内壳更新）。
{
"autogenerated": true,
"name": "bankapp",
"min_native_interface": 1, //最小内核版本号
"content_url": "http://192.168.191.2:9999/www",
"ios_identifier": "https://itues.apple.com/cn/***", //打版提交App Store下载的地址
"update": "now",
"release": "2017.02.23-12.53.32"
}
假设你的外壳app加了个新的插件或文件，应该会更新外壳app。为了防止用户通过热更新下载了不适合他现有外壳app的web内容，应该设置下 min_native_interface 的值
下面我们将 min_native_interface 的值改为 2
{
"autogenerated": true,
"name": "bankapp",
"min_native_interface": 2, //最小支持的外壳app版本
"content_url": "http://192.168.191.2:9999/www",
"ios_identifier": "https://itues.apple.com/cn/***", //打版提交App Store下载的地址
"update": "now",
"release": "2017.02.23-12.53.32"
}
热更新插件加载到这段json的时候, 发现 min_native_interface 比当前外壳app的build号要大，便不会下载web内容。而是触发一个chcp_updateLoadFailed 错误通知, 告诉用户需要升级外壳app版本了。
此属性将与config.xml中的native-interface进行对比，如果发现两者不同时，将会触发相应的事件，比如，手机端app中config.xml的native-interface值比服务器上的chcp.json文件中的min_native_interface值小时，将会触发’chcp_updateLoadFailed’事件，同时，错误代码为：
chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW 通过这个错误码调用js端监听相应事件通过弹窗提示用户去升级，跳转到AppStore或下载新安装包。
具体步骤
1、导入插件。外壳（版本号）的更新需要导入另外3个插件
cordova-plugin-file、cordova-plugin-file-transfer、cordova-plugin-file-opener2
导入命令：```
$ cordova plugin add cordova-plugin-file
$ cordova plugin add cordova-plugin-file-transfer
$ cordova plugin add cordova-plugin-file-opener2
> 2、添加代码-弹框-跳转至商店更新 **& ios_identifier为要跳转的地址**
> 将下面的代码放到 .run function中启动时就调用（看自己怎么封装的，我封到router中了）如图:
> 
`min_native-interface`将与config.xml中的`native-interface`进行对比、如果两者不同、将会触发`'chcp_updateLoadFailed'`事件。同时、错误代码为：
`chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW`，返回值为-2，那么就会执行下面的代码，弹框提示更新了。
> ```
var appUpdate = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind any events that are required.
// Usually you should subscribe on 'deviceready' event to know, when you can start calling cordova modules
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
document.addEventListener('chcp_updateLoadFailed', this.onUpdateLoadError, false);
},
// deviceready Event Handler
onDeviceReady: function() {
},
onUpdateLoadError: function(eventData) {
var error = eventData.detail.error;
// 当检测出外核版本有更新，// 针对不同平台进行相应更新操作
if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
var dialogMessage = '有新的版本,请下载更新';
// iOS端 直接弹窗提示升级，点击ok后自动跳转
if(ionic.Platform.isIOS()){
chcp.requestApplicationUpdate(dialogMessage, this.userWentToStoreCallback, this.userDeclinedRedirectCallback);
//Android端 提示升级下载最新APK文件
} else if(ionic.Platform.isAndroid()){
//这儿放Android端更新代码...，在下面
}
}
},
userWentToStoreCallback: function() {
// user went to the store from the dialog
},
userDeclinedRedirectCallback: function() {
// User didn't want to leave the app.
// Maybe he will update later.
}
};
appUpdate.initialize();
Android端添加代码 提示升级下载最新APK文件
var confirmPopup = $ionicPopup.confirm({
template: '有新的版本,请下载更新',
cssClass: 'popup',
cancelText:'取消',
okText:'升级'
});
confirmPopup.then(function (res) {
if (res) {
$ionicLoading.show({
template: "已经下载：0%"
});
window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function(fileEntry) {
fileEntry.getDirectory("***(app名称)", { create: true, exclusive: false }, function (fileEntry) {
//下载代码
var fileTransfer = new FileTransfer();
fileTransfer.download("app下载地址", fileEntry.toInternalURL()+"***(app名称).apk", function(entry) {
// 打开下载下来的APP
cordova.plugins.fileOpener2.open(
entry.toInternalURL(),//下载文件保存地址
'application/vnd.android.package-archive', {//以APK文件方式打开
error: function(err) {
},
success: function() {}
});
}, function(err) {
},true);
fileTransfer.onprogress = function(progressEvent) {
$timeout(function () {
var downloadProgress = (progressEvent.loaded / progressEvent.total) * 100;
$ionicLoading.show({
template: "已经下载：" + Math.floor(downloadProgress) + "%"
});
if (downloadProgress > 99) {
$ionicLoading.hide();
}
});
};
},function(err){alert("创建失败")});
});
}
});
chcp.json中update字段含义
指定了什么时候安装web内容更新，支持的值有：
start - app启动时安装更新，默认值
resume - app从后台切换过来的时候安装更新
now - web内容下载完毕即安装更新
好了，先总结这么多，可能会有些细节落下，望大家参考时，给我提下，我在继续补充。
