React Native之code-push的熱更新(ios android)

React Native支持大家用React Native技術開發APP，並打包生成一個APP。在動態更新方面React Native只是提供了動態更新的基礎，對將應用部署到哪里，如何進行動態更新並沒有支持的那么完善。好在微軟開發了CodePush，填補React Native 應用在動態更新方面的空白。CodePush 是微軟提供的一套用於熱更新 React Native 和 Cordova 應用的服務。下面將向大家分享如何使用CodePush實時更新你的應用。

一,CodePush簡介

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

CodePush 可以進行實時的推送代碼更新：

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

CodePush開源了react-native版本，react-native-code-push托管在GitHub上。

二,安裝與注冊CodePush

2.1,安裝 CodePush CLI

在終端輸入如下：

npm install -g code-push-cli

 code-push -v //查看版本 

2.2,創建一個CodePush 賬號

code-push register

在終端輸入code-push register，會打開注冊頁面讓你選擇授權賬號。授權通過之后，CodePush會告訴你“access key”，復制此key到終端即可完成注冊。 https://appcenter.ms/

三,集成CodePush SDK

第一步：在項目中安裝 react-native-code-push插件，終端進入你的項目根目錄然后運行

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

3.1,Android集成SDK

第二步： 運行 npm link react-native-code-push。這條命令將會自動幫我們在anroid文件中添加好設置

第三步： 在 android/app/build.gradle文件里面添如下代碼：

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

如果第二步沒有成功，則手動配置

...
dependencies {
...
    implementation project(':react-native-code-push')
 ...
}
...

在/android/settings.gradle中添加如下代碼:

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

 

在/android/app/src/com/.../.../MainApplication.java中添加如下代碼:

...
import com.microsoft.codepush.react.CodePush;

...

  @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

...

   @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
               ...
                new CodePush(CODEPUSH_KEY_STAGING, getApplicationContext(), BuildConfig.DEBUG)
            );
        }
...

第四步: 運行 code-push deployment -k ls <appName>獲取 部署秘鑰。默認的部署名是 staging，所以 部署秘鑰（deployment key ） 就是 staging。

第五步： 添加配置。當APP啟動時我們需要讓app向CodePush咨詢JS bundle的所在位置，這樣CodePush就可以控制版本。更新 MainApplication.java文件：

public class MainApplication extends MultiDexApplication implements ReactApplication {

    private final String CODEPUSH_KEY_PRODUCTIO = "ZaHJQhSDR7XVGMMjzbQnc686dbac";
    private final String CODEPUSH_KEY_STAGING = "wiIxKA1Hp7g3Tb5Phytc686dbac-";
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {



        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

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

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new CodePush(CODEPUSH_KEY_STAGING, getApplicationContext(), BuildConfig.DEBUG)
            );
        }

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

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

}

第六步：修改versionName。
在 android/app/build.gradle中有個 android.defaultConfig.versionName屬性，我們需要把 應用版本改成 0.0.1（默認是1.0，但是codepush需要三位數）。

android{
    defaultConfig{
        versionName "0.0.1"
    }

3.2,iOS集成

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

在終端運行此命令之后，終端會提示讓你輸入deployment key，這是你只需將你的deployment Staging key輸入進去即可，如果不輸入則直接單擊enter跳過即可。

如果第二部沒有成功則手動link 。

1,首先在node_modules 中找到這個codepush 文件，然后拖進去如下圖

 

 

2,特別注意一點由於這個庫需要一個link 一個靜態庫（libz）如下圖所示

3,添加codepush的頭文件路徑，在 header Search Paths 中添加這句

$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush

 

第三步： 在build Settings頁簽中單擊 + 按鈕然后選擇添加User-Defined Setting，然后輸入CODEPUSH_KEY(名稱隨意)，然后填入deployment key：

 

第四步：打開 Info.plist文件，在CodePushDeploymentKey中輸入$(CODEPUSH_KEY)，並修改Bundle versions為三位

 

四,使用CodePush

4.1,codepush常用命令

1. 安裝 CodePush CLI: npm install -g code-push-cli
2. 創建一個CodePush 賬號: code-push register
3. 登陸：code-push login
4. 注銷：code-push loout
5. 列出登陸的token: code-push access-key ls
6. 刪除某個 access-key: code-push access-key rm <accessKye>
7. 創建一個app： code-push app add <appName> <os> <platform> 其中os為ios或android，platform為react-native
8. 在賬號里移除一個 app:code-push app remove 或者 rm
9. 重命名一個存在 app: code-push app rename
10. 列出賬號下面的所有 app: code-push app list 或則 ls
11. 把app的所有權轉移到另外一個賬號:code-push app transfer
12. 直接使用下面的命令查到對應應用的deployment key: code-push deployment ls <appName> -k
13. 部署:code-push deployment add <appName>
14. 重命名:code-push deployment rename <appName>
15. 刪除部署:code-push deployment rm <appName>
16. 列出應用的部署情況:code-push deployment ls <appName>
17. 查看部署的key:code-push deployment ls <appName> -k
18. 查看歷史版本:code-push deployment history <appName> <deploymentNmae> (Production 或者 Staging)
19. 發布熱更新：code-push release-react <appName> <os> --description "1.描述"
20. 發布熱更新:code-push release-react <appName> <os> -t 版本 -d 環境 --des 描述 -m true （強制更新）
21. 刪除部署：code-push deployment rm <appName> <deploymentNmae> deploymentNmae(Production 或者 Staging)
22. 清除歷史部署記錄 code-push deployment clear <appName> Production or Staging
23. 回滾 code-push rollback <appName> Production --targetRelease v4(codepush服務部署的版本號)

4.2,更新方式

1、首先最簡單的一種就是  這種無聲的熱更新，也就是說熱更新不會給用戶任何提示，都在默默的進行更新，用戶完全體會不到整個過程

classMyAppextendsComponent<{}> {}

MyApp= codePush(MyApp);

exportdefaultMyApp;

2、第二種 也是無聲更新，比第一種情況多了一種就是熱更新每次會在后台返回前台的時候進行熱更新。這里可以看到幾個參數，

checkFrequency有三種狀態如下

ON_APP_START：  //在組件初始化的時候進行熱更新

ON_APP_RESUME：//在每次app從后台回到前台的時候進行熱更新

MANUAL：//不進行熱更新，需要自己手動配置

InstallMode 有如下幾種狀態

IMMEDIATE  ：// 安裝熱更新，並且重啟app

ON_NEXT_RESTART：  //下次啟動的時候啟動熱更新

ON_NEXT_RESUME  //從后台回到前台的時候啟動

ON_NEXT_SUSPEND：  在后台的時候進行熱更新

classMyAppextendsComponent<{}> {}

MyApp= codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME})(MyApp);

