ionic熱更新

簡(jiǎn)介

關(guān)于Cordova的熱更新問(wèn)題，國(guó)內(nèi)的資料比較少，許多博客上都是胡亂的抄襲，準(zhǔn)確性極低，無(wú)任何實(shí)用性，并且步驟不夠完整，在此親手測(cè)試了一下，并整理詳細(xì)的步驟以供備忘和參考。

熱更新的好處

通常ionic源碼可包括（HTML，JavaScript，CSS文件和其他資源），
通過(guò)cordova熱更新插件cordova-hot-code-push-plugin來(lái)是實(shí)現(xiàn)客戶端的代碼熱更新。
避免了之前更改代碼后重新打版再提交至應(yīng)用商店審核的流程，實(shí)現(xiàn)后臺(tái)動(dòng)態(tài)更新代碼
熱更新原理圖（扒來(lái)的。。。圖不孬，有助理解）


內(nèi)殼更新

基本的配置步驟

  • Python簡(jiǎn)單服務(wù)器本地搭建
    首先，我們自己搭建個(gè)本地的服務(wù)器Python，測(cè)試用。在此只做開(kāi)發(fā)版的熱更新測(cè)試，（本地的不做，容易混，也沒(méi)什么用）
    Python服務(wù)器安裝包云盤下載眼

    下載好后，我們用命令行操作：
    $ cd desktop

    在桌面創(chuàng)建文件夾，
    $ mkdir pythonServe
    $ cd pythonServer
    進(jìn)入到所創(chuàng)建的的文件夾，執(zhí)行：* 注意遵循大小寫<9999 為端口號(hào)可自定義>
    $ python -m SimpleHTTPServer 9999

    效果如下即為搭建成功：


    用終端查看下自己的ip, 執(zhí)行命令$ ifconfig即可獲取，此 ip+端口號(hào) 就是你服務(wù)器地址，如果切換網(wǎng)絡(luò)，要更新下面的服務(wù)器地址，切記哦！
    服務(wù)器到此搭建完畢告一段落...

  • ionic項(xiàng)目文件 配置：

    首先，創(chuàng)建工程：#創(chuàng)建de略過(guò)...
    $ 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
    作用：使用該命令行生成檢測(cè)配置文件，通常是在 www 目錄下動(dòng)態(tài)生成 chcp.json 和 chcp.manifest 生成兩個(gè)文件，插件源碼地址：https://github.com/nordnet/cordova-hot-code-push

    2、進(jìn)入項(xiàng)目目錄
    $ cd 你的項(xiàng)目路徑。比如 我的項(xiàng)目在桌面上：$ cd desktop/bankapp

    3、 安裝熱更新插件，執(zhí)行命令(cordova或ionic都可以)：
    $ cordova plugin add cordova-hot-code-push-plugin

    *注意：網(wǎng)上有安裝下插件，沒(méi)什么用，這是個(gè)實(shí)時(shí)更新插件，用于本地的同步更新，此處我們用不到:$ ionic plugin add cordova-hot-code-push-local-dev-addon

    4、創(chuàng)建cordova-hcp.json模板
    在cordova項(xiàng)目根目錄下創(chuàng)建一個(gè) 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
    就會(huì)利用這個(gè)模板自動(dòng)在www文件夾下生成新的 chcp.json和chcp.manifest文件，而不用手動(dòng)更改 www/chcp.json了。
    解析下：

    • min_native_interface: 記錄當(dāng)前App的外殼版本值
    • chcp.manifest文件記錄版本的hash值
    • ios_identifier:記錄App在蘋果商店上的位置，就是外殼地址
    • release：內(nèi)殼時(shí)間戳版本，根據(jù)時(shí)間戳來(lái)更新的。
    • content_url: 是你服務(wù)器內(nèi)更新的文件地址。此處建議設(shè)為www文件夾，因?yàn)槲覀兏膭?dòng)代碼后要把www文件進(jìn)行更新，可以直接將改動(dòng)后的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中的 版本號(hào)設(shè)置為一樣的

