はじめに

プッシュ通知は、ユーザーエンゲージメントを向上させる効果的なツールです。React NativeとFirebaseを組み合わせることで、シームレスなプッシュ通知の実装が可能になります。この記事では、React NativeとFirebaseを用いたプッシュ通知のセットアップについて解説します。

1. ライブラリの追加

react-native-firebase/appの結合

React Nativeのプロジェクトにプッシュ通知を実装するためには、まず@react-native-firebase/appというライブラリを追加する必要があります。以下のコマンドでインストールしましょう。

公式に沿ってライブラリの追加

# npm を使用する
npm install --save @react-native-firebase/app 

# Yarn を使用する
yarn add @react-native-firebase/app

そしてnpx pod-installを実行

何ごともなく完了すれば以下は飛ばしてください。
ここでエラーが発生する場合は、ffiやFirebaseCoreInternalのエラー解消法を以下のTips!セクションで説明します。

Tips!

私の環境ではこの時点でpod installが失敗しました。

M1 Macを使用している場合のffiエラー

m1 macの場合CPUのアーキテクチャが異なるため上記のようなエラーが発生する場合があります。
以下のコマンドで解消しましょう。

sudo Arch -x86_64 gem install ffi

FirebaseCoreInternalのエラー

The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies.

セットアップの段階で発生するエラーとしてはやや気持ち悪い感じはしましたが、エラーが指しているライブラリに対してのみPodfileで以下のように追記するようにしました。

pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true

再度pod installを実施し、成功すればOK

2. Firebaseコンソールの設定

Firebaseのコンソールからプロジェクトを作成します。
バンドルIDはプロジェクトのバンドルIDと一致させる必要があります。

GoogleService-Info.plistをダウンロードし、xcodeからファイルを読み込むように設定します。
xcodeでプロジェクトを開き、「File→Add Files to “***”」から同ファイルを選択します。

その後、/ios/{projectName}/AppDelegate.mmのファイルの以下の位置に、Firebase SDK をインポートする指示を追記します

#import "AppDelegate.h"
#import <Firebase.h>　←追加
・・・

続いて同ファイルのdidFinishLaunchingWithOptionsメソッドの中に以下を追記します

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  ↓追加
  [FIRApp configure];
　...
}

さらにuse_frameworksの箇所を以下に変更

use_frameworks! :linkage => :static

その後、pod install –repo-updateし、npx react-native-run-iosでプロジェクトが起動すればreact-native-firebase/appをプロジェクトに追加する作業は完了となります。

３．react-native-firebase/messagingを追加する

前項の準備ができたらようやくreact-native-firebase/messagingを使ってpush通知の設定をしていきます。まずはパッケージをインストール

yarn add @react-native-firebase/messaging

App Store ConnectとXcodeを使って諸々の設定

ここが少し手間になりますが、XcodeのSigning & CapabilitiesからPush NotificationsとBackground Modesを追加します。

また、BackgroundModeではBackground fetchとRemote notificationsを有効化するようにしましょう。

続いてApp Identifierの登録、 provisioning profileの生成等App Store Connect側での設定が必要になるのですが、こちらについてはrmfirebaseのドキュメントがとてもわかりやすいので割愛します。

rfirebaseで解説している箇所はこちら

４．プロジェクト側の設定

前項までで無事にライブラリの紐付けや証明書関連の設定が完了したら、プロジェクトのソースコードにもいくつか追加をします。

ここでは最低限の処理を記述しますが、まずはユーザーにプッシュ通知の可否を確認してもらう処理を追加します

async function requestUserPermission() {
  const authorizationStatus = await messaging().requestPermission();

  if (authorizationStatus) {
    console.log('Permission status:', authorizationStatus);
  }
}

  useEffect(() => {
    const fetchToken = async () => {
      requestUserPermission();
      await messaging().registerDeviceForRemoteMessages();
    };

    fetchToken();
  }, []);

上記で初回起動時にアプリからプッシュ通知を送ることの可否を確認するポップアップを出すことが可能になります。

ここまででも、firebaseのコンソールからアプリ内の全てのユーザーを対象としてプッシュ通知を送ることは可能となっているはずですので、実際にテストをしてみましょう。

プロジェクトの要件によって処理は変わるので記事としてはここまでとさせていただきますが、

await messaging().registerDeviceForRemoteMessages();
const token = await messaging().getToken();

のようにすることで一意のトークンを取得することができますので、これをユーザーのテーブルに保管するようにしておき、何らかの操作時にこのトークンを取得し、バックエンドでadminSDKを使ってユーザーからユーザーへのアクションに対しての通知を送る、といったよく利用される手法ができるようになります。