React Native CodePush実践小結

前言
CodePushはマイクロソフトが提供するReact NativeとCordovaに利用できるホットアップデートサービスで、国内にも同様のサービスPushyがあり、注目度と使用人数から言えばCodePushはPushyに勝っている.(これまで、CodePushはGithubでStar数2900+、Pushy Star数600+、大企業の製品は開発者の心に底があるが、CodePushが本当にPushyよりも評価していないかどうか)
CodePushインストールと登録
1.CodePush CLIのインストール
コマンドnpm install -g code-push-cliを使用してCodePush端末をインストール
ps.React Nativeを開発しているので、npmインストールは言うまでもないでしょう.
2.CodePushアカウントの登録
CodePush端末のインストールが完了するとcode-pushコマンドを使用できます.端末でcode-push registerを入力すると、ライセンスページがジャンプします.このページではGithubを選択できます.あるいはマイクロソフトをライセンスプロバイダとして使用しますが、開発者の90%がGithubを選択すると思います.
承認が完了すると、CodePushはあなたのAccess Keyを表示し、端末にコピーして登録してログインすることができます.ps.は自発的に終了しない限り(code-push logoutコマンドを通じて)、ログイン状態はずっと有効です.
CodePushサーバでのAppの作成
端末入力code-push app add で作成が完了し、登録が完了するとStagingとProductionを含むdeployment keyのセットが返されます.このkeyは後述のステップで使用されます.
心得:AndroidとiOS版に分かれている場合は、CodePushにアプリケーションを登録する際に2つのAppを登録して2つのdeployment keyを取得する必要があります.例えば、code-push app add AppDemo-Android
code-push app add AppDemo-iOSは、リリース時に使用するパッケージコマンドが異なるため、区別が必要です.
code-pushに関する一般的なコマンドは次のとおりです.

Usage: code-push app 
  ：
  add             App
  remove      App
  rm          App
  rename           App
  list                 App
  ls                   App
  transfer     App            

CodePush統合
ここでは、Android統合とiOS統合を使用していますが、両方に共通する部分があります.

React NativeプロジェクトにcodePush依存をインストールする:npm install --save react-native-code-push

react-native linkコマンドによって自動的に関連付けが構築されます.ここではdeployment keyを入力し、直接Enterをスキップする必要があります.なぜなら、

は後続のステップでより柔軟に構成されるからです.
次の手順は、AndroidiOSが異なるので、別々に言います.
Android端末統合

android/app/build.gradleファイルを開き、android-buildTypeノードを変更すると、次の

になります.

 buildTypes {
        debug{
            //       
            buildConfigField "String", "CODEPUSH_KEY", '""'
        }
        releaseStaging {
            buildConfigField "String", "CODEPUSH_KEY", '"    Staging key"'
        }
        release {
            //       
            buildConfigField "String", "CODEPUSH_KEY", '"    Production key"'
        }
    }

android/app/build.gradleがdeployment-keyを設定した後、MainApplication.javaファイルのgetPackages()を変更する方法は、次のとおりです.

 protected List getPackages() {
            return Arrays.asList(
                    new MainReactPackage(),
                    new RCTSwipeRefreshLayoutPackage(),
                    new VectorIconsPackage(),
                    new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG)// Add/change this line.
            );
        }

3.VersionNameのandroid/app/build.gradleにandroid.defaultConfig.versionName属性を変更します.アプリケーションバージョンを1.0など3桁に変更する必要があります.1.0.0に変更する必要があります.
これで、Android側でのCodePushの統合作業が完了しました.
iOSエンド統合

Xcodeを使用してプロジェクトを開き、XcodeのプロジェクトナビゲーションビューのPROJECTでプロジェクトを選択し、Infoページチェックを選択し、コンフィギュレーションノードの下で+ボタンをクリックし、Duplicate"Release Configarationを選択し、Stagingを入力します.

