简介
关于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-push2、进入项目目录
$ 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中了)如图:
> ![](http://upload-images.jianshu.io/upload_images/4665802-c8d20aa8c0413f8c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
`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内容下载完毕即安装更新
好了,先总结这么多,可能会有些细节落下,望大家参考时,给我提下,我在继续补充。