【React Native】「React Native Firebase」を導入したiOSアプリでプッシュ通知を受信できない

単なる設定ミスだったのですが、備忘録としてまとめ。
タイトル通り、React Native の iOS アプリに「React Native Firebase」ライブラリの Cloud Messaging を導入したのに、プッシュ通知が受信できない時の対処法です。
なお、Android では正常に受信できていました。

 

まず、ライブラリのインストールは下記のコマンドを実行して行います。

npm install @react-native-firebase/messaging --save
npx pod-install

上記実行後、iOS の場合はセットアップドキュメントを参考に、Xcode の設定と Firebase のコンソールから APNs 認証キーをアップロードする必要があります。

iOS Messaging Setup | React Native Firebase
https://rnfirebase.io/messaging/usage/ios-setup

私の場合、この APNs 認証キーのアップロードをしていなかったのが原因でした…。
うっかりミスにもほどがある…。

まず、Xcode の設定です。
React Native のプロジェクトを開き、TARGETS > Signing & Capabilities タブを開きます。
そして + ボタンから、「Push Notifications」を追加します。
次に、上記と同様の操作をもう一度行い、「Background Modes」も追加します。
そうしたら、「Background fetch」と「Remote notifications」にチェックを入れます。
Xcode での設定は以上です。
なお、こちらの設定については、上記のドキュメントページにスクリーンショット画像付きで説明があるので、そちらをご参考ください。

次に Firebase コンソールでの設定です。
こちらのリンクから、Firebase コンソールを開き、プロジェクトを選択してください。

Firebase console
https://console.firebase.google.com/project/_/settings/cloudmessaging

そうしたら、「プロジェクトの設定」を開き、「Cloud Messaging」のタブを選択します。

上記のページが表示されると思うので、下の方にスクロールし、「iOS アプリの構成」から「APNs 認証キー」をアップロードしてください。
なお、こちらの認証キーは、Apple DeveloperCertificates, Identifiers & Profiles > Keys から新規作成出来ます。
ちなみに、生成したキーをダウンロードできるのは、生成完了後のタイミングのみなので、うっかり削除などしてしまわないように気を付けてください。
Key ID は、あとからでも確認できます。

設定は以上です!
あとは、npx react-native run-ios を実行して、アプリを起動すればOKです。
アプリを一度閉じた後、Firebase コンソールからプッシュ通知を送信してみてください。
正常にプッシュ通知を受け取れたら、設定が正しく行えています。
上でも書きましたが、私の場合は、APNs 認証キーの設定をし忘れていたのが原因でした。
ちなみに、Android では特にこういった設定等は必要ありませんでした。

 

以上、React Native の iOS アプリで「React Native Firebase」ライブラリを導入したのにプッシュ通知を受信できない時の対処法でした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG