react-native熱更新之code-push

文章部份內容參考:http://www.javashuo.com/article/p-zpcjhzti-bv.htmlhtml

可是我在這個基礎上進行了補充java

code-push已經遷移到 APP Center node

-------------- react

React Native的出現爲移動開發領域帶來了兩大革命性的創新:android

  1. 整合了移動端APP的開發,不只縮短了APP的開發時間,也提升了APP的開發效率。
  2. 爲移動APP動態更新提供了基礎。

本文將向你們分享React Natvie應用部署/動態更新方面的內容。ios

React Native支持你們用React Native技術開發APP,並打包生成一個APP。在動態更新方面React Native只是提供了動態更新的基礎,對將應用部署到哪裏,如何進行動態更新並無支持的那麼完善。好在微軟開發了CodePush,填補React Native 應用在動態更新方面的空白。CodePush 是微軟提供的一套用於熱更新 React Native 和 Cordova 應用的服務。下面將向你們分享如何使用CodePush實時更新你的應用,後期會分享不採用CodePush,如何本身去實現React Native應用熱更新。git

CodePush簡介(https://appcenter.ms/

CodePush 是微軟提供的一套用於熱更新 React Native 和 Cordova 應用的服務。
CodePush 是提供給 React Native 和 Cordova 開發者直接部署移動應用更新給用戶設備的雲服務。CodePush 做爲一箇中央倉庫,開發者能夠推送更新 (JS, HTML, CSS and images),應用能夠從客戶端 SDK 裏面查詢更新。CodePush 可讓應用有更多的可肯定性,也可讓你直接接觸用戶羣。在修復一些小問題和添加新特性的時候,不須要通過二進制打包,能夠直接推送代碼進行實時更新。github

React Native應用程序由JavaScript文件和任何附帶圖像組成,這些圖像由打包程序捆綁在一塊兒並做爲特定於平臺的二進制文件(即.ipa或.apk文件)的一部分進行分發。應用程序發佈後,更新JavaScript代碼(例如修復錯誤,添加新功能)或圖像資產,須要您從新編譯和從新分發整個二進制文件,固然,這包括與商店相關的任何審覈時間你要發佈到。
CodePush插件經過使您的JavaScript和圖像與您發佈到CodePush服務器的更新保持同步,有助於當即在最終用戶面前進行產品改進。經過這種方式,您的應用能夠得到離線移動體驗的好處,以及一旦可用,就能夠得到側面加載更新的「相似網絡」的敏捷性。這是共贏的!
爲了確保您的最終用戶始終擁有應用程序的正常版本,CodePush插件會維護之前更新的副本,以便在您意外推送包含崩潰的更新時,它能夠自動回滾。這樣,您能夠放心,在您有機會回滾服務器以前,您的新發布的敏捷性不會致使用戶被阻止。這是一個共贏的局面!
注意:任何與本機代碼相關的產品更改(例如,修改AppDelegate.m / MainActivity.java文件,添加新插件)都沒法經過CodePush分發,所以必須經過相應的商店進行更新。

 

CodePush 能夠進行實時的推送代碼更新:shell

  • 直接對用戶部署代碼更新
  • 管理 Alpha,Beta 和生產環境應用
  • 支持 React Native 和 Cordova
  • 支持JavaScript 文件與圖片資源的更新

CodePush開源了react-native版本,react-native-code-push託管在GitHub上。npm

安裝與註冊CodePush

使用CodePush以前首先要安裝CodePush客戶端。本文以OSX 10.11.5做爲平臺進行演示。

安裝 CodePush CLI (CodePush CLI具體用法指南)

管理 CodePush 帳號須要經過 NodeJS-based CLI。
只須要在終端輸入 npm install -g code-push-cli,就能夠安裝了。
安裝完畢後,輸入 code-push -v查看版本,如看到版本表明成功。
目前個人版本是 2.1.9

PS. 
npm爲NodeJS的包管理器,若是你沒安裝NodeJS請先安裝。(關於nodejs、npm詳細講解及安裝

建立一個CodePush 帳號

在終端輸入code-push register,會打開以下注冊頁面讓你選擇受權帳號,其實也就是跳轉到官網https://appcenter.ms/sign-in

能夠選擇用微軟帳號登陸或GitHub帳號登陸

經過以後,code-push會告訴你 「access key」,複製到終端完成註冊。

而後終端輸入code-push login進行登錄,登錄成功後,你的session文件將會寫在 /Users/你的用戶名/.code-push.config

登陆成功
登錄

PS.相關命令

  • code-push login 登錄
  • code-push loout 註銷
  • code-push access-key ls 列出登錄的token
  • code-push access-key rm <accessKye> 刪除某個 access-key

在CodePush服務器註冊app

爲了讓CodePush服務器知道你的app,咱們須要向它註冊app: 在終端輸入code-push app add <appName>便可完成註冊。

 code-push-add-app


註冊完成以後會返回一套deployment key,該key在後面步驟中會用到。

心得:若是你的應用分爲Android和iOS版,那麼在向CodePush註冊應用的時候須要註冊兩個App獲取兩套deployment key,如:

 
  1. code- push app add MyApp-Android
  2. code- push app add MyApp-iOS

PS.相關命令

  • code-push app add 在帳號裏面添加一個新的app
  • code-push app remove 或者 rm 在帳號裏移除一個app
  • code-push app rename 重命名一個存在app
  • code-push app list 或則 ls 列出帳號下面的全部app
  • code-push app transfer 把app的全部權轉移到另一個帳號


 

集成CodePush SDK

Android

下面咱們經過以下步驟在Android項目中集成CodePush。
第一步:在項目中安裝 react-native-code-push插件,終端進入你的項目根目錄而後運行
npm install --save react-native-code-push

第二步:在Android project中安裝插件。
CodePush提供了兩種方式:RNPM 和 Manual,本次演示所使用的是RNPM。
運行npm i -g rnpm,來安裝RNPM。

在React Native v0.27及之後版本RNPM已經被集成到了 React Native CL中,就不須要再進行安裝了。

第三步: 運行 rnpm link react-native-code-push。這條命令將會自動幫咱們在anroid文件中添加好設置。iOS、Android都配好了 successful linked ,下面的步驟已經自動完成了你只檢查下就行。

         
          react-native-code-push has been successfully linked

在終端運行此命令以後,終端會提示讓你輸入deployment key,這是你只需將你的deployment Staging key輸入進去便可,若是不輸入則直接單擊enter跳過便可。

第四步: 在 android/app/build.gradle文件裏面添以下代碼:

 
  1. apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

而後在/android/settings.gradle中添加以下代碼:

 
  1. include ':react-native-code-push'
  2. project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
include ':react-native-code-push'project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

第五步: 運行 code-push deployment ls -k <appName>獲取 部署祕鑰。默認的部署名是 staging,因此 部署祕鑰(deployment key ) 就是 staging


 

第六步: 添加配置。當APP啓動時咱們須要讓app向CodePush諮詢JS bundle的所在位置,這樣CodePush就能夠控制版本。更新 MainApplication.java文件:

 
public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override
protected String getJSBundleFile() {
// gradlew assembleRelease會把全部用到的JavaScript代碼都打包內置到APK中
if (BuildConfig.IS_CODE_PUSH) {
return CodePush.getJSBundleFile(); // code-push熱更新
}
return UpdateContext.getBundleUrl(MainApplication.this); // pushy熱更新
}


// 設置爲 true 將不彈出 toast
private boolean SHUTDOWN_TOAST = false;
// 設置爲 true 將不打印 log
private boolean SHUTDOWN_LOG = false;

@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNFetchBlobPackage(),
new WeChatPackage(),
new UpdatePackage(),
new RNDeviceInfo(),
new RNI18nPackage(),
new RNCWebViewPackage(),
new RNGestureHandlerPackage(),
new WeChatPackage(),
new ReactVideoPackage(),
new VectorIconsPackage(),
new SplashScreenReactPackage(),
new LinearGradientPackage(),
new ImagePickerPackage(),
new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG),
new CodePush(BuildConfig.CODE_PUSH_KEY, MainApplication.this, BuildConfig.DEBUG)
);
}

