熱更新的好處

通常ionic源碼可包括（HTML，javaScript，CSS文件和其他資源），往常我們必須通過提交程序到應用市場，經(jīng)過漫長的審核后才可讓用戶更新，每改動一個小地方都需要重新打新版本。

現(xiàn)在ionic通過使用cordova插件cordova-hot-code-push實現(xiàn)實現(xiàn)iOS與Android端代碼『熱更新』功能，可不必發(fā)布應用市場經(jīng)平臺審核，便可動態(tài)更新App源碼的目的。

熱更新實現(xiàn)原理

基礎實現(xiàn)方法

1、安裝 cordova-hot-code-push-cli

使用命令安裝

1

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

主要是生成檢測配置文件，通常是在 www 目錄下動態(tài)生成 chcp.json 和 chcp.manifest 生成兩個文件，插件源碼地址：

https://github.com/nordnet/cordova-hot-code-push

2、創(chuàng)建項目

包含 www 目錄的項目，已有項目無需重新創(chuàng)建

3、安裝熱更新插件

使用命令安裝

123	ionic plugin add cordova-hot-code-push-pluginionic plugin add cordova-hot-code-push-local-dev-addon

4、打包封裝

執(zhí)行命令cordova-hcp build 或者 cordova build

5、啟動 hcp server 服務

重新打開一個終端窗口，cd到項目目錄（包含www目錄的父級目錄）執(zhí)行命令

1	cordova-hcp server

稍等會在 www 目錄下動態(tài)生成 chcp.json 和 chcp.manifest 生成兩個文件

6、正常在運行完成前4步以后會在我們config.xml動態(tài)加入如圖所示鏈接地址

圖中鏈接地址https://1980480f.ngrok.io/chcp.json，修改為在第8步www目錄里chcp.json文件可訪問的地址：

例如：http://kaibin.me/hotcode/chcp.json

7、運行代碼或打包我們的App

8、修改我們想要更新的代碼

然后修改 chcp.json 文件的 content_url ，此地址為我們項目放置的地址

123456

{ "autogenerated": true, "release": "2016.07.17-11.36.13", "content_url": "http://kaibin.me/hotcode", "update": "now"}

9、將項目www目錄代碼上傳到服務器可訪問的目錄里

例如在服務器根目錄創(chuàng)建hotcode命名的目錄將項目www里的文件上傳上去

10、 關閉我們的應用重新打開，看看代碼是否更新成功

優(yōu)化流程

1.創(chuàng)建cordova-hcp模板

線上測試可卸載掉 cordova-hot-code-push-local-dev-addon防止每次自動更新新版本，可通過命令卸載：

1	cordova plugin remove cordova-hot-code-push-local-dev-addon

可以在 cordova 項目根目錄下放一個 cordova-hcp.json，這是個模板文件這樣每次執(zhí)行

1	cordova-hcp build

就會利用這個模板生成新的 chcp.json，而不用手動更改 www/chcp.json了。cordova-hcp.json內容如下：

1234567

