2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React Native Firebase v6 + Android 8+ でプッシュ通知受信時のポップアップ表示させる

Last updated at Posted at 2020-07-14

やりたいこと

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 の通知として表示するには別途対応が必要)

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?