@Override
protected String getJSMainModuleName() {
return "index";
}
};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}

熱更新有兩張方案 中文社區提供的Pushy微軟提供CodePush

 

關於deployment-key的設置 (關於Grande

在上述代碼中咱們在建立CodePush實例的時候須要設置一個deployment-key,由於deployment-key分生產環境與測試環境兩種,因此建議你們在build.gradle中進行設置。在build.gradle中的設置方法以下:

打開android/app/build.gradle文件,找到android { buildTypes {} }而後添加以下代碼便可:

buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
signingConfig signingConfigs.config
buildConfigField "String", "CODE_PUSH_KEY", CODE_PUSH_KEY_PRODUCTION
buildConfigField "boolean", "IS_CODE_PUSH", "true"
}
debug {
buildConfigField "String", "CODE_PUSH_KEY", CODE_PUSH_KEY_STAGING
buildConfigField "boolean", "IS_CODE_PUSH", "true"
}
}

 

心得:另外,咱們也能夠將deployment-key存放在gradle.properties中:

 
  1. CODE_PUSH_KEY_PRODUCTION="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  2. CODE_PUSH_KEY_STAGING="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
# gradle.properties專門用來配置全局鍵值對數據的
# 將它從git版本控制中排除不用擔憂keystore文件等敏感信息泄漏
# BuildConfig或代碼中應用取值 ${KEY}
MYAPP_RELEASE_STORE_FILE=./keystores/release.keystore
MYAPP_RELEASE_KEY_ALIAS=release
MYAPP_RELEASE_STORE_PASSWORD=111111
MYAPP_RELEASE_KEY_PASSWORD=111111
VERSION_CODE=6
VERSION_NAME=1.0.0
CODE_PUSH_KEY_PRODUCTION="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
CODE_PUSH_KEY_STAGING="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" 

 

