Code-Push
官方文檔: https://github.com/Microsoft/react-native-code-push#getting-started
它能干什么 ?
React Native的應用是由 JavaScript文件與資源文件及原生代碼組成.
Code-Push 插件能幫助終端用戶更新JavaScript文件與圖片資源.
當發布一個React Native的新版本時,Code-Push會保存你上個版本發布的文件,當你應用出現崩潰時,Code-Push幫你回滾到上個版本,而不會變成空白頁面.
但是,當原生代碼發生改變時,Code-Push就無能為力了,你只能通過應用市場去更新應用.(Android端可以自己下載apk進行安裝)
配置準備步驟
安裝Code-Push的命令行工具:
npm install -g code-push-cli
如果沒有注冊過Code-Push,則需要使用code-push register 進行注冊
注冊過則需要使用code-push login進行登錄
最后注冊 APP 到 Code-Push服務器:
code-push app add <appName>
開始配置
進入App根目錄,運行一下命令:
npm install --save react-native-code-push@latest
配置Android
有兩種方法可實現配置,一種是通過命名行,另外一種是手動.
命令行配置(推薦使用)
- 如果是第一次進行配置,則需要先使用
npm i -g rnpm進行安裝.- 運行命令行
rnpm link react-native-code-push.- 當遇到需要輸入
deploymentKey時,按<ENTRY>先省略這一步.
手動配置
- 在
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')
- 在
android/app/build.gradle添加Code-Push的依賴
...
dependencies {
...
compile project(':react-native-code-push')
}
- 在
android/app/build.gradle添加codepush.gradle任務
...
apply from: "react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
代碼配置
在配置代碼中,需要使用到deploymentKey,這個key 是標志應用的身份及環境的,可通過以下命令查看:
code-push deployment ls <appName> -k
如果之前的都配置正確,那這里可以看到Production與Staging的Deployment Key,將這兩個key粘貼下來.如果環境來決定需要用到哪個key.
在剛開始,肯定需要測試,那就將Staging對應的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() {
//訪問慢,不穩定
CodePush.checkForUpdate('deployment-key-here').then((update)=>{
if(!update){
Alert.alert("提示","已是最新版本--",[
{text:"Ok", onPress:()=>{
console.log("點了OK");
}}
]);
}
else{
CodePush.sync({
deploymentKey: 'deployment-key-here',
updateDialog: {
optionalIgnoreButtonLabel: '稍后',
optionalInstallButtonLabel: '后臺更新',
optionalUpdateMessage: '有新版本了，是否更新？',
title: '更新提示'
},
installMode: CodePush.InstallMode.IMMEDIATE
});
}
});
}
...
方法
- CodePush.checkForUpdate 檢查更新的信息
- CodePush.sync 下載更新
在使用Code-Push更新功能時,需要先考慮兩個問題:
何時去檢查是否有新版本
一般都是在應用開啟時去檢查,可以將檢查的代碼放到`componentDidMount`或者`componentWillMount`方法中. 如果你想更及時的檢查,時機可以選在 `當APP位于從后臺切換到前臺`.
AppState.addEventListener("change", (newState) => {
newState === "active" && codePush.sync();
});
當有可用的新版本時,什么時候去呈現給用戶
Code-Push 有三種更新的策略:
IMMEDIATE 立即更新APP
ON_NEXT_RESTART 到下一次啟動應用時
ON_NEXT_RESUME 當應用從后臺返回時
配置到`installMode:` 之后即可生效.
發布更新
當應用開發完成后,需要用以下命令發布更新:
code-push release-react <appName> <platform>
將上面所有步驟都走完后,更新功能就能使用了.
部署測試
在應用創建時,會自動生成Staging與Production這兩個環境.
應用在開發階段,通常都是在Staging下進行開發的,而Production作為生產環境.當應用在開發階段開發完畢,可使用code-push promote命令從Staging 遷移到Production中.
在一個版本開發完畢后,當我們不知道該版本是否兼容市場上所有的機型的時候,我們可以選擇一小部分人來測試該版本,可以使用以下命令:
code-push promote <APP_NAME> Staging Production -r 20%
從Staging環境遷移到Production,但只讓20%的用戶進行使用.
當發現該版本問題較多時,當該版本符合自己期望時,可以全面發布.
code-push patch <APP_NAME> Production -r 100%
動態部署分配
添加部署環境
code-push deployment add [APP_NAME] test-variant-one
發布給特定部署環境
code-push release-react [APP_NAME] ios -d test-variant-one