{ "autogenerated": true, "content_url": "http://kaibin.me/hotcode", "min_native_interface": 1, // app內核版本號 "ios_identifier": "https://itunes.apple.com/cn/app/***", // iOS上線后的地址，用于內核版本更新后的確認跳轉 "update": "now"}

2.Build options build設置，配置開發(fā)環(huán)境、測試環(huán)境與生產(chǎn)環(huán)境

在 /Cordova/TestPRoject/ 下創(chuàng)建 chcpbuild.options 文件，文件內容如下:

1234567891011

{ "dev": { "config-file": "https://dev.kaibin.me/hotcode/www/chcp.json" }, "production": { "config-file": "https://kaibin.me/hotcode/chcp.json" }, "QA": { "config-file": "https://test.kaibin.me/hotcode/chcp.json" }}

這樣在build app的時候, 轉為開發(fā)要用的服務器, 可執(zhí)行:

1	ionic build -- chcp-dev

結果就是, 特定拍下的 config.xml 文件(比如, /Cordova/TestProject/platforms/android/res/xml/config.xml) 變成了這樣:

123	<chcp> <config-file url="https://dev.kaibin.me/hotcode/chcp.json"/></chcp>

當我們需要上架app的時候 (Google Play, App Store) - 我們正常build:

1	ionic build --release

這樣 config.xml 不會改變

如果沒有使用 chcpbuild.options 插件會使用 config.xml 里面默認的值。

文件必須位于 Cordova 項目根目錄. 在這個文件里面，指定(JSON格式) 所有想改變 config.xml 文件的配置，源文件 config.xml (Cordova項目根目錄) 不會發(fā)生變動, 改變的是 特定平臺下的 config.xml (在cordova build過程的 after_prepare 階段)。

通過min_native_interface監(jiān)控app是否提示更新

所需最小的外殼app版本. 這是app的build版本號，是個整型數(shù)字, 不是應用商店中看到的形如”1.0.0”字符串。

在 config.xml中，這樣指定build版本號:

1234	<chcp> <native-interface version="1"/> <config-file url="http://kaibin.me/hotcode/chcp.json"/></chcp>

與www目錄下的chcp.json里面的min_native_interface數(shù)值相對應

例如：app外殼里的config.xml是這樣的：

1234	<chcp> <native-interface version="1"/> <config-file url="http://kaibin.me/hotcode/chcp.json"/></chcp>

若服務器里的min_native_interface也對應是1，不會出現(xiàn)提示用戶升級的狀態(tài)，正常修改www目錄的內容通過更新release值，可實現(xiàn)熱更新。

12345678

{ "autogenerated": true, "content_url": "http://kaibin.me/hotcode", "min_native_interface": 1, // app內核版本號 "ios_identifier": "https://itunes.apple.com/cn/app/***", // iOS上線后的地址，用于內核版本更新后的確認跳轉 "release": "2017.07.17-12.22.11", "update": "now"}

假設你的外殼app加了個新的插件，應該會更新外殼app。為了防止用戶通過熱更新下載了不適合他現(xiàn)有外殼app的web內容，你應該設置 min_native_interface 這個值

123456789

{ "autogenerated": true, "content_url": "http://kaibin.me/hotcode", "min_native_interface": 1, // app內核版本號 "ios_identifier": "https://itunes.apple.com/cn/app/***", // iOS上線后的地址，用于內核版本更新后的確認跳轉 "release": "2017.07.17-12.28.21", "min_native_interface": 2， "update": "now"}

插件加載到這段json的時候, 發(fā)現(xiàn) min_native_interface 比當前外殼app的build號要大，便不會下載web內容。而是觸發(fā)一個chcp_updateLoadFailed 錯誤通知, 告訴用戶需要升級外殼app了。

chcp.json中update字段含義

指定了什么時候安裝web內容更新，支持的值有：

start - app啟動時安裝更新，默認值resume - app從后臺切換過來的時候安裝更新now - web內容下載完畢即安裝更新

引導用戶去應用商店更新外殼app或下載新版本

通過給web更新設置最小支持的外殼app版本 min_native_interface。 如果插件檢查發(fā)現(xiàn)用戶安裝的外殼app版本比服務端新的web內容要求的版本要低，就會觸發(fā)錯誤事件，錯誤碼：

1	chcp.error.application_BUILD_VERSION_TOO_LOW

通過這個錯誤碼可通過彈窗提示用戶去升級，跳轉到AppStore或下載新安裝包（國內因GFW，跳轉到google應用商店就算了＝ ＝）

chcp.json 里增加min_native_interface的值

js端監(jiān)聽相應事件，并在出現(xiàn)錯誤的時候調用 chcp.requestApplicationUpdate 方法

cordova-plugin-file，cordova-plugin-file-transfer，cordova-plugin-file-opener2先把這幾個插件安裝好

?

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889

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()){ 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)建失敗")}); }); } }); } } }, 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();

iOS與Android的出現(xiàn)的問題

在build ios的app時config.xml的

1	<name>***</name>

name不可使用中文，設置app名稱為中文，可通過Xcode修改Resources目錄下的***-Info.plist內的Bundle display name字段即可。

這篇文章寫得很詳細，特轉載過來慢慢研究，十分感謝本文作者貢獻出如此好得文章。轉載地址：http://kaibin.me/2016/07/17/ionic-hotcode/