參考

• code-push
• code-push-cli
• cordova-plugin-code-push
• ionic2-code-push-example
• code-push常用命令

安裝插件

• 使用npm命令全局安裝typescript、typings掉缺、tslint卜录、code-push-cli四個插件

npm install -g typescript
npm install -g typings
npm install -g tslint
npm install -g code-push-cli

ps:typescript使用時的命令是tsc，而不是typescript

如圖：

2017-11-15的版本信息.png

熱更新代碼服務(wù)端

• 使用code-push login命令登錄服務(wù)端眶明，該命令會打開瀏覽器窗口讓我們登錄code-push服務(wù)端
  
  code-push login.png

• 我是使用github帳號登錄艰毒，你可以使用其他帳號，登錄成功會返回一個權(quán)限token

  
  
  登錄.png
  
  
  返回的token.png

• 將token填到到命令終端中搜囱，回車就會登錄成功

  
  
  code-push login成功.png

在服務(wù)端創(chuàng)建應(yīng)用

• 使用命令code-push app add <appName> <os> <platform>創(chuàng)建應(yīng)用

code-push app add moon_admin_android android cordova
code-push app add moon_admin_ios ios cordova

• 執(zhí)行命令后會生成如下圖所示的android cordova和ios cordova的應(yīng)用信息丑瞧，我們要把android和ios的Production和Staging分別記錄下來

ps:這四個key是用來連接客戶端和服務(wù)端的

code-push.png

ps:你還可以在web端查看/管理app，傳送門

客戶端（app蜀肘、ionic2/3項目）安裝插件

• 命令終端進(jìn)入app目錄绊汹，安裝熱更新插件及插件依賴

ionic cordova plugin add cordova-plugin-code-push
npm install --save @ionic-native/code-push

• 使用cordova plugin list命令查看是否安裝白名單插件cordova plugin list
  如果沒有安裝請執(zhí)行命令
  ionic cordova plugin add cordova-plugin-whitelist
  
  cordova-plugin-whitelist.png
• 在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.module.ts聲明CodePush插件

import {CodePush} from "@ionic-native/code-push";

• 將CodePush加到providers中
  如圖：
  
  CodePush加到providers中.png

動態(tài)配置在服務(wù)端創(chuàng)建應(yīng)用后得到的四個key

• 將4個code-push key添加為常量

我的是Constants.ts文件

code-push key.png

代碼：

/**
 * debug開發(fā)者模式
 */
export const DEBUG = {
  //是否debug模式，true:是, false:否
  IS_DEBUG: true
}

/**
 * 熱更新發(fā)布的key
 */
export const CODE_PUSH_DEPLOYMENT_KEY = {
  ANDROID: {
    Production: '你的android Production key',
    Staging: '你的android Staging key'
  },
  IOS: {
    Production: '你的ios Production key',
    Staging: '你的ios Staging key'
  }
}

• 熱更新同步方法

  
  
  sync.png
  
  

  代碼：

import { CodePush } from '@ionic-native/code-push';
import { DEBUG, CODE_PUSH_DEPLOYMENT_KEY } from './Constants';

  sync()
  {
    //如果不是真機(jī)環(huán)境return
    if (!this.isMobile()) return;
    //發(fā)布的key
    let deploymentKey = '';
    //如果是Android環(huán)境 并且是 debug模式
    if (this.isAndroid() && DEBUG.IS_DEBUG)
    {
      deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.ANDROID.Staging;
    }
    if (this.isAndroid() && !DEBUG.IS_DEBUG)
    {
      deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.ANDROID.Production;
    }
    if (this.isIos() && DEBUG.IS_DEBUG)
    {
      deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.IOS.Staging;
    }
    if (this.isIos() && !DEBUG.IS_DEBUG)
    {
      deploymentKey = CODE_PUSH_DEPLOYMENT_KEY.IOS.Production;
    }
    //熱更新同步
    this.codePush.sync({
      deploymentKey: deploymentKey
    }).subscribe((syncStatus) => {
      console.log(syncStatus);
    });
  }

  /**
   * 是否是真機(jī)環(huán)境
   * @returns {boolean}
   * @memberof NativeService
   */
  isMobile(): boolean
  {
    return this.platform.is("mobile") && !this.platform.is("mobileweb");
  }

  /**
   * 是否android真機(jī)環(huán)境
   * @returns {boolean}
   * @memberof NativeService
   */
  isAndroid(): boolean
  {
    return this.isMobile() && this.platform.is("android");
  }

  /**
   * 是否是ios真機(jī)環(huán)境
   * @returns {boolean}
   * @memberof NativeService
   */
  isIos(): boolean
  {
    return this.isMobile && (this.platform.is("ios") || this.platform.is("ipad") || this.platform.is("iphone"));
  }

• 在app啟動的時候調(diào)用code-push同步方法
  1. 將以上代碼放到app.component.ts文件中扮宠，然后在構(gòu)造函數(shù)（constructor(){}）中調(diào)用this.sync()方法
  2. 你還可以將以上代碼放到任何一個.ts文件中西乖，然后在app.component.ts的構(gòu)造函數(shù)中調(diào)用sync()方法。

發(fā)布熱更新

• 使用以下命令查看發(fā)布狀態(tài)

code-push deployment list <appName>

執(zhí)行命令

code-push deployment list moon_admin_android

執(zhí)行結(jié)果如下圖

目前我的moon_admin_android應(yīng)用"Production"部署狀態(tài)沒有發(fā)布更新坛增，也沒有安裝記錄获雕；"Staging"則有一次發(fā)布更新v1，一次安裝記錄

deployment list.png

• 使用以下命令發(fā)布更新

code-push release-cordova <appName> <platform> [options]

執(zhí)行命令

code-push release-cordova moon_admin_android android --des "測試熱更新"

ps: 默認(rèn)發(fā)布"Staging"部署狀態(tài),也就是開發(fā)版

執(zhí)行命令結(jié)果

發(fā)布成功.png

再次執(zhí)行查看發(fā)布命令

code-push deployment list moon_admin_android

執(zhí)行結(jié)果

會看到"Staging"多了一個"v2"版本收捣，但是還沒有安裝記錄

deployment v2.png

• 我們設(shè)置app在啟動的時候會調(diào)用sync()同步方法届案，所以重新打開app后app就會自動更新了代碼

打開app后，再執(zhí)行查看發(fā)布命令
code-push deployment list moon_admin_android

手機(jī)熱更新成功.png

ps: 執(zhí)行查看發(fā)布命令可能存在延遲坏晦，不能立馬看到安裝記錄改變萝玷，但實際app上已經(jīng)更新了代碼。如出現(xiàn)該現(xiàn)象請淡定

其他說明

• 官方文檔教程中昆婿，要給index.html添加如下<meta>球碉，經(jīng)測試不用添加

<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 *" />

• 官方文檔教程中，是把熱更新key放到config.xml仓蛆，這樣切換生產(chǎn)環(huán)境和開發(fā)環(huán)境不夠方便睁冬，于是本文把熱更新key放到靜態(tài)類中動態(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>

最后

ps: 安裝新插件后，要執(zhí)行cordova platform rm android和cordova platform add android

code-push常用命令