build Settingsページのチェックボックスで+ボタンをクリックし、「User-Defined Settingsの追加」を選択し、CODEPUSH_KEY(任意の名前)を入力し、deployment keyに入力します.
ps.code-push deployment ls Flow800-Android -kでdeployment keyを表示できます
3.Info.plistファイルを開き、CodePushDeploymentKeyに$(CODEPUSH_KEY)を入力し、Bundle versionsを次の図の3桁に変更します.
これでiOSエンドの統合も完了しました.
react-native-code-psuhを使用してホット更新
この構成はすべて構成が完了し、次に使用されます.使用する前に、更新タイミングの確認、更新が強制されているかどうか、更新が即時に要求されているかどうかなどを考慮する必要があります.
更新のタイミング
一般的によく見られるアプリケーション内の更新タイミングは、アプリを開いて更新をチェックすることと、設定インタフェースに置いてユーザーが更新を自発的にチェックしてインストールすることの2つに分けられます.

アプリを開くと最も簡単な使い方をチェックReact NatvieのルートコンポーネントのcomponentDidMountメソッドでcodePush.sync()を通過します(codePushパッケージ:import codePush from'ract-native-code-push')メソッド更新をチェックしてインストールします.ダウンロード可能な更新パッケージがある場合は、再起動後に有効になります.ただし、このダウンロードとインストールは、ユーザーが表示されないことを意味します.ユーザーが表示される必要がある場合は、追加の構成が必要です.具体的には、codePush公式APIドキュメントを参照してください.以下は、個人のいくつかの実践的な構成です.

codePush.sync({
      updateDialog: {
        appendReleaseDescription: true,
        descriptionPrefix:'

    ：
',
        title:'  ',
        mandatoryUpdateMessage:'',
        mandatoryContinueButtonLabel:'  ',
      },
      mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
      deploymentKey: CODE_PUSH_PRODUCTION_KEY,
    });

上記の構成は、更新をチェックするときにプロンプトダイアログボックスがポップアップされ、mandatoryxxxは強制更新を表し、appendReleaseDescriptionは更新をパブリッシュするときの説明が更新ダイアログボックスに表示され、ユーザーに表示されることを示しています.
ユーザーが更新ボタンをクリックしてチェックし、更新があればプロンプトボックスをポップアップしてユーザーに更新するかどうかを選択させ、ユーザーがすぐに更新ボタンをクリックすると、インストールパッケージのダウンロード(実際にはダウンロードの進捗状況を表示すべきで、ここでは省略)を行い、ダウンロードが完了するとすぐに再起動し、有効になります.(後で再起動するように構成することもできます)ps.この中には神の穴があります.後で話します.

