簡介
關(guān)于Cordova的熱更新問題,國內(nèi)的資料比較少锁荔,許多博客上都是胡亂的抄襲,準(zhǔn)確性極低蝙砌,無任何實用性阳堕,并且步驟不夠完整,在此親手測試了一下拍霜,并整理詳細(xì)的步驟以供備忘和參考嘱丢。
熱更新的好處
通常ionic源碼可包括(HTML薪介,JavaScript祠饺,CSS文件和其他資源),
通過cordova熱更新插件cordova-hot-code-push-plugin來是實現(xiàn)客戶端的代碼熱更新汁政。
避免了之前更改代碼后重新打版再提交至應(yīng)用商店審核的流程道偷,實現(xiàn)后臺動態(tài)更新代碼
熱更新原理圖(扒來的。记劈。勺鸦。圖不孬,有助理解)
內(nèi)殼更新
基本的配置步驟
-
Python簡單服務(wù)器本地搭建
首先目木,我們自己搭建個本地的服務(wù)器Python换途,測試用。在此只做開發(fā)版的熱更新測試,(本地的不做军拟,容易混剃执,也沒什么用)
Python服務(wù)器安裝包云盤下載眼下載好后,我們用命令行操作:
$ cd desktop
在桌面創(chuàng)建文件夾懈息,
$ mkdir pythonServe
$ cd pythonServer
進入到所創(chuàng)建的的文件夾肾档,執(zhí)行:* 注意遵循大小寫<9999 為端口號可自定義>
$ python -m SimpleHTTPServer 9999
效果如下即為搭建成功:
用終端查看下自己的ip, 執(zhí)行命令$ ifconfig
即可獲取,此 ip+端口號 就是你服務(wù)器地址辫继,如果切換網(wǎng)絡(luò)怒见,要更新下面的服務(wù)器地址,切記哦姑宽!
服務(wù)器到此搭建完畢告一段落... -
ionic項目文件 配置:
首先遣耍,創(chuàng)建工程:#創(chuàng)建de略過...
$ cordova create bankapp com.example.bankapp bankapp
或$ ionic start bankapp tabs -a "bankapp" -i com.example.bankapp
關(guān)鍵de配置
1、安裝 cordova-hot-code-push-cli,執(zhí)行命令:
$ npm install -g cordova-hot-code-push-cli
作用:使用該命令行生成檢測配置文件炮车,通常是在www
目錄下動態(tài)生成chcp.json
和chcp.manifest
生成兩個文件配阵,插件源碼地址:https://github.com/nordnet/cordova-hot-code-push2、進入項目目錄
$ cd 你的項目路徑
示血。比如 我的項目在桌面上:$ cd desktop/bankapp
3棋傍、 安裝熱更新插件,執(zhí)行命令(cordova或ionic都可以):
$ cordova plugin add cordova-hot-code-push-plugin
*注意:網(wǎng)上有安裝下插件难审,沒什么用瘫拣,這是個實時更新插件,用于本地的同步更新告喊,此處我們用不到:
$ ionic plugin add cordova-hot-code-push-local-dev-addon
4麸拄、創(chuàng)建cordova-hcp.json模板
在cordova項目根目錄下創(chuàng)建一個 cordova-hcp.json模板文件。
cordova-hcp.json內(nèi)容如下:{ "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:是你服務(wù)器上要更新的文件地址黔姜,
執(zhí)行:
$ cordova-hcp build
就會利用這個模板自動在www
文件夾下生成新的 chcp.json和chcp.manifest文件拢切,而不用手動更改 www/chcp.json了。
解析下:- min_native_interface: 記錄當(dāng)前App的外殼版本值
- chcp.manifest文件記錄版本的hash值
- ios_identifier:記錄App在蘋果商店上的位置秆吵,就是外殼地址
- release:內(nèi)殼時間戳版本淮椰,根據(jù)時間戳來更新的。
- content_url: 是你服務(wù)器內(nèi)更新的文件地址纳寂。此處建議設(shè)為www文件夾主穗,因為我們改動代碼后要把www文件進行更新,可以直接將改動后的www文件夾把服務(wù)器上舊的的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為你服務(wù)器中更新文件的地址/ chcp.json
&注意:內(nèi)殼更新 要把cordova-hcp.json和config.xml中的 版本號設(shè)置為一樣的
6、完成以上準(zhǔn)備腋粥,開始測試 熱更新(html晦雨、css或js等資源的動態(tài)更新架曹,即內(nèi)殼更新)
執(zhí)行下面:
-
$ cordova platform add ios
生成平臺 -
$ cordova-hcp build
生成新chcp.json和chcp.manifest文件(重新打個時間戳realease) -
$ cordova build ios/android
編譯包到各個平臺 - 將www文件夾拷貝到服務(wù)器中
- 在Xcode 中運行工程應(yīng)用
- 在webStore中(開發(fā)工具自選)更改一些www文件夾中的內(nèi)容(如html、css闹瞧、js或其它的資源)
在此音瓷,隨便改下就可以
$ cordova-hcp build
- 再次將更改后的www的文件拷貝到服務(wù)器中,把原來舊的www文件替換即可
- &在瀏覽器中測試下自己的服務(wù)器通否:
這是我的我的臨時搭建Python地址 :
http://192.168.1.101:9999
- 在Xcode中再次運行應(yīng)用夹抗,查看內(nèi)容是否進行了更新
熱更新完成后日志如下:
到此內(nèi)殼更新就結(jié)束了绳慎,在這總結(jié)下可能會遇到的問題:
一、chcp.json和config.xml中的服務(wù)器的地址不要寫錯,chcp.json中的地址:服務(wù)器上更新文件的地址漠烧;config.xml中的地址:服務(wù)器上更新文件的地址+chcp.json
二杏愤、首次要先在服務(wù)器上打個初始版本,流程如下:
即生成平臺-->
模板生成chcp文件
-->編譯到各個平臺-->上傳www到服務(wù)器
-->運行應(yīng)用--->修改內(nèi)容
--> 模板重新生成chcp文件-->上傳www文件覆蓋舊的
--->運行應(yīng)用--->查看更新
三已脓、服務(wù)器保證通的通的珊楼、、度液、
四厕宗、再不中看這 -坑眼-https://github.com/nordnet/cordova-hot-code-push/issues/223
外殼更新
描述
這個外殼更新有點強制化,比如你在使用應(yīng)用時堕担,突然彈出個pop,提示你有新的版本更新了已慢,人性化點的還有個取消按鈕;強制性的就確定后直接跳轉(zhuǎn)到AppStore了霹购。這在你自己怎么設(shè)置了佑惠。
像原生的版本更新就沒有強制;如你打版提交審核上架了齐疙,客戶端也就僅在appStore商店有個更新提醒膜楷,更不更在客戶了。
外殼更新配置
上面的內(nèi)殼更新整好后贞奋,這就比較簡單了赌厅,因該配的已配置好,只在這改改某些屬性就可以
通過min_native_interface監(jiān)控app是否提示更新
所需最小的外殼app版本. 這是app的build版本號轿塔,是個整型數(shù)字, 不是應(yīng)用商店中看到的形如”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數(shù)值相對應(yīng)洽议,
若服務(wù)器里的min_native_interface也對應(yīng)是1,就不會出現(xiàn)提示用戶升級版本的狀態(tài)(即外殼更新)漫拭,正常修改www目錄的內(nèi)容通過更新release值,和客戶端進行對比混稽,可實現(xiàn)熱更新(即內(nèi)殼更新)采驻。
{
"autogenerated": true,
"name": "bankapp",
"min_native_interface": 1, //最小內(nèi)核版本號
"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"
}
假設(shè)你的外殼app加了個新的插件或文件审胚,應(yīng)該會更新外殼app。為了防止用戶通過熱更新下載了不適合他現(xiàn)有外殼app的web內(nèi)容礼旅,應(yīng)該設(shè)置下 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的時候, 發(fā)現(xiàn) min_native_interface 比當(dāng)前外殼app的build號要大膳叨,便不會下載web內(nèi)容。而是觸發(fā)一個chcp_updateLoadFailed 錯誤通知, 告訴用戶需要升級外殼app版本了痘系。
此屬性將與config.xml中的native-interface進行對比菲嘴,如果發(fā)現(xiàn)兩者不同時,將會觸發(fā)相應(yīng)的事件汰翠,比如龄坪,手機端app中config.xml的native-interface
值比服務(wù)器上的chcp.json文件中的min_native_interface
值小時,將會觸發(fā)’chcp_updateLoadFailed’
事件复唤,同時健田,錯誤代碼為:
chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW
通過這個錯誤碼調(diào)用js端監(jiān)聽相應(yīng)事件通過彈窗提示用戶去升級,跳轉(zhuǎn)到AppStore或下載新安裝包佛纫。
具體步驟
1妓局、導(dǎo)入插件。外殼(版本號)的更新需要導(dǎo)入另外3個插件
cordova-plugin-file呈宇、cordova-plugin-file-transfer好爬、cordova-plugin-file-opener2
導(dǎo)入命令:```
$ cordova plugin add cordova-plugin-file
$ cordova plugin add cordova-plugin-file-transfer
$ cordova plugin add cordova-plugin-file-opener2
> 2、添加代碼-彈框-跳轉(zhuǎn)至商店更新 **& ios_identifier為要跳轉(zhuǎn)的地址**
> 將下面的代碼放到 .run function中啟動時就調(diào)用(看自己怎么封裝的甥啄,我封到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`進行對比抵拘、如果兩者不同、將會觸發(fā)`'chcp_updateLoadFailed'`事件型豁。同時僵蛛、錯誤代碼為:
`chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW`,返回值為-2迎变,那么就會執(zhí)行下面的代碼充尉,彈框提示更新了。
> ```
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;
// 當(dāng)檢測出外核版本有更新衣形,// 針對不同平臺進行相應(yīng)更新操作
if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
var dialogMessage = '有新的版本,請下載更新';
// iOS端 直接彈窗提示升級驼侠,點擊ok后自動跳轉(zhuǎn)
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: "已經(jīng)下載: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: "已經(jīng)下載:" + Math.floor(downloadProgress) + "%"
});
if (downloadProgress > 99) {
$ionicLoading.hide();
}
});
};
},function(err){alert("創(chuàng)建失敗")});
});
}
});
chcp.json中update字段含義
指定了什么時候安裝web內(nèi)容更新谆吴,支持的值有:
start - app啟動時安裝更新倒源,默認(rèn)值
resume - app從后臺切換過來的時候安裝更新
now - web內(nèi)容下載完畢即安裝更新
好了,先總結(jié)這么多句狼,可能會有些細(xì)節(jié)落下笋熬,望大家參考時,給我提下腻菇,我在繼續(xù)補充胳螟。