react-native-fcmでのpush通知制御(android)

OKUSAWA Takashi

4 min readMay 5, 2018

PIAZZAのandroidアプリ初期リリース(2015年10月末)直前に、軽く使い方を調べて何となく使っていたが、画像付きpush通知を実装するにあたり色々調べ直した際の作業メモ。

もし、これからfcmを使うならreact-native-firebaseのほうが良さそうだ。

環境

react-native-fcm@14.1.3

サーバーサイド(rails)

個別通知

AWS SNSからFCMへ通知を送っている。設定以外で、ハマり/忘れそうなポイントは

publish::messageに渡すjsonは文字列で無いといけない。 → FCM用のオブジェクトを作ったらto_jsonしたものを文字列として渡す

topic通知

こちらはfcm.send_to_topicで送るだけ。送るデータはハッシュのままで問題無い。

custom_notification

サンプルを見ると画像を送るにはpictureというkeyを設定してあげれば良い。

ただし、custom_notificationを使ってデータを送る必要がある。 https://github.com/evollu/react-native-fcm/issues/533

コメントにもあるように、通常のnotificationとcustom_notificationを同時に設定してはいけない。

作業の時に時間食ったミス。最初以下の形式だったので、単純にnotificationをcustom_notificationに名前変えるだけだろうと思ってしまった。

{
  notification: { // ここをcustom_notificationに変えて何回も試していた…
    body: ...
  },
  data: { hoge: ... }
}

こう書かないとダメ

{
  data: {
    custon_notification: {
      body: ...,
      hoge: ...
    }
  }
}

pictureとbig_textの関係

pictureで設定した画像とbig_textで設定したテキストが表示される領域は一緒である。両方セットした場合はpictureが優先されbig_textは表示されない。

クライアント(android)

FCMEvent.Notificationでpushされたデータを受け取ってハンドリングする際、payloadでデータを受け取れるが、custom_notificationで来たデータは、文字列になる。よって、payloadにcustom_notificationが入っていたらparseが必要。

cost payload = JSON.parse(_payload.custom_notification)

通常の形式

{
  notification: {
    body: ...
  },
  data: { hoge: ... }
}

の場合はそのまま使えるので注意。サーバーから送るデータの形式は統一したほうがいい。

show_in_foregroundの代わりにローカル通知

show_in_foreground使うと、アプリがフォアグランドにある場合も通知を表示できる。だが、全ての通知が表示されるためアプリ側で通知の表示を判定したい場合は使えない。

そこで、起動中に受け取った通知内容を条件に応じてローカル通知で表示するようにした。

ファオグラウンドの判定はAppState.currentStateを使う。

// FCMEvent.Notificationのコールバック
pushNotificationAction(_payload: Object) {
  let payload = _payload;                                                            
  if (payload.custom_notification) {
    payload = JSON.parse(payload.custom_notification);
  }
  // バックグラウンド時には通知は表示されるので、フォアグランド時のみ
  const isActive = AppState.currentState === 'active';
  if (isActive && /* 通知を表示したい条件 */) {
    FCM.presentLocalNotification(
       Object.assign(payload, { show_in_foreground: true })
    );
  }
}