codePush.checkForUpdate(deploymentKey).then((update) => {
                            if (!update) {
                                Alert.alert("  ", "      --", [
                                    {
                                        text: "Ok", onPress: () => {
                                        console.log("  OK");
                                    }
                                    }
                                ]);
                            } else {
                                codePush.sync({
                                        deploymentKey: deploymentKey,
                                        updateDialog: {
                                            optionalIgnoreButtonLabel: '  ',
                                            optionalInstallButtonLabel: '    ',
                                            optionalUpdateMessage: '     ，    ？',
                                            title: '    '
                                        },
                                        installMode: codePush.InstallMode.IMMEDIATE,

                                    },
                                    (status) => {
                                        switch (status) {
                                            case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                                                console.log("DOWNLOADING_PACKAGE");
                                                break;
                                            case codePush.SyncStatus.INSTALLING_UPDATE:
                                                console.log(" INSTALLING_UPDATE");
                                                break;
                                        }
                                    },
                                    (progress) => {
                                        console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
                                    }
                                );
                            }
                    }

強制更新
強制更新である場合、発行時に指定する必要がある場合、発行コマンドには--m trueが構成されており、以下で詳細に説明する.
更新にインスタントが必要かどうか
更新構成ではinstallModeを指定することでインストール完了の再起動タイミング、すなわち更新有効タイミングを決定します

codePush.InstallMode.IMMEDIATE:インストールが完了したら、すぐに更新

を再起動します.

codePush.InstallMode.ON_NEXT_RESTART:インストールが完了すると、次回の再起動後に更新される

を示します.

codePush.InstallMode.ON_NEXT_RESUME:インストールが完了すると、アプリケーションがバックグラウンドに入ると更新

が再開されます.
codepush更新パッケージのパブリッシュ
codepushの更新パッケージのリリースは簡単です.端末でコマンドを入力します.

code-push release-react   --t  --des 

CodePushのデフォルトはStaging環境の更新です.本番環境の更新パッケージを発行する場合は、--dパラメータ:--d Productionを指定する必要があります.強制更新パッケージを発行する場合は、--m trueを追加して強制更新する必要があります.
例:

code-push release-react Flow800-Android android --t 2.0.0 --dev false --d Production --des "1.    
2.      
3.  bug  " --m ture

一般的な配置コマンドは次のとおりです.

Usage: code-push deployment 
  ：
  add           App       
  clear                  
  remove    App       
  rm        App       
  rename              
  list       App      
  ls         App      
  history               
  h                     

これで、完全なパブリケーション、チェック、インストールプロセスが基本的に説明されました.更新の効果を見てみましょう.
実践経験のまとめ

Android側でデバッグを行う場合、更新前にDebug Serverのアドレスとポートを任意の文字列に変更し、真のDebug Serverにアクセスできないようにする必要があります.そうしないと、更新が再開された後、直接Debug Serverにアクセスし、新しいインストールパッケージがインストールされません.

Androidオフラインパッケージを直接打つこともできます.これではDebug Serverの影響を気にする必要はありません.

iOS側でデバッグする場合は、ワイヤパッケージを外してXcodeエンジニアリングにドラッグ&ドロップする必要があります.パッケージコマンド:

react-native bundle --entry-file index.ios.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false

ドラッグ&ドロップが完了すると、ディレクトリ構造は上記のようになります.また、AppDelegate.mファイルを変更する必要があります.
そうでなければ、再起動後も旧バージョンのAppが更新されます.
3.更新パッケージを発行するときは、--tパラメータは、今回の更新パッケージのバージョン番号ではなく、今回の更新パッケージのターゲットバージョン番号を指定します.
4.ルートコンポーネントのcomponentDidMount()メソッドがcodePush.sync()メソッドで更新チェックとインストールされていない場合、たとえば私が設定で更新ボタンをチェックしているような場合は、十分注意が必要です.ルートコンポーネントのcomponentDidMount()メソッドにcodePush.notifyAppReady()を追加すると、アプリケーションは1回目の再起動が更新版であり、2回目の再起動が古い版にロールバックする現象が発生します.
5.1つのAppは通常、1人で開発されるわけではないので、codePushに協力者を追加することはよくあります.協力者関連コマンドはcode-push collaboratorで操作されます.

Usage: code-push collaborator 
  ：
  add                    
  remove              
  rm                  
  list                 
  ls                   
  :
    code-push collaborator add AppDemo [email protected]        [email protected] AppDemo  App 

6.最後にCodePushの欠陥について述べると、海外サーバーであるため、ダウンロード速度があまり理想的ではない場合がある.また、CodePushは現在無料サービスであり、今後料金が徴収されるかどうかは未知数である.そのため、すでにcodePushサーバーを自作することが提案されている.これはcode-push-serverである
その他のFAQおよびAPIの使用方法については、次の資料を参照してください.
参考資料
マイクロソフト公式ReactNative CodePushドキュメントReact Nativeホットアップデート導入/ホットアップデート-CodePush最新統合総括(新)react-native-code-push Github基本的にすべての問題は、公式ドキュメントまたはgithubのissueで答えを見つけることができます.