ionic熱更新

簡介

關(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.jsonchcp.manifest 生成兩個文件配阵,插件源碼地址:https://github.com/nordnet/cordova-hot-code-push

    2、進入項目目錄
    $ 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ù)補充胳螟。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末昔馋,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子糖耸,更是在濱河造成了極大的恐慌秘遏,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嘉竟,死亡現(xiàn)場離奇詭異邦危,居然都是意外死亡,警方通過查閱死者的電腦和手機舍扰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門倦蚪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人妥粟,你說我怎么就攤上這事审丘。” “怎么了勾给?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵滩报,是天一觀的道長。 經(jīng)常有香客問我播急,道長脓钾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任桩警,我火速辦了婚禮可训,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘捶枢。我一直安慰自己握截,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布烂叔。 她就那樣靜靜地躺著谨胞,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蒜鸡。 梳的紋絲不亂的頭發(fā)上胯努,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天,我揣著相機與錄音逢防,去河邊找鬼叶沛。 笑死,一個胖子當(dāng)著我的面吹牛忘朝,可吹牛的內(nèi)容都是我干的灰署。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼氓侧!你這毒婦竟也來了脊另?” 一聲冷哼從身側(cè)響起导狡,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤约巷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后旱捧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體独郎,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年枚赡,在試婚紗的時候發(fā)現(xiàn)自己被綠了氓癌。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡贫橙,死狀恐怖贪婉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情卢肃,我是刑警寧澤疲迂,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站莫湘,受9級特大地震影響尤蒿,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜幅垮,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一腰池、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧忙芒,春花似錦示弓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至甘桑,卻和暖如春拍皮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背跑杭。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工铆帽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人德谅。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓爹橱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親窄做。 傳聞我的和親對象是個殘疾皇子愧驱,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355

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