RN熱更新——codepush
11702 ワード
一、インストール登録code-push
1.code-pushのインストール
$ npm install -g code-push-cli
2.アカウントの登録
$ code-push register
ブラウザを自動的に起動してWebページを開き、codePush AccessKeyを提供し、コマンドラインにaccess keyを入力する必要があります.
Enter your access key:
アクセスキー入力ログイン
3.CodePushアプリケーションを追加(myProjectはアプリケーション名)
$ code-push app add �myProject
現れる
|| name || Deployment Key ||
|| Production || ( 37 key) ||
|| Staging || ( 37 key) ||
上に2つのパブリッシュキー値があります.1つのプロダクションは生産環境に対応し,2 Stagingは開発環境に対応する.もちろん、他のパブリケーションキー値を追加することもできます.この値は後で集積工事で使います.
二、react-nativeアプリケーションアクセスcode-push
1.react-native-code-pushのインストール
プロジェクトルートで実行
$ npm install react-native-code-push --save
2.cocoapodsインポートcode-push
ios
Podfileファイルを変更して、追加:
pod 'CodePush', :path => './node_modules/react-native-code-push'
うんてん
$ pod install
android
$ react-native link react-native-code-push
// public class MainActivity extends ReactActivity { // For React Native v0.19 - v0.28
public class MainApplication extends Application implements ReactApplication { // For React Native >= 0.29
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
// 2. Override the getJSBundleFile method in order to let
// the CodePush runtime determine where to get the JS
// bundle location from on each app start
@Override protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
@Override protected List getPackages() {
// 3. Instantiate an instance of the CodePush runtime and add it to the list of
// existing packages, specifying the right deployment key. If you don't already
// have it, you can run "code-push deployment ls -k" to retrieve your key.
return Arrays.asList(
new MainReactPackage(),
new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
);
}
};
}
android/app/build.gradleファイル(codepushを適用するには3桁必要)android{defaultConfig{versionName"1.0.0"}Background React Instances This section is only necessary if you'reexplicitly launching a React Native instance without an Activity(for example,from within a native push notification receiver).For these situations, CodePush must be told how to find your React Native instance.* In order to update/restart your React Native instance, CodePush must be configured with a ReactInstanceHolder before attempting to restart an instance in the background. This is usually done in your Application implementation. MainApplicationを変更します.JAvaファイル//For React Native>=v 0.29 ...//1. Declare your ReactNativeHost to extend ReactInstanceHolder.//ReactInstanceHolder is a subset of ReactNativeHost, so no additional implementation is needed. import com.microsoft.codepush.react.ReactInstanceHolder; public class MyReactNativeHost extends ReactNativeHost implements ReactInstanceHolder {//... usual overrides }//2. Provide your ReactNativeHost to CodePush. public class MainApplication extends Application implements ReactApplication {
private final MyReactNativeHost mReactNativeHost = new MyReactNativeHost(this);
@Override public void onCreate() {
CodePush.setReactInstanceHolder(mReactNativeHost);
super.onCreate();
}
}
// For React Native v0.19 - v0.28
// 1. Provide your ReactNativeHost to CodePush.
public class MainApplication extends Application {
// ... initialize your instance holder
@Override public void onCreate() {
CodePush.setReactInstanceHolder(mReactNativeHost);
super.onCreate();
}
}
以上の操作で、CodePushの統合に成功しました.
3.関連ファイルの構成
1.jsプログラムエントリファイルの修正
RNアプリケーションはappDelegateです.m原生応用はReactView.m
#ifdef DEBUG
jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.103:8081/index.ios.bundle?platform=ios"];
#else
jsCodeLocation = [CodePush bundleURLForResource:@"index"];
#endif
2.infoを修正する.plistファイル
CodePushDeploymentKey
key（ key key， appstore Staging key）
コマンドラインに入力
$ code-push
code-pushの各コマンドが表示されます
三、更新ポリシー(js)
1.react-native-code-pushのインポート
import codePush from "react-native-code-push";
2、策略
デフォルトでは、CodePushはappが起動するたびに更新があるかどうかを検出し、ある場合はappが自動的にダウンロードされ、次回appを開くときにインストールされます.
class MyApp extends Component {}
MyApp = codePush(MyApp);
// For ES7
import codePush from "react-native-code-push";
@codePush
class MyApp extends Component {}
appを開くたびに更新を検出してダウンロードし、次回appを開くたびにインストールします.
// Sync for updates everytime the app resumes.
class MyApp extends Component {}
MyApp = codePush({
checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
installMode: codePush.InstallMode.ON_NEXT_RESUME
})(MyApp);
更新をリアルタイムで検出してダウンロードし、ダウンロードが完了したらすぐにインストールします.
// Active update, which lets the end user know
// about each update, and displays it to them
// immediately after downloading it
class MyApp extends Component {}
MyApp = codePush({
updateDialog: true,
installMode: codePush.InstallMode.IMMEDIATE
})(MyApp);
app検出、ダウンロード、インストールの状態を記録する(進捗バーを友好的なヒントとして実現できる)
// Make use of the event hooks to keep track of
// the different stages of the sync process.
class MyApp extends Component {
codePushStatusDidChange(status) {
switch(status) {
case codePush.SyncStatus.CHECKING_FOR_UPDATE:
console.log("Checking for updates.");
break;
case codePush.SyncStatus.DOWNLOADING_PACKAGE:
console.log("Downloading package.");
break;
case codePush.SyncStatus.INSTALLING_UPDATE:
console.log("Installing update.");
break;
case codePush.SyncStatus.UP_TO_DATE:
console.log("Installing update.");
break;
case codePush.SyncStatus.UPDATE_INSTALLED:
console.log("Update installed.");
break;
}
}
codePushDownloadDidProgress(progress) {
console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
}
}
MyApp = codePush(MyApp);
CodePushOptions
説明
ON_APP_START(0)
app起動後
ON_APP_RESUME(1)
アプリがバックグラウンドから切り替わった時
ON_APP_MANUAL(2)
自動検出はできません.
codePush.sync()が呼び出されたときにのみトリガーされます.説明
IMMEDIATE(0)
すぐにappをインストールして再起動します
ON_NEXT_RESTART(1)
次回app起動時にインストール
ON_NEXT_RESUME(2)
アプリがバックグラウンドから切り替わった時にインストール
codePush.InstallMode.IMMEDIATE installMode.ON_NEXT_RESUMEに合わせて説明
appendReleaseDescription(Boolean)
通知メッセージをユーザーに送信するかどうか、デフォルトはfalseです.
descriptionPrefix(String)
説明の接頭辞、デフォルトは「Description:」
mandatoryContinueButtonLabel(String)
強制更新の下の継続ボタンのテキスト、デフォルトは“Continue”です
mandatoryUpdateMessage(String)
強制的に更新される通知メッセージのテキストは、デフォルトでは「An update is available that must be installed.」
optionalIgnoreButtonLabel(String)
ボタンのテキストを無視し、デフォルトは「Ignore」です.
optionalUpdateMessage(String)
通知メッセージテキスト、デフォルトは「An update is available.Would you like to install it?」
title(String)
ダイアログのタイトル、デフォルトは「Update available」
optionalUpdateMessage
通知メッセージテキスト
codePushStatusDidChange
検出、ダウンロード、インストールの状態を監視するためのSyncStatus
方法
説明
CHECKING_FOR_UPDATE (0)
クエリーの更新
AWAITING_USER_ACTION (1)
更新があり、エンドユーザーにダイアログが表示されます(これはupdateDialogが適用される場合にのみ使用されます).
DOWNLOADING_PACKAGE (2)
ダウンロード中
INSTALLING_UPDATE (3)
インストール中
UP_TO_DATE (4)
更新完了
UPDATE_IGNORED (5)
プロンプトの更新後、ユーザーは無視を選択しました(これはupdateDialogが適用される場合にのみ使用されます)
UPDATE_INSTALLED (6)
すでにインストールされており、syncStatusChangedCallback関数を実行して戻った後、InstallMode SyncOptionsで指定した更新を直ちにまたは次回開始します.
SYNC_IN_PROGRESS (7)
現在の呼び出しが実行されないように、進行中の同期操作が実行されます.
UNKNOWN_ERROR (-1)
同期操作で不明なエラーが発生しました.
codePushDownloadDidProgress
ダウンロードの進行状況
戻りパラメータ
説明
totalBytes (number)
推定サイズ
receivedBytes(number)
ダウンロード済みサイズ
disallowRestart/allowRestart
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();
}
...
}
四、リリースバージョン
1、梱包
$ code-push release myProject ./bundle/index.jsbundle 1.20.1 --mandatory true
myProjectは私たちが更新するプロジェクト名を表し、前に登録したindexです.jsbundleは私たちが更新する内容で、1.20.1は私たちがappstoreで発表したバージョン番号で、この場所は私たちのプログラムのバイナリファイルのバージョン番号であることに注意して、実はこのコマンドはmyProjectの1.20.1のバージョンのバイナリファイルを更新して、1.20.1のバージョンだけが更新を受け取ることができます.一番後ろのパラメータは強制的に更新するかどうかです.このコマンドは、更新された環境が正式な環境かテスト環境かを指定していません.デフォルトはテスト環境です.正式な環境にパブリッシュするには、指定する必要があります.
code-push release wanna ./bundle/index.jsbundle 1.20.1 -d "Production" --mandatory true。
また、1.20.1バージョンのユーザーが更新できるパラメータを追加することもできます.rollout 20は、20パーセントのmyProject 1.20.1を表すユーザーがこの更新を受け取ることができます.
2、リリース後のパラメータの変更
例えば、上記のように、1.20.1に更新されたテストバージョンをリリースし、20パーセントのユーザーを更新しましたが、リリースが完了したら、30パーセントのユーザーを更新したいと思っています.
$ code-push patch wanna 1.20.1 --rollout 20
code-push for redux -- react-native-code-push-saga