ionic+angular+cordova 熱更新 - 更新APP
一、前言
什麼是熱更新呢？所謂熱更新就是在更新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。
那麼，最後比對一下更新前以及更新後的畫面。
更新前
更新後