exportdefaultMyApp;

updateDialog  當為true 是，可以在更新的時候提示用戶需要更新

4.3,codepush使用

1,登陸成功后，使用code-push app add <appName> <os> <platform>創建一個app,如下:

code-push app add Test-ios ios react-native

創建成功后會返回對應的deployment key，將其拷貝到對應的配置文件即可

iOS：

Android:

...

import java.util.Arrays;
import java.util.List;


public class MainApplication extends MultiDexApplication implements ReactApplication {

    private final String CODEPUSH_KEY_PRODUCTIO = "CuEhrwd_ZaHJ";
    private final String CODEPUSH_KEY_STAGING = "XoFT5uAm_wiI";
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

...

2,配置js

 CodePush.sync({
            updateDialog: {
                //是否顯示更新描述
                appendReleaseDescription : true ,
                //更新描述的前綴。 默認為"Description"
                descriptionPrefix : '' ,
                mandatoryUpdateMessage: '',
                //強制更新按鈕文字，默認為continue
                mandatoryContinueButtonLabel : '立即更新' ,
                //非強制更新時，按鈕文字,默認為"ignore"
                optionalIgnoreButtonLabel : '稍后',
                //非強制更新時，確認按鈕文字. 默認為"Install"
                optionalInstallButtonLabel : '后台更新',
                //非強制更新時，檢查到更新的消息文本
                optionalUpdateMessage : ' ' ,
                //Alert窗口的標題
                title : '更新提示'
            },
            mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,
            deploymentKey: CODE_PUSH_STAGING,
        },(status) => {
            switch (status) {
                case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
                    //alert(CodePush.SyncStatus.CHECKING_FOR_UPDATE);
                    break;
                // case CodePush.SyncStatus.AWAITING_USER_ACTION:
                //     alert('codePush.SyncStatus.AWAITING_USER_ACTION');
                //     break;
                case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
                    //應用更新中，請稍后...
                    break;
                case CodePush.SyncStatus.INSTALLING_UPDATE:
                    CodePush.allowRestart();
                    break;
                case CodePush.SyncStatus.UP_TO_DATE:
                   //當前已是最新版本
                    break;
                // case CodePush.SyncStatus.UPDATE_IGNORED:
                //     alert('codePush.SyncStatus.UPDATE_IGNORED');
                //     break;
                // case CodePush.SyncStatus.UPDATE_INSTALLED:
                //     alert('codePush.SyncStatus.UPDATE_INSTALLED');
                //     break;
                // case CodePush.SyncStatus.SYNC_IN_PROGRESS:
                //     alert('codePush.SyncStatus.SYNC_IN_PROGRESS');
                //     break;
                // case CodePush.SyncStatus.UNKNOWN_ERROR:
                //     alert('codePush.SyncStatus.UNKNOWN_ERROR');
                //break;
            }
        },

五,發布更新

code-push release-react <appName> <os> --description "1.描述"

code-push release-react Test-ios ios --description "1.測試熱更新"

code-push release-react Test-android android --description "1.測試熱更新"

以下發布更新需手動打包：

code-push release <應用名稱> <Bundles所在目錄> <對應的應用版本> --deploymentName： 更新環境 --description： 更新描述 --mandatory： 是否強制更新 

react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/index.ios.bundle --dev false

code-push release Test-ios ./bundles/index.ios.bundle 1.0.0 --description "1.測試熱更新" --mandatory false