ionic2/3實(shí)戰(zhàn)-熱更新(cordova-plugin-code-push)

前言

  • 什么是熱更新?熱更新就是動(dòng)態(tài)下發(fā)代碼，它可以使開發(fā)者在不發(fā)布新版本的情況下，修復(fù) BUG 和發(fā)布功能.用戶毫無感知，還可以繞過某些應(yīng)用商店的長(zhǎng)時(shí)間審核
  • ionic實(shí)現(xiàn)熱更新的插件有好幾個(gè),本文以微軟公司提供的熱更新插件(cordova-plugin-code-push)為例.這里還有一款熱更新插件的介紹
  • 大公司提供的服務(wù)坑少,我在集成的過程中很順利,只是集成步驟比較多,各位只要認(rèn)真閱讀文檔都可以成功

參考文檔

環(huán)境準(zhǔn)備

  • 全局安裝typescript、typings、tslint、code-push-cli
cnpm install -g typescript
cnpm install -g typings
cnpm install -g tslint
cnpm install -g code-push-cli
目前(2017年10月16日 08:59:44)的版本信息

注:code-push-cli是連接熱更新服務(wù)端的工具,我們把要更新的代碼上傳至服務(wù)端,客戶端(我們的app)安裝cordova-plugin-code-push插件來從服務(wù)端下載代碼.

登錄code-push服務(wù)端

  • 使用code-push login命令會(huì)打開瀏覽器窗口讓我們登錄code-push服務(wù)端
  • 我這里用github帳號(hào)登錄,你也可以使用其他帳號(hào),登錄成功會(huì)返回一個(gè)權(quán)限token

  • 復(fù)制token粘帖到命令行工具中,回車則會(huì)登錄成功

使用code-push-cli在服務(wù)端創(chuàng)建應(yīng)用

  • 使用命令code-push app add <appName> <os> <platform>創(chuàng)建應(yīng)用;前面說過我們要部署代碼到熱更新服務(wù)端;<appName>建議以app名稱加"_android"或"_ios"后綴,以防忘記
  • 如下圖,給app在服務(wù)端分別創(chuàng)建了android和ios的cordova應(yīng)用.默認(rèn)為每個(gè)應(yīng)用生成兩種部署類型("Production"和"Staging"),我們就用這兩種類型分別代表生產(chǎn)環(huán)境和開發(fā)環(huán)境,請(qǐng)記下你生成的這四個(gè)key值,key是用來連接客戶端和服務(wù)端的
code-push app add ionic2_tabs_android android cordova
code-push app add ionic2_tabs_ios ios cordova


注:也可以在web端查看/管理app,傳送門

app環(huán)境準(zhǔn)備

  • 進(jìn)入app目錄,安裝熱更新插件及插件依賴
ionic cordova plugin add cordova-plugin-code-push
cnpm install --save @ionic-native/code-push
  • 查看是否安裝白名單插件cordova plugin list,如果沒有安裝請(qǐng)安裝ionic cordova plugin add cordova-plugin-whitelist
  • 在config.xml添加如下配置允許與CodePush服務(wù)器通信
<access origin="*" />

或者

<access origin="https://codepush.azurewebsites.net" />
<access origin="https://codepush.blob.core.windows.net" />
<access origin="https://codepushupdates.azureedge.net" />

app代碼準(zhǔn)備

  • 在app.module.ts聲明插件 import {CodePush} from "@ionic-native/code-push"; 
export const CODE_PUSH_DEPLOYMENT_KEY = {
  'android':{
    'Production':'你的android Production key',
    'Staging':'你的android Staging key'
  },
  'ios':{
     'Production':'你的ios Production key',
    'Staging':'你的ios Staging key'
  }
};
  • 添加同步方法,把部署key作為動(dòng)態(tài)參數(shù).NativeService.ts 
import {CodePush} from "@ionic-native/code-push";
constructor(private codePush: CodePush) {}
  /**
   * 熱更新同步方法
   */
 sync() {
    if (this.isMobile()) {
      let deploymentKey = '';
      if (this.isAndroid() && IS_DEBUG) {
        deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.android.Staging;
      }
      if (this.isAndroid() && !IS_DEBUG) {
        deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.android.Production;
      }
      if (this.isIos() && IS_DEBUG) {
        deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.ios.Staging;
      }
      if (this.isIos() && !IS_DEBUG) {
        deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.ios.Production;
      }
      this.codePush.sync({
        deploymentKey: deploymentKey
      }).subscribe(syncStatus => {
        console.log(syncStatus);
      });
    }
  }
  • 在app啟動(dòng)的時(shí)候調(diào)用code-push同步方法
  • 熱更新插件只能在真機(jī)測(cè)試.所以現(xiàn)在打包app并安裝到手機(jī)上.我這里以android為例先安裝一個(gè)debug版本的app到手機(jī)上

