React Native for AndroidでGCMを使ってPUSH通知するまでの作業ログ

React Native for AndrodでPUSH通知させた時のおぼえ書き。

Google Cloud Messaging for Android (GCM ) とは?

開発者がサーバから Android デバイス上の Android アプリケーションにデータを送信できるようにする無料のサービス

らしいです。

www.techdoctranslator.com

GCM登録

以下からアプリを登録して、RegistrationKeyやgoogle-services.jsonを取得する。google-services.jsonはandroid/appに格納する。

Set up a GCM Client App on Android | Cloud Messaging | Google Developers

React Nativeでは

以下のパッケージを使うのが楽。

github.com

ただ、依存関係が循環参照みたいなことになっててバージョン指定しないと上手く入らなかった。

npm i --save react-native-gcm-android@0.1.9

手順に添ってandroid/build.gradleなどを設定していく。が、com.android.dex.DexException: Multiple dex files...というエラーが発生し、ビルドに失敗する。エラーで検索すると、android/app/build.gradleにmultiDexEnabled trueを追加せよってのがあるんだけど、公式には「追加するんじゃねえ」って書いてあってたまたま見つけたbuild/とapp/build/を削除することでビルドが通るようになった。

Genymotionに Google Play serviceをインストールする

Genymotion(使っている場合)にGoogle Play serviceをインストールする必要がある。手順は以下の記事の通りで問題なかった。

androidlover.net

PUSH 通知する

GcmAndroid.requestPermissions();すると以下のコールバックでトークンが受け取れる。

GcmAndroid.addEventListener('register', function(token){
        console.log('send gcm token to server', token);
});

こいつをサーバに送信、端末と紐つけて保持しておきPUSH通知をするのに使用する。

以下を実行する。("GCM_TOKEN"に上記で受け取ったトークンを入力する。)

curl -X POST -H "Authorization: key=YOUR_AUTHORIZATION_KEY" -H "Content-Type: application/json" -d '
{
  "data": {
    "info": {
      "subject": "Hello GCM2",
      "message": "Hello from the server side!"
    }
  },
  "to" : "GCM_TOKEN"
}' 'https://gcm-http.googleapis.com/gcm/send'

コールバックで内容が受け取れる。

GcmAndroid.addEventListener('notification', function(notification){
        console.log('receive gcm notification', notification);
        var info = JSON.parse(notification.data.info);
        if (!GcmAndroid.isInForeground) {
          Notification.create({
            subject: info.subject,
            message: info.message,
          });
        }
      });