在android/app/build.gradle設置好deployment-key以後呢,咱們就能夠這樣使用了:

@Override
protected String getJSBundleFile() {
// gradlew assembleRelease會把全部用到的JavaScript代碼都打包內置到APK中
if (BuildConfig.IS_CODE_PUSH) {
return CodePush.getJSBundleFile(); // code-push熱更新
}
return UpdateContext.getBundleUrl(MainApplication.this); // pushy熱更新

第七步:修改versionName。
在 android/app/build.gradle中有個 android.defaultConfig.versionName屬性,咱們須要把 應用版本改爲 1.0.0(默認是1.0,可是codepush須要三位數)。

 
  1. android{
  2. defaultConfig{
  3. versionName "1.0.0"
  4. }
  5. }

至此Code Push for Android的SDK已經集成完成。

iOS

CodePush官方提供RNPM、CocoaPods與手動三種在iOS項目中集成CodePush的方式,接下來我就以RNPM的方式來說解一下如何在iOS項目中集成CodePush。

第一步:在項目中安裝react-native-code-push插件,終端進入你的項目根目錄而後運行

 
  1. npm install --save react-native-code-push
npm install --save react-native-code-push

第二步: 運行 rnpm link react-native-code-push。這條命令將會自動幫咱們在ios中添加好設置。

在終端運行此命令以後,終端會提示讓你輸入deployment key,這是你只需將你的deployment Staging key輸入進去便可,若是不輸入則直接單擊enter跳過便可。

關於deployment-key的設置

在咱們想CodePush註冊App的時候,CodePush會給咱們兩個deployment-key分別是在生產環境與測試環境時使用的,咱們能夠經過以下步驟來設置deployment-key。

----------------------

先講一下Xcode配置相關知識


配置分爲Project和Target,一個Project能夠包含多個Target,每一個Target能夠定義不一樣的配置,也就是Project的配置整個項目通用,Target的配置優先級較高,是集成自Project 

例如:公司有兩套環境 測試test 和 線上prod,那麼我能夠定義兩個 superbuy-test 、superbuy-prod (這是一種解決方案固然還有其餘的作法,例如預編譯宏 BETA 等...)

rnpm link以後code-push-key配置在了Info.plist文件中(Info.plist至關於Android中的清單文件AndroidMainFest.xml)

如何讓code-push-key自動區分測試環境仍是正式環境能? 

Xcode中 User Defined 登場

User Defined 是一個Xcode中十分強大而不常使用的功能,它可以配置一些你在Interface Builder 中不能配置的屬性,進而很大程度上提升開發效率。在項目中使用User Defined Setting能夠定義一些Xcode編譯使用的宏配置,爲了實現App的一些常量或屬性值在不一樣運行環境下配置不一樣,能夠在User Defined Setting中定義一些有關應用程序的配置。 

問題來了:是配置在Project中仍是Target中?

答案是均可以,其實你copy一個target,會生成兩個Info.plist文件,因此我選擇配置在target中

 

---------------------- 

1.用Xcode 打開項目 ➜ Xcode的項目導航視圖中的PROJECT下選擇你的Target ➜

選擇Build Settings頁籤 ➜ 單擊 + 按鈕而後選擇添加User-Defined Setting


 

添加User-Defined-Setting

2.而後輸入CODE_PUSH_KEY(名稱能夠自定義)


設置    Staging deployment key

提示:你能夠經過code-push deployment ls -k <APP_NAME> -k命令來查看deployment key。

3.打開 Info.plist文件,在CodePushDeploymentKey列的Value中輸入$(CODE_PUSH_KEY)

引用CODEPUSH_KEY 

 

4.AppDelegate設置jsLocationPath,因爲是兼容pushy和code-push,因此兩種熱更新方式能夠切換

怎麼切換?添加預編譯宏 


配置 IS_CODE_PUSH=1

but 編譯失敗


有兩個文件同樣的命名,由於Objective-C一直沒有Java中Package的概念,因此對於命名空間開發者都很無奈,都是經過加前綴來區別保證不一樣名

這是因爲Pushy和code-push都引用到了SSZipArchive(三方解壓神器SSZipArchive


使用CodePush進行熱更新

App Store/Play Store審覈政策

雖然Google Play和內部分佈式應用程序(例如Enterprise,Fabric,HockeyApp)對如何使用CodePush發佈更新沒有限制,但iOS App Store及其相應的指南在您將解決方案集成到您的內容以前,應該注意更準確的規則。應用。

3.3.2段,自2015年以來,Apple開發者計劃許可協議徹底容許對JavaScript和資產進行無線更新 - 在此處可下載的最新版本(20170605)中這一裁決更爲普遍:

解釋的代碼能夠下載到應用程序,但只要這樣的代碼:(a)不會經過提供與提交給App的應用程序的預期和廣告目的不一致的特性或功能來改變應用程序的主要目的。存儲,(b)不爲其餘代碼或應用程序建立商店或店面,而且(c)不繞過操做系統的簽名,沙箱或其餘安全功能。

CodePush容許您徹底聽從這些規則,只要您推送的更新不會使您的產品與其原始App Store批准的意圖明顯不一樣。

爲了進一步遵照Apple的指導原則,咱們建議App Store分發的應用程序updateDialog在調用時不啓用該選項sync,由於在App Store Review Guidelines中,它寫成:

應用不得強制用戶對應用評分,審覈應用,下載其餘應用或其餘相似操做,以便訪問應用的功能,內容或使用。

這不必定是這種狀況updateDialog,由於它不會強迫用戶下載新版本,但至少若是你決定展現它,你應該知道這個裁決。

設置更新策略

在使用CodePush更新你的應用以前須要,先配置一下更新控制策略,即:

  • 何時檢查更新?(在APP啓動的時候?在設置頁面添加一個檢查更新按鈕?)
  • 何時能夠更新,如何將更新呈現給終端用戶?

最簡單的方式是在根component中進行上述策略控制。

  1. 在 js中加載 CodePush模塊:import codePush from 'react-native-code-push' 
  2. 在 componentDidMount中調用 sync方法,後臺請求更新 codePush.sync()
// 第一種:
codePush.sync();

// 第二種:
codePush.sync({
    updateDialog: false,
    installMode: codePush.InstallMode.IMMEDIATE
});

// 第三種:
CodePush.sync({
    deploymentKey: 'deployment-key-here',
    updateDialog: {
        optionalIgnoreButtonLabel: '稍後',
        optionalInstallButtonLabel: '後臺更新',
        optionalUpdateMessage: '有新版本了,是否更新?',
        title: '更新提示'
    },
    installMode: CodePush.InstallMode.IMMEDIATE
});
  • 三種更新的策略: 配置到installMode: 以後便可生效

    • IMMEDIATE 當即更新APP

    • ON_NEXT_RESTART 到下一次啓動應用時

    • ON_NEXT_RESUME 當應用從後臺返回時 

若是能夠進行更新,CodePush會在後臺靜默地將更新下載到本地,等待APP下一次啓動的時候應用更新,以確保用戶看到的是最新版本。

若是更新是強制性的,更新文件下載好以後會當即進行更新。
若是你指望更及時的得到更新,能夠在每次APP從後臺進入前臺的時候去主動的檢查更新:
在應用的根component的componentDidMount中添加以下代碼:

 
  1. AppState.addEventListener("change", (newState) => {
  2. newState === "active" && codePush.sync();
  3. });
AppState.addEventListener("change", (newState) => {newState === "active" && codePush.sync();});

發佈更新

CodePush支持兩種發佈更新的方式,一種是經過code-push release-react簡化方式,另一種是經過code-push release的複雜方式。

第一種方式:經過code-push release-react發佈更新

這種方式將打包與發佈兩個命令合二爲一,能夠說大大簡化了咱們的操做流程,建議你們多使用這種方式來發布更新。

命令格式:

code-push release-react <appName> <platform>

eg:

 
  1. code- push release-react MyApp-iOS ios
  2. code- push release-react MyApp-Android android

再來個更高級的:

code-push release-react MyApp-iOS ios  --t 1.0.0 --dev false --d Production --des "1.優化操做流程" --m true

其中參數--t爲二進制(.ipa與apk)安裝包的的版本;--dev爲是否啓用開發者模式(默認爲false);--d是要發佈更新的環境分Production與Staging(默認爲Staging);--des爲更新說明;--m 是強制更新。

關於code-push release-react更多可選的參數,能夠在終端輸入code-push release-react進行查看。

release-react經常使用命令

# Release a mandatory update with a changelog 強制更新包
code-push release-react MyApp-iOS ios -m --description "Modified the header color"

# Release an update for an app that uses a non-standard entry file name, and also capture
# the sourcemap file generated by react-native bundle
code-push release-react MyApp-iOS ios --entryFile MyApp.js --sourcemapOutput ../maps/MyApp.map

# Release a dev Android build to just 1/4 of your end users 灰度測試覆蓋25%的用戶
code-push release-react MyApp-Android android --rollout 25% --dev true

# Release an update that targets users running any 1.1.* binary Android版本在1.1.*的用戶會獲得更新,其餘的版本不會更新
code-push release-react MyApp-Android android --targetBinaryVersion "~1.1.0"

CodePush客戶端支持差別更新,所以即便您在每次更新時發佈JS包和資源,您的最終用戶也只會實際下載所需的文件。

有關release-react命令如何工做的更多詳細信息,以及它公開的各類參數,請參閱CLI文檔。此外,若是您但願本身處理react-native bundle命令,所以須要更靈活的解決方案release-react,請參閱release命令以獲取更多詳細信息。

 

另外,咱們能夠經過code-push deployment ls <appName>來查看發佈詳情與這次更新的安裝狀況。

第二中方式:經過code-push release發佈更新

code-push release發佈更新呢咱們首先須要將js與圖片資源進行打包成 bundle。

生成bundle

發佈更新以前,須要先把 js打包成 bundle,如:

第一步: 在 工程目錄裏面新增 bundles文件:mkdir bundles

第二步: 運行命令打包 react-native bundle --platform 平臺 --entry-file 啓動文件 --bundle-output 打包js輸出文件 --assets-dest 資源輸出目錄 --dev 是否調試
eg:
react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false

            生成bundle
           生成bundle

須要注意的是:

  • 忽略了資源輸出是由於 輸出資源文件後,會把bundle文件覆蓋了。
  • 輸出的bundle文件名不叫其餘,而是 index.android.bundle,是由於 在debug模式下,工程讀取的bundle就是叫作 index.android.bundle。
  • 平臺能夠選擇 android 或者 ios。

發佈更新

打包bundle結束後,就能夠經過CodePush發佈更新了。在終端輸入
code-push release <應用名稱> <Bundles所在目錄> <對應的應用版本> --deploymentName: 更新環境 --description: 更新描述 --mandatory: 是否強制更新 
eg:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.支持文章緩存。" --mandatory true

 推送更新到CodePush

 推 .     送更新到CodePush  

 

注意:

  1. CodePush默認是更新 staging 環境的,若是是staging,則不須要填寫 deploymentName。
  2. 若是有 mandatory 則Code Push會根據mandatory 是true或false來控制應用是否強制更新。默認狀況下mandatory爲false即不強制更新。
  3. 對應的應用版本(targetBinaryVersion)是指當前app的版本(對應build.gradle中設置的versionName "1.0.6"),也就是說這次更新的js/images對應的是app的那個版本。不要將其理解爲此次js更新的版本。
    如客戶端版本是 1.0.6,那麼咱們對1.0.6的客戶端更新js/images,targetBinaryVersion填的就是1.0.6。
  4. 對於對某個應用版本進行屢次更新的狀況,CodePush會檢查每次上傳的 bundle,若是在該版本下如1.0.6已經存在與此次上傳徹底同樣的bundle(對應一個版本有兩個bundle的md5徹底同樣),那麼CodePush會拒絕這次更新。
    如圖:
    對應一個版本有兩個bundle的md5徹底同樣
    對應一個版本有兩個bundle的md5徹底同樣

因此若是咱們要對某一個應用版本進行屢次更新,只須要上傳與上次不一樣的bundle/images便可。如:
eg:
對1.0.6的版本進行第一次更新:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.支持文章緩存。" --mandatory true 
對1.0.6的版本進行第二次更新:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.新添加收藏功能。" --mandatory true

  1. 在終端輸入 code-push deployment history <appName> Staging 能夠看到Staging版本更新的時間、描述等等屬性。
    eg:
    code-push release Equipment ./bundles 1.0.1

下面咱們啓動事先安裝好的應用,看有什麼反應:

            提示更新
           提示更新

應用啓動以後,從CodePush服務器查詢更新,並下載到本地,下載好以後,提示用戶進行更新。這就是CodePush用於熱更新的整個過程。

更多部署APP相關命令

  • code-push deployment add <appName> 部署
  • code-push deployment rename <appName> 重命名
  • code-push deployment rm <appName> 刪除部署
  • code-push deployment ls <appName> 列出應用的部署狀況
  • code-push deployment ls <appName> -k 查看部署的key
  • code-push deployment history <appName> <deploymentNmae> 查看歷史版本(Production 或者 Staging)

調試/故障排除

查看這些日誌的最簡單方法是運行code-push debug您當前使用的特定平臺的命令(例如code-push debug ios)。這將輸出一個日誌流,該日誌流將被過濾爲指定平臺的CodePush消息。這樣能夠輕鬆識別問題,無需使用特定於平臺的工具,也能夠輕鬆瀏覽大量日誌。

屏幕截圖2016-06-21在10 15 42 am

此外,若是您對它們更熟悉,您還可使用任何特定於平臺的工具來查看CodePush日誌。簡單啓動Chrome DevTools控制檯,Xcode控制檯(iOS),OS X控制檯(iOS)和/或ADB logcat(Android),並查找帶有前綴的消息[CodePush]

請注意,默認狀況下,在發佈版本中iOS上禁用了React Native日誌,所以若是要在發佈版本中查看它們,則須要對AppDelegate.m文件進行如下更改:

  1. 添加一個#import <React/RCTLog.h>聲明。對於RN <v0.40,請使用:#import "RCTLog.h"

  2. 將如下語句添加到application:didFinishLaunchingWithOptions方法的頂部:

    RCTSetLogThreshold(RCTLogLevelInfo);

JavaScript API Reference

  • allowRestart
  • checkForUpdate
  • disallowRestart
  • getUpdateMetadata
  • notifyAppReady
  • restartApp
  • sync

其實咱們能夠將這些API分爲兩類,一類是自動模式,一類是手動模式。

自動模式

sync爲自動模式,調用此方法CodePush會幫你完成一系列的操做。其它方法都是在手動模式下使用的。
codePush.sync 
codePush.sync(options: Object, syncStatusChangeCallback: function(syncStatus: Number), downloadProgressCallback: function(progress: DownloadProgress)): Promise<Number>; 
經過調用該方法CodePush會幫咱們自動完成檢查更新,下載,安裝等一系列操做。除非咱們須要自定義UI表現,否則直接用這個方法就能夠了。
sync方法,提供了以下屬性以容許你定製sync方法的默認行爲

  • deploymentKey (String): 部署key,指定你要查詢更新的部署祕鑰,默認狀況下該值來自於Info.plist(Ios)和MianActivity.java(Android)文件,你能夠經過設置該屬性來動態查詢不一樣部署key下的更新。
  • installMode (codePush.InstallMode): 安裝模式,用在向CodePush推送更新時沒有設置強制更新(mandatory爲true)的狀況下,默認codePush.InstallMode.ON_NEXT_RESTART即下一次啓動的時候安裝。
  • mandatoryInstallMode (codePush.InstallMode):強制更新,默認codePush.InstallMode.IMMEDIATE。
  • minimumBackgroundDuration (Number):該屬性用於指定app處於後臺多少秒才進行重啓已完成更新。默認爲0。該屬性只在installModeInstallMode.ON_NEXT_RESUME狀況下有效。
  • updateDialog (UpdateDialogOptions) :可選的,更新的對話框,默認是null,包含如下屬性
    • appendReleaseDescription (Boolean) - 是否顯示更新description,默認false
    • descriptionPrefix (String) - 更新說明的前綴。 默認是」 Description: 「
    • mandatoryContinueButtonLabel (String) - 強制更新的按鈕文字. 默認 to 「Continue」.
    • mandatoryUpdateMessage (String) - 強制更新時,更新通知. Defaults to 「An update is available that must be installed.」.
    • optionalIgnoreButtonLabel (String) - 非強制更新時,取消按鈕文字. Defaults to 「Ignore」.
    • optionalInstallButtonLabel (String) - 非強制更新時,確認文字. Defaults to 「Install」.
    • optionalUpdateMessage (String) - 非強制更新時,更新通知. Defaults to 「An update is available. Would you like to install it?」.
    • title (String) - 要顯示的更新通知的標題. Defaults to 「Update available」

手動模式

codePush.allowRestart

codePush.allowRestart(): void; 
容許從新啓動應用以完成更新。
若是一個CodePush更新將要發生而且須要重啓應用(e.g.設置了InstallMode.IMMEDIATE模式),但因爲調用了disallowRestart方法而致使APP沒法經過重啓來完成更新,
能夠調用此方法來解除disallowRestart限制。
但在以下四種狀況下,CodePush將不會當即重啓應用:

  1. 自上一次disallowRestart被調用,沒有新的更新。
  2. 有更新,但installModeInstallMode.ON_NEXT_RESTART的狀況下。
  3. 有更新,但installModeInstallMode.ON_NEXT_RESUME,而且程序一直處於前臺,並無從後臺切換到前臺的狀況下。
  4. 自從上次disallowRestart被調用,沒有再調用restartApp

codePush.checkForUpdate

codePush.checkForUpdate(deploymentKey: String = null): Promise<RemotePackage>; 
向CodePush服務器查詢是否有更新。
該方法返回Promise,有以下兩種值:

  • null 沒有更新
    一般有以下狀況致使RemotePackage爲null:

    1. 當前APP版本下沒有部署新的更新版本。也就是說沒有想CodePush服務器推送基於當前版本的有關更新。
    2. CodePush上的更新和用戶當前所安裝的APP版本不匹配。也就是說CodePush服務器上有更新,但該更新對應的APP版本和用戶安裝的當前版本不對應。
    3. 當前APP已將安裝了最新的更新。
    4. 部署在CodePush上可用於當前APP版本的更新被標記成了不可用。
    5. 部署在CodePush上可用於當前APP版本的更新是"active rollout"狀態,而且當前的設備不在有資格更新的百分比的設備以內。
  • A RemotePackage instance
    有更新可供下載。

eg:

 
  1. codePush.checkForUpdate()
  2. .then((update) => {
  3. if (!update) {
  4. console.log("The app is up to date!");
  5. } else {
  6. console.log("An update is available! Should we download it?");
  7. }
  8. });
codePush.checkForUpdate().then((update) => {if (!update) {console.log("The app is up to date!");} else {console.log("An update is available! Should we download it?");}});

codePush.disallowRestart

codePush.disallowRestart(): void; 
不容許當即重啓用於以完成更新。
eg:

 
  1. class OnboardingProcess extends Component {
  2. ...
  3. componentWillMount() {
  4. // Ensure that any CodePush updates which are
  5. // synchronized in the background can't trigger
  6. // a restart while this component is mounted.
  7. codePush.disallowRestart();
  8. }
  9. componentWillUnmount() {
  10. // Reallow restarts, and optionally trigger
  11. // a restart if one was currently pending.
  12. codePush.allowRestart();
  13. }
  14. ...
  15. }
class OnboardingProcess extends Component {...componentWillMount() {// Ensure that any CodePush updates which are// synchronized in the background can't trigger// a restart while this component is mounted.codePush.disallowRestart();}componentWillUnmount() {// Reallow restarts, and optionally trigger// a restart if one was currently pending.codePush.allowRestart();}...}

codePush.getUpdateMetadata 
codePush.getUpdateMetadata(updateState: UpdateState = UpdateState.RUNNING): Promise<LocalPackage>; 
獲取當前已安裝更新的元數據(描述、安裝時間、大小等)。
eg:

 
  1. // Check if there is currently a CodePush update running, and if
  2. // so, register it with the HockeyApp SDK (https://github.com/slowpath/react-native-hockeyapp)
  3. // so that crash reports will correctly display the JS bundle version the user was running.
  4. codePush.getUpdateMetadata().then((update) => {
  5. if (update) {
  6. hockeyApp.addMetadata({ CodePushRelease: update.label });
  7. }
  8. });
  9. // Check to see if there is still an update pending.
  10. codePush.getUpdateMetadata(UpdateState.PENDING).then((update) => {
  11. if (update) {
  12. // There's a pending update, do we want to force a restart?
  13. }
  14. });
// Check if there is currently a CodePush update running, and if// so, register it with the HockeyApp SDK (https://github.com/slowpath/react-native-hockeyapp)// so that crash reports will correctly display the JS bundle version the user was running.codePush.getUpdateMetadata().then((update) => {if (update) {hockeyApp.addMetadata({ CodePushRelease: update.label });}});// Check to see if there is still an update pending.codePush.getUpdateMetadata(UpdateState.PENDING).then((update) => {if (update) {// There's a pending update, do we want to force a restart?}});

codePush.notifyAppReady 
codePush.notifyAppReady(): Promise<void>; 
通知CodePush,一個更新安裝好了。當你檢查並安裝更新,(好比沒有使用sync方法去handle的時候),這個方法必須被調用。不然CodePush會認爲update失敗,並rollback當前版本,在app重啓時。
當使用sync方法時,不須要調用本方法,由於sync會自動調用。

codePush.restartApp 
codePush.restartApp(onlyIfUpdateIsPending: Boolean = false): void; 
當即重啓app。
當如下狀況時,這個方式是頗有用的:

  1. app 當 調用 sync 或 LocalPackage.install 方法時,指定的 install mode是 ON_NEXT_RESTART 或 ON_NEXT_RESUME時 。 這兩種狀況都是當app重啓或resume時,更新內容才能被看到。
  2. 在特定狀況下,如用戶從其它頁面返回到APP的首頁時,這個時候調用此方法完成過更新對用戶來講不是特別的明顯。由於強制重啓,能立刻顯示更新內容。

代碼簽名

代碼簽名是一種爲​​捆綁建立數字簽名的方法,之後能夠在安裝以前在客戶端進行驗證。

開發人員想知道他們發佈的代碼是他們編寫的代碼。代碼簽名是提供此類保證的主要機制,能夠幫助減輕或消除一大類中間人攻擊。

首先,開發人員生成一個非對稱密鑰對:私鑰將用於簽署捆綁包; 捆綁簽名驗證的公鑰。該CodePush CLI而後使用私鑰簽名過程當中捆綁releaserelease-reactrelease-cordova命令。公鑰隨移動應用程序一塊兒提供。控制密鑰的生成和管理掌握在開發人員手中。

在release命令結束時,cli計算bundle的內容哈希並將此值放入使用私鑰簽名的JWT中。當codepush插件將包下載到設備時,它會檢查.codepushrelease包含JWT 文件,並使用公鑰驗證JWT簽名。若是驗證失敗,則不會安裝更新。

密鑰生成

代碼簽名支持用於簽名的PEM編碼的RSA密鑰(非證書)。您能夠經過openssl生成它們,以下所示:

生成私有RSA密鑰並將其寫入private.pem文件 
openssl genrsa -out private.pem  
將private.pem中的公鑰導出到public.pem  
openssl rsa -pubout -in private.pem -out public.pem

 

操做步驟:

  1. 生成新的二進制更新,包括
    • 更新的codepush插件支持代碼簽名
    • 配置你的代碼推送sdk使用你的公鑰(請參閱相關的React Native SDK(iOS, Android)或Cordova SDK部分了解詳情)
  2. 生成一個新的CodePush更新,該更新以新的二進制版本爲目標並指定--privateKeyPath(或簡稱-k)參數值

eg:

code-push release-react superbuy-android android  --t 1.0.0 --des "test android code-push,帶有公鑰簽名的更新包要加上參數-privateKeyPath指定私鑰路徑"  -k ./private.pem 

-----------------------------

關於代碼簽名常見錯誤 


這是由於發佈更新時沒有指定-k參數,私鑰位置

code-push release-react superbuy-android android  --t 1.0.0 --des "test android code-push,帶有公鑰簽名的更新包要加上參數-privateKeyPath指定私鑰路徑" -k ./private.pem 

 

總結

上文已經介紹了CodePush在動態更新方面的一些特性,但CodePush也存在着一些缺點:

  1. 服務器在國外,在國內訪問,網速不是很理想。
  2. 其升級服務器端程序並不開源的,後期微軟會不會對其收費仍是個未知數。
    若是在沒有更好的動態更新React Native應用的方案的狀況下,而且這些問題還在你的接受範圍以內的話,那麼CodePush能夠做爲動態更新React Native應用的一種選擇。
    後期會向你們分享不採用CodePush,本身搭建服務器並實現React Native應用的動態更新相關的方案。

------------------ 

code-push經常使用命令 

  • 安裝: npm install -g code-push-cli

  • 註冊帳號: code-push register

  • 登錄: code-push login

  • 註銷: code-push logout

  • 添加項目: code-push app add [app名稱]

  • 刪除項目: code-push app remove [app名稱]

  • 列出帳號下的全部項目: code-push app list

  • 顯示登錄的token: code-push access-key ls

  • 刪除某個access-key: code-push access-key rm <accessKey>

  • 添加協做人員:code-push collaborator add <appName> next@126.com

  • 部署一個環境: code-push deployment add <appName> <deploymentName>

  • 刪除部署: code-push deployment rm <appName>

  • 列出應用的部署: code-push deployment ls <appName>

  • 查詢部署環境的key: code-push deployment ls <appName> -k

  • 查看部署的歷史版本信息: code-push deployment history <appName> <deploymentName>

  • 重命名一個部署: code-push deployment rename <appName> <currentDeploymentName> <newDeploymentName>

---------------

 實際發佈更新時經常使用操做步驟

  • 登陸: code-push login

  • 列出帳號下的全部項目: code-push app list

  • 列出應用的部署: code-push deployment ls MyApp

  • 查看部署的歷史版本信息: code-push deployment history MyApp Staging 

  • 發佈版本更新: code-push release-react MyApp ios -d Staging --des 'UI調整' --t '1.0.0'

  • 把更新推到另外一個環境: code-push promote MyApp Staging Production

--------------- 

參考: 
https://docs.microsoft.com/en-us/appcenter/distribution/codepush/
https://github.com/Microsoft/react-native-code-push

相關文章
相關標籤/搜索