Code-Push

官方文檔: https://github.com/Microsoft/react-native-code-push#getting-started

它能干什么 ?

React Native的應(yīng)用是由 JavaScript文件與資源文件及原生代碼組成.
Code-Push 插件能幫助終端用戶(hù)更新JavaScript文件與圖片資源.
當(dāng)發(fā)布一個(gè)React Native的新版本時(shí),Code-Push會(huì)保存你上個(gè)版本發(fā)布的文件,當(dāng)你應(yīng)用出現(xiàn)崩潰時(shí),Code-Push幫你回滾到上個(gè)版本,而不會(huì)變成空白頁(yè)面.

但是,當(dāng)原生代碼發(fā)生改變時(shí),Code-Push就無(wú)能為力了,你只能通過(guò)應(yīng)用市場(chǎng)去更新應(yīng)用.(Android端可以自己下載apk進(jìn)行安裝)

配置準(zhǔn)備步驟

安裝Code-Push的命令行工具:

npm install -g code-push-cli

如果沒(méi)有注冊(cè)過(guò)Code-Push,則需要使用code-push register 進(jìn)行注冊(cè)

注冊(cè)過(guò)則需要使用code-push login進(jìn)行登錄

最后注冊(cè) APP 到 Code-Push服務(wù)器:

code-push app add <appName>

開(kāi)始配置

進(jìn)入App根目錄,運(yùn)行一下命令:

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

配置Android

有兩種方法可實(shí)現(xiàn)配置,一種是通過(guò)命名行,另外一種是手動(dòng).

命令行配置(推薦使用)

• 如果是第一次進(jìn)行配置,則需要先使用 npm i -g rnpm 進(jìn)行安裝.
• 運(yùn)行命令行 rnpm link react-native-code-push.
• 當(dāng)遇到需要輸入deploymentKey時(shí),按<ENTRY>先省略這一步.

手動(dòng)配置

1. 在android/settings.gradle文件中添加如下:

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

2. 在android/app/build.gradle添加Code-Push的依賴(lài)

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

3. 在android/app/build.gradle添加codepush.gradle 任務(wù)

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

代碼配置

在配置代碼中,需要使用到deploymentKey,這個(gè)key 是標(biāo)志應(yīng)用的身份及環(huán)境的,可通過(guò)以下命令查看:

code-push deployment ls <appName>  -k

如果之前的都配置正確,那這里可以看到Production與Staging的Deployment Key,將這兩個(gè)key粘貼下來(lái).如果環(huán)境來(lái)決定需要用到哪個(gè)key.
在剛開(kāi)始,肯定需要測(cè)試,那就將Staging對(duì)應(yīng)的Deployment Key,替換到下面deployment-key-here的代碼中.

原生Android 代碼配置:

...

import com.microsoft.codepush.react.CodePush;

public class MainActivity extends ReactActivity {

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

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new CodePush("deployment-key-here", this, BuildConfig.DEBUG)
        );
    }

    ...
}

Code-Push 的使用

JS配置

import CodePush from 'react-native-code-push';
...
    componentWillMount() {
        //訪(fǎng)問(wèn)慢,不穩(wěn)定
        CodePush.checkForUpdate('deployment-key-here').then((update)=>{
            if(!update){
                Alert.alert("提示","已是最新版本--",[
                    {text:"Ok", onPress:()=>{
                        console.log("點(diǎn)了OK");
                    }}
                ]);
            }
            else{
                CodePush.sync({
                    deploymentKey: 'deployment-key-here',
                    updateDialog: {
                        optionalIgnoreButtonLabel: '稍后',
                        optionalInstallButtonLabel: '后臺(tái)更新',
                        optionalUpdateMessage: '有新版本了，是否更新？',
                        title: '更新提示'
                    },
                    installMode: CodePush.InstallMode.IMMEDIATE
                });
            }
        });
    }
...

方法

• CodePush.checkForUpdate 檢查更新的信息
• CodePush.sync 下載更新

在使用Code-Push更新功能時(shí),需要先考慮兩個(gè)問(wèn)題:

何時(shí)去檢查是否有新版本

一般都是在應(yīng)用開(kāi)啟時(shí)去檢查,可以將檢查的代碼放到`componentDidMount`或者`componentWillMount`方法中. 如果你想更及時(shí)的檢查,時(shí)機(jī)可以選在 `當(dāng)APP位于從后臺(tái)切換到前臺(tái)`.

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

當(dāng)有可用的新版本時(shí),什么時(shí)候去呈現(xiàn)給用戶(hù)

 Code-Push 有三種更新的策略:
     IMMEDIATE 立即更新APP
     ON_NEXT_RESTART 到下一次啟動(dòng)應(yīng)用時(shí)
     ON_NEXT_RESUME 當(dāng)應(yīng)用從后臺(tái)返回時(shí)

配置到`installMode:` 之后即可生效.

發(fā)布更新

當(dāng)應(yīng)用開(kāi)發(fā)完成后,需要用以下命令發(fā)布更新:

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

將上面所有步驟都走完后,更新功能就能使用了.

部署測(cè)試

在應(yīng)用創(chuàng)建時(shí),會(huì)自動(dòng)生成Staging與Production這兩個(gè)環(huán)境.
應(yīng)用在開(kāi)發(fā)階段,通常都是在Staging下進(jìn)行開(kāi)發(fā)的,而Production作為生產(chǎn)環(huán)境.當(dāng)應(yīng)用在開(kāi)發(fā)階段開(kāi)發(fā)完畢,可使用code-push promote命令從Staging 遷移到Production中.

在一個(gè)版本開(kāi)發(fā)完畢后,當(dāng)我們不知道該版本是否兼容市場(chǎng)上所有的機(jī)型的時(shí)候,我們可以選擇一小部分人來(lái)測(cè)試該版本,可以使用以下命令:

code-push promote <APP_NAME> Staging Production -r 20%

從Staging環(huán)境遷移到Production,但只讓20%的用戶(hù)進(jìn)行使用.
當(dāng)發(fā)現(xiàn)該版本問(wèn)題較多時(shí),當(dāng)該版本符合自己期望時(shí),可以全面發(fā)布.

code-push patch <APP_NAME> Production -r 100%

動(dòng)態(tài)部署分配

添加部署環(huán)境

code-push deployment add [APP_NAME] test-variant-one

發(fā)布給特定部署環(huán)境

code-push release-react [APP_NAME] ios -d test-variant-one