6、完成以上準(zhǔn)備，開(kāi)始測(cè)試 熱更新(html、css或js等資源的動(dòng)態(tài)更新，即內(nèi)殼更新）
執(zhí)行下面：

  • $ cordova platform add ios 生成平臺(tái)
  • $ cordova-hcp build 生成新chcp.json和chcp.manifest文件（重新打個(gè)時(shí)間戳realease）
  • $ cordova build ios/android 編譯包到各個(gè)平臺(tái)
  • 將www文件夾拷貝到服務(wù)器中
  • 在Xcode 中運(yùn)行工程應(yīng)用
  • 在webStore中（開(kāi)發(fā)工具自選）更改一些www文件夾中的內(nèi)容（如html、css、js或其它的資源）

在此，隨便改下就可以
  • $ cordova-hcp build
  • 再次將更改后的www的文件拷貝到服務(wù)器中，把原來(lái)舊的www文件替換即可
  • &在瀏覽器中測(cè)試下自己的服務(wù)器通否：

這是我的我的臨時(shí)搭建Python地址 ：http://192.168.1.101:9999

  • 在Xcode中再次運(yùn)行應(yīng)用，查看內(nèi)容是否進(jìn)行了更新

熱更新完成后日志如下:


到此內(nèi)殼更新就結(jié)束了，在這總結(jié)下可能會(huì)遇到的問(wèn)題:
一、chcp.json和config.xml中的服務(wù)器的地址不要寫錯(cuò),chcp.json中的地址：服務(wù)器上更新文件的地址；config.xml中的地址：服務(wù)器上更新文件的地址+chcp.json
二、首次要先在服務(wù)器上打個(gè)初始版本，流程如下：

即生成平臺(tái)-->模板生成chcp文件-->編譯到各個(gè)平臺(tái)-->上傳www到服務(wù)器-->運(yùn)行應(yīng)用--->修改內(nèi)容--> 模板重新生成chcp文件-->上傳www文件覆蓋舊的--->運(yùn)行應(yīng)用--->查看更新

三、服務(wù)器保證通的通的、、、
四、再不中看這 -坑眼-https://github.com/nordnet/cordova-hot-code-push/issues/223

外殼更新

描述

這個(gè)外殼更新有點(diǎn)強(qiáng)制化，比如你在使用應(yīng)用時(shí)，突然彈出個(gè)pop,提示你有新的版本更新了，人性化點(diǎn)的還有個(gè)取消按鈕；強(qiáng)制性的就確定后直接跳轉(zhuǎn)到AppStore了。這在你自己怎么設(shè)置了。
像原生的版本更新就沒(méi)有強(qiáng)制；如你打版提交審核上架了，客戶端也就僅在appStore商店有個(gè)更新提醒，更不更在客戶了。

外殼更新配置

上面的內(nèi)殼更新整好后，這就比較簡(jiǎn)單了，因該配的已配置好，只在這改改某些屬性就可以

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

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

在 config.xml中，這樣指定build版本號(hào)，例如：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ù)值相對(duì)應(yīng)，

若服務(wù)器里的min_native_interface也對(duì)應(yīng)是1，就不會(huì)出現(xiàn)提示用戶升級(jí)版本的狀態(tài)（即外殼更新），正常修改www目錄的內(nèi)容通過(guò)更新release值，和客戶端進(jìn)行對(duì)比，可實(shí)現(xiàn)熱更新（即內(nèi)殼更新）。

