技術標籤：ionic前端codePush

前置條件：ionic5 + angular 10 + code-push 實現 熱更新

我有一個私有的codePush伺服器，因此我將部署到私有伺服器上面

先將我的app新增至伺服器

1.登入熱更新伺服器：

執行命令：code-push login http://xxxxxxx

2.建立專案：（只需建立一次即可，以後都用這個）

執行命令：code-push app add 專案名稱 androidcordova

預設會有兩個環境：Production 和 Staging ，也可以執行命令：code-push deployment add 專案名稱 環境名稱。每個環境對應一個不同的key，這個key是我們配置專案需要的

準備工作已完成，接著開始配置我們的專案

專案配置：

1. 下載外掛

$ ionic cordova plugin add cordova-plugin-code-push
$ npm install --save @ionic-native/[email protected]

2.修改config.xml，因為我只需要android的，因此只配置了android。IOS的應該也是一樣的配置

    <platform name="android">
        <config-file parent="/manifest" target="AndroidManifest.xml" xmlns:android="http://schemas.android.com/apk/res/android">
            <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
        </config-file>
        <preference name="CodePushDeploymentKey" value="熱更新的key" />
        <preference name="CodePushServerUrl" value="私有服務地址，如果不是私有的，忽略這一行" />
</platform>

// 熱更新的key指的是：前面我們在熱更新服務中新增的專案的key，不只一個，替換成你想要推送的環境對應的key就行
 

3. config.xml中，如果你使用了<access origin="*" />，則忽略此步驟，否則需要新增以下程式碼

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

4.index.html中新增meta

<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.appcenter.ms 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />

// 私有codePush服務，請將https://codepush.appcenter.ms 修改為自己的伺服器地址

5.執行命令：cordova plugin ls 檢查是否有cordova-plugin-whitelist外掛，如果沒有執行cordova plugin add cordova-plugin-whitelist，新增至你的專案，如果有，那現在已經OK了

為我們的專案新增熱更新的提示

1. app.module.ts中引入CodePush

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Ndef, NFC } from '@ionic-native/nfc/ngx';
import { CodePush } from '@ionic-native/code-push/ngx';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    NFC,
    Ndef,
    CodePush
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

2.app.component.ts中：

import { CodePush, InstallMode, SyncStatus } from '@ionic-native/code-push/ngx';
import { LoadingController, Platform } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private codePush: CodePush,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.checkCodePush()
    });
  }
// 檢查熱更新
  checkCodePush() {
    this.codePush.sync({
      installMode: InstallMode.IMMEDIATE, //安裝模式：馬上更新
      updateDialog: {
        mandatoryUpdateMessage: "必須更新後才能使用", //強制更新時的資訊
        mandatoryContinueButtonLabel: "立即更新", //強制更新按鈕文字
        optionalInstallButtonLabel: "立即更新", //非強制更新時，確認按鈕文字
        optionalIgnoreButtonLabel: "下次再說", //非強制更新時，按鈕文字
        optionalUpdateMessage: "是否馬上更新？", //非強制更新時,檢查到更新的訊息文字
        updateTitle: "發現新版本", //標題
      }
    }).subscribe((syncStatus) => {
      if (syncStatus == 7) {
        alert('更新中，請不要退出應用')
      }
    }, err => { alert('錯誤' + err); });
  }

}

打包和推送熱更新方式

1. 打包命令：ioniccordovabuildandroid--prod--release ，簽名成功後生成的apk就是支援熱更新的apk

2.每次修改程式碼以後，先執行ioniccordovabuildandroid 命令編譯專案以後，再執行熱更新推送命令： code-pushrelease-cordova 專案名稱android-d 更新環境 。 完成以後，重啟步驟1生成的app。即可看到熱更新提示的彈框

這裡熱更新推送命令的專案名稱就是我們再熱更新服務中新增的專案名稱，更新環境就是我們需要熱更新服務中當前專案的環境name。環境name與config.xml中的key需要一一對應。否則可能會失敗