ionic angular cordova 熱更新 code push server

ionic+angular+cordova 熱更新 - 更新APP

蔡宛蓉 2020/12/02 01:38:13
219

一、前言

什麼是熱更新呢?所謂熱更新就是在更新APP程式時,不用重新提交APP給Apple Store或Goole Play進行審核機制即可變更其內容以及功能,這可大幅度提升軟體的迭代速度。

而熱更新在網路上目前可搜尋到有兩個套件:Hot Code Push以及Code Push。

 

二、Hot Code Push

網址:https://github.com/nordnet/cordova-hot-code-push

在該gihub網站中,可以看到該套件於2018年時相關人員在github提及因所需人力以及經驗不足造成無法繼續維護,最終該項目被棄用。

 

三、Code Push

由於Hot Code Push已無法使用,可轉而使用Code Push。Code Push為微軟所開發,用於Cordova和React Native,提供開發人員更新APP的一款開發工具。

 

四、使用Code Push是否會被禁止上架

使用Code Push與使用jsPatch與rollout.io做熱更新有很大的不同,因Code Push無法更改軟體的native code,僅能修改相關於js或者scss/css等等的部分,所以不會被禁止上架,可以安心使用該套件。

 

、事前準備

•  OS系統:Mac

•  Node.js:官網下載頁面

 

六、實作

步驟一 安裝CodePush CLI

指令:npm install -g code-push-cli。

輸入指令後,若顯示"permissions of the file and its containing directories, or try running the command again as root/Administrator.",如下圖所示。

 

可打開最開權限指令:sudo su按下Enter後,輸入密碼就可正常執行安裝。

安裝完成,可以檢視版本是否有安裝成功。指令:code-push -v。

 

步驟二 安裝ionic

指令:npm install -g ionic。

輸入指令後,若在這之前有關閉終端器或關閉最開權限,則安裝ionic會像安裝CodePush CLI一樣,顯示"permissions of the file and its containing directories, or try running the command again as root/Administrator."的訊息。打開最高權限再進行安裝即可解決該問題。

 

一樣下指令:ionic -v,可以檢視版本是否有安裝成功。

 

步驟三 建立ionic專案

指令:ionic start [name] [template]。

name參數為專案名稱,在建立專案同時將會自動命名專案的名稱,而template參數則是版型名稱,可依照專案開發選擇欲開發的版型。其版型目前提供的有:blank、sidemenu、tutorial、tabs、super,這邊實作將會使用blank版型。

 

接著,會顯示多個framework提供開發者依據開發的架構進行選取,這邊實作選擇Angular。

 

安裝完成後,終端器會提示已安裝完成專案以及步驟。那麼,就馬上開啟Visual Studio Code就專案開啟跑跑看!

 

步驟四 安裝CodePush Cli以及CodePush微軟帳戶

在上一個步驟中,已確認可正常執行於網頁,那麼就可開始安裝CodePush Cli。安裝指令:npm install -g code-push-cli,完成安裝若是要確認是否有安裝成功,則可輸入指令:code-push -v查看是否可查詢到版本號。

 

由於實作是透過微軟開發的熱更新,所以需要伺服器上傳以及下載程式,其指令:npm install code-push-server -g,接著需要註冊帳戶:code-push register,若已註冊則可輸入:code-push login,之後則會自動開啟瀏覽器。

 

可選擇Github、FaceBook、Gmail等等驗證帳戶。

 

註冊或登入成功,網頁中將會給一組Key並複製貼在終端器。

 

步驟五 CodePush微軟帳戶註冊APP

接著,針對不同的專案需要去註冊我們的APP,簡單來說,可以想成是以一個資料夾分隔出該哪個專案對應於哪個資料夾。

其指令:code-push app add [Name] ios cordova,按下Enter,終端器將會顯示Production以及Staging兩組Key,其為可針對同一專案不同平台或兩個專案為同一Case,只是不同專案時需要分開配置的需求,而也可使用一組Key即可。

 

步驟六 熱更新實作

該步驟將開始需要切換至建立的專案,若不清楚該如何切換至建立的專案中,可參考步驟三的最後一個流程。切換之後,由於我們要將專案運行至行動裝置,那麼,將需要新增平台:ionic cordova platform add ios

 

新增完成,我們就運行看看是否可在行動裝置成功看到畫面:ionic cordova run ios。

 

緊接著在該專案底下新增外掛:

1.ionic cordova plugin add cordova-plugin-code-push@latest

2.ionic cordova plugin add cordova-plugin-whitelist

 

第五步驟註冊APP時所取得到的Key到專案中去做配置。

<platform name="ios">
    <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
</platform>

 

也需配置訪問許可權。

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

 

以及安裝Code-Push套件:npm install @ionic-native/code-push,並在app.component.ts引入Code-Push套件。

import { CodePush } from '@ionic-native/code-push/ngx';
export class AppComponent {
  constructor(
    private codePush:CodePush
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.checkCodePush();
    });
  }

  checkCodePush() {
    this.codePush.sync({ updateDialog: true }).subscribe(
    (data) => {
     console.log('CODE PUSH SUCCESSFUL');
    },
    (err) => {
     console.log('QOO_CODE PUSH ERROR);
    }); 
  }

 

以上設定完成,為了清楚知道是否有正常更新成功APP內容,我們可到home.page.html新增一些文字或者css。

<div id="Redcontainer">
    <strong>Code-Push completed. Do you see this?</strong>
  </div>

 

接下來推送最新版本:ionic cordova prepare ios,補充一點,推送前記得需要先切換至專案底下去做推送。

 

上一流程推送完,因為APP需要更新的動作,可以想成上傳之後要能下載才有辦法更新至APP中,所以還需要釋出版本更新:code-push release-cordova ionicAPP ios -m。

 

那麼,最後比對一下更新前以及更新後的畫面。

                                      更新前

 

                                 更新後

蔡宛蓉