{
  "autogenerated": true,
  "name": "bankapp",
  "min_native_interface": 1, //最小內(nèi)核版本號(hào)
  "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加了個(gè)新的插件或文件，應(yīng)該會(huì)更新外殼app。為了防止用戶通過(guò)熱更新下載了不適合他現(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的時(shí)候, 發(fā)現(xiàn) min_native_interface 比當(dāng)前外殼app的build號(hào)要大，便不會(huì)下載web內(nèi)容。而是觸發(fā)一個(gè)chcp_updateLoadFailed 錯(cuò)誤通知, 告訴用戶需要升級(jí)外殼app版本了。

此屬性將與config.xml中的native-interface進(jìn)行對(duì)比，如果發(fā)現(xiàn)兩者不同時(shí)，將會(huì)觸發(fā)相應(yīng)的事件，比如，手機(jī)端app中config.xml的native-interface值比服務(wù)器上的chcp.json文件中的min_native_interface值小時(shí)，將會(huì)觸發(fā)’chcp_updateLoadFailed’事件，同時(shí)，錯(cuò)誤代碼為：
chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW 通過(guò)這個(gè)錯(cuò)誤碼調(diào)用js端監(jiān)聽(tīng)相應(yīng)事件通過(guò)彈窗提示用戶去升級(jí)，跳轉(zhuǎn)到AppStore或下載新安裝包。

具體步驟

1、導(dǎo)入插件。外殼（版本號(hào)）的更新需要導(dǎo)入另外3個(gè)插件
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中啟動(dòng)時(shí)就調(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`進(jìn)行對(duì)比、如果兩者不同、將會(huì)觸發(fā)`'chcp_updateLoadFailed'`事件。同時(shí)、錯(cuò)誤代碼為：
`chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW`，返回值為-2，那么就會(huì)執(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)檢測(cè)出外核版本有更新，// 針對(duì)不同平臺(tái)進(jìn)行相應(yīng)更新操作
            if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
                var dialogMessage = '有新的版本,請(qǐng)下載更新';
                
                // iOS端 直接彈窗提示升級(jí)，點(diǎn)擊ok后自動(dòng)跳轉(zhuǎn)
                if(ionic.Platform.isIOS()){
                    chcp.requestApplicationUpdate(dialogMessage, this.userWentToStoreCallback, this.userDeclinedRedirectCallback);
                //Android端 提示升級(jí)下載最新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端添加代碼?? 提示升級(jí)下載最新APK文件

var confirmPopup = $ionicPopup.confirm({
  template: '有新的版本,請(qǐng)下載更新',
  cssClass: 'popup',
  cancelText:'取消',
  okText:'升級(jí)'
});
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) {
          // 打開(kāi)下載下來(lái)的APP
          cordova.plugins.fileOpener2.open(
            entry.toInternalURL(),//下載文件保存地址
            'application/vnd.android.package-archive', {//以APK文件方式打開(kāi)
              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字段含義

指定了什么時(shí)候安裝web內(nèi)容更新，支持的值有：

start - app啟動(dòng)時(shí)安裝更新，默認(rèn)值
resume - app從后臺(tái)切換過(guò)來(lái)的時(shí)候安裝更新
now - web內(nèi)容下載完畢即安裝更新

好了，先總結(jié)這么多，可能會(huì)有些細(xì)節(jié)落下，望大家參考時(shí)，給我提下，我在繼續(xù)補(bǔ)充。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 首先確保有node npm ionic cordova 環(huán)境 1.安裝 cordova cordova-hcp c...
    如果你還記得我是小雙魚閱讀 1,622評(píng)論 0贊 2
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,269評(píng)論 25贊 708
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,923評(píng)論 18贊 139
  • 周文 主持 吳元貞 主講《分享即銷售》 首先，吳老師這次演講，我聽(tīng)了三遍，講的和我以前聽(tīng)鉆石講的都沒(méi)她講的好，很...
    ohyear閱讀 237評(píng)論 0贊 0
  • 櫻花的盛開(kāi)總是和她的謝落連在一起，似乎期間缺少一點(diǎn)委婉的過(guò)渡。她開(kāi)放的時(shí)節(jié)，是那樣?jì)善G無(wú)比，蓬勃繁榮；她謝落的時(shí)候...
    春思閱讀 277評(píng)論 0贊 0