Cordova/ReactNativeアプリのライブアップデートを実現するCodePushを試す

Monacaアプリをはじめとする、いわゆるCordovaアプリはハイブリッドアプリと呼ばれる仕組みをとっています。それはネイティブコードでHTML5アプリをラッピングしているのですが、HTML5/JavaScript/スタイルシートの部分についてはコンパイルされていません。つまり、動的に差し替えることができれば、アプリストアによる審査やアプリのアップデートを必要とせず、コンテンツを差し替えることができるようになります。

そうした機能はMonacaのエンタープライズ版で提供しているのですが、今回はMicrosoft社がリリースしたCodePushを使って同様の操作を試してみたいと思います。

事前に必要なもの

CodePushはNode.jsを使いますので予めインストールされていることとします。また、今回はCordovaアプリを使いますので、

1. npm install cordova -g

としてCordovaコマンドをインストールしておきます。

CodePushのインストール

まずCodePushをインストールします。

1. npm install -g code-push-cli

次に設定を行います。CodePushにアカウントを作成します。

1. code-push register

そうするとブラウザが開きますので、GitHubかMicrosoftアカウントを使ってユーザ登録します。結果としてOAuth2のトークンが取得できますので、それを入力します。

1. $ code-push register
2. A browser is being launched to authenticate your account. Follow the instructions it displays to complete your registration.
4. Enter your access token:  eyJ.....0=
6. Successfully logged-in. Your session token was written to /Users/nakatsugawa/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

アプリを登録する

次にアプリを登録します。

1. $ code-push app add CodePushDemo
2. Successfully added the "CodePushDemo" app, along with the following default deployments:
3. ┌────────────┬───────────────────────────────────────┐
4. │ Name       │ Deployment Key                        │
5. ├────────────┼───────────────────────────────────────┤
6. │ Production │ a8xg..............................kix │
7. ├────────────┼───────────────────────────────────────┤
8. │ Staging    │ 6PAb..............................kix │
9. └────────────┴───────────────────────────────────────┘

そして、Cordovaでアプリを作成します。

1. $ cordova create HelloWorld io.monaca.demo.hello

作成したら、プラットフォームを追加します。今回はiOSを使います。

1. $ cd HelloWorld
2. $ cordova add platform ios

CodePushプラグインをインストールする

ではここからCodePushプラグインのインストールと設定を行います。まずプラグインをインストールします。

1. $ cordova plugin add cordova-plugin-code-push

次にconfig.xmlを次のように修正します。valueのところは先ほど生成したCodePushのキー（プロダクトまたはステージング）と差し替えます。

1. <platform name="android">
2.     <preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" />
3. </platform>
4. <platform name="ios">
5.     <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
6. </platform>

最後に index.html を編集します。

1. <!-- 元 -->
2. <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />
3.  
4. <!-- 修正後 -->
5. <meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net/ 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />

config.xmlでアクセスできる外部URLを制御している場合は、

1. <access origin="https://codepush.azurewebsites.net" />
2. <access orogin="https://codepush.blob.core.windows.net" />

を追加しておきます。

試してみる

では実際に試してみます。まずiOSアプリとしてシミュレータで実行します。

1. $ cordova run ios --simulate

次に現状のコードをCodePushに送信します。

1. $ code-push release CodePushDemo (プロジェクトパス)/platforms/ios/www 0.0.1

アプリ名は自分で取得したものを指定してください。0.0.1は任意のバージョン番号です。

そしてコードを修正します。 codePush.sync(); がCodePushへバージョンのチェックを行い、最新番があればアップデートして反映してくれるコードになります。

1. codePush.sync();
2. alert("Bug fixed!");

コードを更新したら、まず (プロジェクトパス)/platforms/ios/www 内に反映します。

1. $ cordova prepare

終わったら再度CodePushに登録します。

1. $ code-push release CodePushDemo (プロジェクトパス)/platforms/ios/www 0.0.1

この時大事なのはバージョン番号は同じということです。バージョン番号が異なるものはアップデートできません。つまりちょっとしたコードの修正にして欲しいということでしょう。

再度アプリを起動すると自動的に新しいコンテンツを取得し、反映してくれます。なお、この反映はアプリを再起動（一旦メモリからも落とす必要があります）しないと反映されませんので注意してください。

CodePushの機能

CodePushではリリースされたコンテンツが蓄積して保存されていますので、バージョンを差し戻したり、履歴を一覧で見ることができます。そこでは最新コンテンツに反映しているかどうかも測定ができます。

1. $ code-push deployment history CodePushDemo Staging
2. ┌───────┬──────────────┬─────────────┬───────────┬─────────────┬──────────────────────┐
3. │ Label │ Release Time │ App Version │ Mandatory │ Description │ Install Metrics      │
4. ├───────┼──────────────┼─────────────┼───────────┼─────────────┼──────────────────────┤
5. │ v1    │ 5 hours ago  │ 0.0.1       │ No        │             │ Active: 0% (0 of 2)  │
6. │       │              │             │           │             │ Total: 0             │
7. │       │              │             │           │             │ Rollbacks: 1         │
8. ├───────┼──────────────┼─────────────┼───────────┼─────────────┼──────────────────────┤
9. │ v17   │ 2 hours ago  │ 2.0.3       │ No        │             │ Active: 50% (1 of 2) │
10. │       │              │             │           │             │ Total: 1             │
11. └───────┴──────────────┴─────────────┴───────────┴─────────────┴──────────────────────┘

CodePushはCordovaの他に、ReactNativeにも対応しています。コンテンツを差し替えるとまったく別なアプリにすることもできますが、ユーザビリティ的にもそれは控えた方が良いでしょう。また、プラグインをアップデートしたり、追加する場合にはアプリ自体の刷新が必要になるので注意が必要です。同じアプリを用いたベータ版配布にも使えそうです。

なお、Monacaではエンタープライズ版向けに類似のIn-Appアップデーター機能を提供しています。ぜひご覧ください！

CodePush