やりたいこと

React Native Firebase の Cloud Messaging を使ってプッシュ通知受信時の処理を実装。

ドキュメント通りに対応して iOS ではバックグラウンド・フォアグラウンド（※注1）とも特に問題ない。

Android でも受信するには受信するが、ポップアップ表示されない。Android 8 (Oreo) 以上では通知チャネルを明示的に指定して通知の重要度を設定しなければポップアップ表示されないので、これは当然。

通知チャネルを作成する必要があるので、やり方を調べると firebase.notifications() を使用して設定できそうな回答が見つかる。が、 React Native v6 にはこのメソッドは存在しない。どうやら v5 -> v6 で削除されたらしく、チャネルに関する設定を行う方法は v6 では提供されていない模様。React Native Firebase v5 はすでにサポート外となっているので、今更入れるのも微妙。

公式ドキュメントでは通知チャネルなどの細かい設定を行いたい場合は、同じ開発チームが作っている Notifee を使うことを推奨しているが、これは1アプリ $240 のライセンス購入が必要。

チャネル設定したいだけなのに……。

方法

しかたがないので Android でネイティブ実装してしまう。

android/app/src/〜/MainActivity.java にこんな感じでメソッド作って…

  private void createNotificationChannel() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
      String id = "notification"
      CharSequence name = "お知らせ";
      String description = "新しいメッセージの受信などをお知らせするよ";
      int importance = NotificationManager.IMPORTANCE_HIGH;
      NotificationChannel channel = new NotificationChannel(id, name, importance);
      channel.setDescription(description);
      NotificationManager notificationManager = getSystemService(NotificationManager.class);
      notificationManager.createNotificationChannel(channel);
    }
  }

で、 onCreate() の一番下あたりに createNotificationChannel(); と書いて呼び出す。

あとは React Native プロジェクトルートの firebase.json にデフォルトのチャネルを追加。


{
  "react-native": {
    ...
    "messaging_android_notification_channel_id": "notification"
  }
}

id, name, description は適当に変えてください。

脚注

※注1: フォアグラウンド時には messaging().onMessage イベントにより任意の処理を実行できるが、 OS ネイティブ UI の通知として表示するには別途対応が必要）