安裝了新插件,記得執(zhí)行cordova platform rm android和cordova platform add android

發(fā)布更新

  • 使用命令code-push deployment list <appName>查看發(fā)布狀態(tài)
    如下圖可以看到目前android應(yīng)用"Production"和"Staging"兩種部署狀態(tài)都沒有發(fā)布更新,也沒有安裝記錄

這是安裝在手機(jī)上的app頁面

修改代碼使頁面按鈕顏色為紅色,然后發(fā)布更新
  • 使用命令code-push release-cordova <appName> <platform> [options]發(fā)布更新,如下圖所示.

默認(rèn)發(fā)布"Staging"部署狀態(tài),也就是開發(fā)版.code-push release-cordova ionic2_tabs_android android --des "修改按鈕顏色"
發(fā)布上傳時(shí)間依網(wǎng)速快慢大概需要1分鐘左右
再次查看發(fā)布狀態(tài),會(huì)看到"Staging"已經(jīng)有一個(gè)版本"v1",但是還沒有安裝記錄

  • 前面已經(jīng)設(shè)置app在啟動(dòng)的時(shí)候會(huì)調(diào)用code-push同步方法,所以我們現(xiàn)在退出app,重新打開app,如下gif演示了code-push下載更新過程(點(diǎn)擊gif放大看)
  • 再次查看部署狀態(tài)已經(jīng)發(fā)現(xiàn)有一個(gè)更新安裝記錄,說明熱更新成功

code-push常用命令

//給app在熱更新服務(wù)器上創(chuàng)建應(yīng)用
code-push app add <appName> <os> <platform> 

//刪除應(yīng)用
code-push app rm <appName>

//查看熱更新服務(wù)器上有哪些應(yīng)用
code-push app list

//發(fā)布應(yīng)用
code-push release-cordova <appName> <platform> [options]
 Options參數(shù):
  --deploymentName, -d ..指定部署的類型.默認(rèn)"Staging",可以選擇"Production"或其他  自定義類型
  --description, --des ..添加描述
  --mandatory, -m .......指定此版本是否為強(qiáng)制更新版本
  例1:發(fā)布更新
  code-push release-cordova ionic2_tabs_android android --des ""
  例2:部署"Production"狀態(tài)的更新,即生產(chǎn)環(huán)境的熱更新部署使用這句命令
  code-push release-cordova ionic2_tabs_android android  -d "Production" --des ""
  注意:一般生產(chǎn)環(huán)境的app是壓縮過的,所以在發(fā)布正式環(huán)境熱更新之前,先執(zhí)行"ionic build --prod"壓縮代碼
  例3:部署ios應(yīng)用的更新
  code-push release-cordova ionic2_tabs_ios ios --des ""
  例4:添加-m參數(shù)強(qiáng)制更新,code-push插件從服務(wù)端下載完代碼,會(huì)立即自動(dòng)重啟app
  code-push release-cordova ionic2_tabs_android android  -m --des ""

//查看部署狀態(tài)
code-push deployment list <appName>
  例1:
  code-push deployment list ionic2_tabs_android
  例2:查看部署狀態(tài)及key值,忘記key就這樣找
  code-push deployment list ionic2_tabs_android -k

//清空部署記錄
code-push deployment clear <appName> <deploymentName>
如:清空Staging狀態(tài)的部署記錄
code-push deployment clear ionic2_tabs_android Staging

//添加部署狀態(tài),默認(rèn)只有"Staging"和"Production"兩中狀態(tài)
code-push deployment add <appName> [deploymentName]

//刪除自定義的部署狀態(tài)
code-push deployment rm <appName> <deploymentName>

其他問題

  • 官方文檔教程中,要給index.html添加如下<meta>,經(jīng)測(cè)試不用添加
<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />
  • 官方文檔教程中,添加如下代碼到config.xml中.即把熱更新key值放到config.xml中.但是這樣切換生產(chǎn)環(huán)境和開發(fā)環(huán)境不夠方便,于是本文把部署key放到代碼層動(dòng)態(tài)指定
<platform name="android">
    <preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" />
</platform>
<platform name="ios">
    <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
</platform>
  • 關(guān)于蘋果 App Store禁止熱更新的說明
    目前還沒有全面禁止熱更新,收到警告郵件的開發(fā)者絕大部分是使用了 JS-Patch 或 Rollout 的熱更新類庫(kù)
    我公司的應(yīng)用都是企業(yè)內(nèi)部應(yīng)用,還沒有應(yīng)用上傳到 App Store上,所以不受此限制.
    ios cordova的熱更新應(yīng)用能否上傳到App Store和實(shí)現(xiàn)熱更新,我覺得90%沒問題,各位測(cè)試后請(qǐng)留言.
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容