前言
- 什么是熱更新?熱更新就是動(dòng)態(tài)下發(fā)代碼，它可以使開(kāi)發(fā)者在不發(fā)布新版本的情況下尿瞭，修復(fù) BUG 和發(fā)布功能.用戶(hù)毫無(wú)感知，還可以繞過(guò)某些應(yīng)用商店的長(zhǎng)時(shí)間審核
- ionic實(shí)現(xiàn)熱更新的插件有好幾個(gè),本文以微軟公司提供的熱更新插件(cordova-plugin-code-push)為例.這里還有一款熱更新插件的介紹
- 大公司提供的服務(wù)坑少,我在集成的過(guò)程中很順利,只是集成步驟比較多,各位只要認(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ù)端,客戶(hù)端(我們的app)安裝cordova-plugin-code-push插件來(lái)從服務(wù)端下載代碼.
登錄code-push服務(wù)端
- 使用
code-push login命令會(huì)打開(kāi)瀏覽器窗口讓我們登錄code-push服務(wù)端
- 我這里用github帳號(hào)登錄,你也可以使用其他帳號(hào),登錄成功會(huì)返回一個(gè)權(quán)限token
- 復(fù)制token粘帖到命令行工具中,回車(chē)則會(huì)登錄成功
使用code-push-cli在服務(wù)端創(chuàng)建應(yīng)用
- 使用命令
code-push app add <appName> <os> <platform>創(chuàng)建應(yīng)用;前面說(shuō)過(guò)我們要部署代碼到熱更新服務(wù)端;<appName>建議以app名稱(chēng)加"_android"或"_ios"后綴,以防忘記 - 如下圖,給app在服務(wù)端分別創(chuàng)建了android和ios的cordova應(yīng)用.默認(rèn)為每個(gè)應(yīng)用生成兩種部署類(lèi)型("Production"和"Staging"),我們就用這兩種類(lèi)型分別代表生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境,請(qǐng)記下你生成的這四個(gè)key值,key是用來(lái)連接客戶(hù)端和服務(wù)端的
code-push app add ionic2_tabs_android android cordova
code-push app add ionic2_tabs_ios ios cordova
注:也可以在web端查看/管理app,傳送門(mén)
app環(huán)境準(zhǔn)備
- 進(jìn)入app目錄,安裝熱更新插件及插件依賴(lài)
ionic cordova plugin add cordova-plugin-code-push
cnpm install --save @ionic-native/code-push
- 查看是否安裝白名單插件
cordova plugin list,如果沒(méi)有安裝請(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";
- 配置code-push key.Constants.ts
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)都沒(méi)有發(fā)布更新,也沒(méi)有安裝記錄
這是安裝在手機(jī)上的app頁(yè)面
修改代碼使頁(yè)面按鈕顏色為紅色,然后發(fā)布更新
- 使用命令
code-push release-cordova <appName> <platform> [options]發(fā)布更新,如下圖所示.
默認(rèn)發(fā)布"Staging"部署狀態(tài),也就是開(kā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",但是還沒(méi)有安裝記錄
- 前面已經(jīng)設(shè)置app在啟動(dòng)的時(shí)候會(huì)調(diào)用code-push同步方法,所以我們現(xiàn)在退出app,重新打開(kāi)app,如下gif演示了code-push下載更新過(guò)程(點(diǎn)擊gif放大看)
- 再次查看部署狀態(tài)已經(jīng)發(fā)現(xiàn)有一個(gè)更新安裝記錄,說(shuō)明熱更新成功
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 ..指定部署的類(lèi)型.默認(rèn)"Staging",可以選擇"Production"或其他 自定義類(lèi)型
--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是壓縮過(guò)的,所以在發(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>
其他問(wèn)題
- 官方文檔教程中,要給
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)境和開(kāi)發(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)于蘋(píng)果 App Store禁止熱更新的說(shuō)明
目前還沒(méi)有全面禁止熱更新,收到警告郵件的開(kāi)發(fā)者絕大部分是使用了 JS-Patch 或 Rollout 的熱更新類(lèi)庫(kù)
我公司的應(yīng)用都是企業(yè)內(nèi)部應(yīng)用,還沒(méi)有應(yīng)用上傳到 App Store上,所以不受此限制.
ios cordova的熱更新應(yīng)用能否上傳到App Store和實(shí)現(xiàn)熱更新,我覺(jué)得90%沒(méi)問(wèn)題,各位測(cè)試后請(qǐng)留言.
