【ReactNative】react-native-firebaseのv6系でAndroidの通知ポップアップを出す

前提条件

• react-native-firebaseのv6系(記事中では下記モジュールを使用)

  • "@react-native-firebase/app": "8.3.1"
  • "@react-native-firebase/messaging": "7.7.2
• react-nativeは0.6系以上(記事中は0.63.1)
• 公式のセットアップに従い、プッシュ通知が受信するところまでは進んでいる前提

はじめに

react-native-firebaseでプッシュ通知が届く状態(トークンの取得やら、受信のイベントハンドラの設置やらが完了)にしても、Android 8以降の端末ではプッシュ通知のポップアップが表示されず、サイレントで通知が届くと思います。 これには、まずAndroidのプッシュ通知の仕様を知る必要があります。

なぜAndroid 8だとサイレント通知になる？

Android 8(Oreo)から通知チャンネルという機能が追加されました。

• 公式 | 通知チャネルを作成して管理する

これ以降、プッシュ通知で音やポップアップを表示する場合は通知チャンネル(カテゴリと読み替えてもいいかもしれません)を明示的に指定しなければなりません。 react-native-firebase/messagingを一通り組み込んだ段階では、この通知チャンネルの指定が出来ていない状態のため、Android 8以降ではサイレント通知となります。

v5系まではソース上で指定ができた

この通知チャンネルの指定ですが、v5系まではnotifications()というモジュール以下で指定ができました。 しかし、v6系では廃止されたらしく、指定には少し工夫が必要です。

v6系で通知チャンネルを指定する方法

MainActivityの修正

指定はAndroidのネイティブコードの中で行います。 対象はMainActivity.javaでandroid/app/src/main/java/com/{appName}にあります。

下記のようにソースを変更します。

package hogehoge;

import android.os.Bundle;
import android.os.Build; // 追加
import android.app.NotificationChannel; // 追加
import android.app.NotificationManager; // 追加
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // チャンネル作成処理を実行
        createNotificationChannel();
    }

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "appname";
  }

  /**
   * 通知チャンネルの作成
   */
  private void createNotificationChannel() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
      // 通知ID
      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);
    }
  }
}

firebase.jsonの作成

さらにデフォルトの通知チャンネルを指定するためfirebase.jsonに記載を追加します。 未作成の場合は作成しましょう。

touch firebse.json

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

まとめ

今回は、react-native-firebaseのプッシュ通知をAndroid 8以降のバージョンで通知ポップアップを表示させるため、通知チャンネルを設定する方法をご紹介しました。 通知の設定周りについてはiOSの方が面倒な印象がありますが、AndroidもOSのバージョンによって対応が異なるため、それなりに手間がかかりますね。

参考文献

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

ReactNativeの学習方法

react-nativeの学習には、大元であるreactの知識もさることながら、iOSやAndroidといったネイティブの知識も必要になってきます。

いずれかのバックボーンを元々持っている人にとっては取り掛かりやすいかもしれませんが、Javascriptをようやく覚えて「さあスマホアプリを作ろう！」と思い立った方にはなかなか高いハードルです。

そういった場合、書籍や動画といった体系的にまとめられた教材を使用するのが有効です。

ひととおりの基本知識を蓄えてから各種ライブラリやreduxといったフレームワークを利用することになるため、何は無くとも基礎固めをしていきましょう。

以下に管理人が実際に学習した教材を紹介します。

React Native -JavaScriptによるiOS/Androidアプリ開発の実践

特に初心者〜中級者にオススメの書籍です。 ReactNativeの体系的な知識をぎゅっと詰め込んだ一冊となっており、 お題目に沿って進めていくことでTODOアプリを開発することができます。

※ページ量が嵩むため、Kindle版の購入をオススメします。

Ｒｅａｃｔ　Ｎａｔｉｖｅ ＪａｖａＳｃｒｉｐｔによるｉＯＳ／Ａｎｄｒｏｉｄア /技術評論社/〓木健介

posted with カエレバ

楽天市場

Amazon

SNSでシェアする

タグ

• react-native
• react
• firebase
• プッシュ通知
• android
• oreo