Zenn
📝

【Flutter ✖︎ Firebase】FCMのテスト通知が届かない

に公開
Firebase
Flutter
FCM
notification
tech

背景・前提

FCM(Firebase Cloud Messaging)を使用してバックグラウンド状態での通知を実装した際、テスト通知がなぜが届かずに困りました。

以下は問題なく行えていることが確認できています

  • Xcodeの設定
  • APNs と FCM の繋ぎこみ
  • アプリ側で通知を許可している
  • getTokenによるデバイストークンの取得
  • 実機での検証

問題

デバイストークンの取得まで完了し、本来であればFirebaseのコンソール上からテスト通知を送信すれば問題なく通知が送信されるはずが、通知が表示されない状態でした。

原因

結論から書くと、「FirebaseのBundleID」と「XcodeのBundleID」が違うことが原因でした。

Firebase

Xcode

開発の途中でXcode側のBundleIDを変更したことが原因でした。

対応

今回はXcodeのBundle IDに合わせたかったので、一度Firebase上のアプリを削除し、新しいBundle IDで再作成しました。

Firebase に新しい iOS アプリを登録

  1. Firebase コンソールを開く
  2. プロジェクトを選択
    • プロジェクトの設定 → 全般 → アプリ の一覧で、現在の iOS アプリが登録されていることを確認。
    • 既存の iOS アプリ（間違った Bundle ID のもの）は削除できない ため、新しく登録する。
  3. 新しい iOS アプリを追加
    • アプリを追加 → iOS を選択。
    • iOS バンドル ID に Xcode の Bundle Identifier と一致する値 を入力。
    • アプリのニックネーム は任意。
    • App Store ID は未公開アプリなら 空欄でOK。
    • アプリを登録 をクリック。

flutterアプリとFirebaseの再接続

コンソール上で、firebaseと再接続

console
dart pub global activate flutterfire_cli
flutterfire configure
console
// すでに存在する設定をそのまま使うかを聞かれるので、一度削除するという意味のNoを選択
? You have an existing `firebase.json` file and possibly already configured your project for Firebase. Would you prefer to reuse the values in your existing `firebase.json` file to configure your project? (y/n) › no

i Found 2 Firebase projects. Selecting project [project_name].

// 対応させるプラットフォームを選択（iosを選択し、上書きする）
? Which platforms should your configuration support (use arrow keys & space to select)? ›                              
✔ android                                                                    ✔ ios                                                                          macos                                                                        web                                                                          windows

i Firebase android app [パッケージ名] registered.
i Firebase ios app [Bundle ID] registered.

Firebase configuration file lib/firebase_options.dart generated successfully with the following Firebase apps:

Platform  Firebase App Id
android   1:[AppID]
ios       1:[AppID]

登録されたAppIDが新しく作成したものと一致していることを確認する

Flutter

Firebase

GoogleService-Info.plist をダウンロード & 設定

  1. GoogleService-Info.plist をダウンロード。
  2. Xcode の ios/Runner/ フォルダに移動し、古い GoogleService-Info.plist を削除。
  3. 新しい GoogleService-Info.plist を ios/Runner/ に追加。

pod を再インストール

新しい GoogleService-Info.plist を適用するため、Pod を更新します。

cd ios
pod install --repo-update
cd ..

APNs 設定を更新

Firebase でプッシュ通知を正しく受け取るために、APNs の設定をやり直す必要があります。
新しいBundleIDで作成したアプリに対して、APNs認証キーを設定します。

  1. Apple Developer Console にログイン
  2. APNs 認証キー（.p8）をダウンロード
    • Certificates, Identifiers & Profiles → Keys → + をクリック。
    • Key Name を適当に入力（例：FCM Push Key）。
    • APNs にチェックを入れる。
    • Continue → Register → .p8 ファイルをダウンロード。
  3. Firebase にアップロード
    • Firebase コンソールを開き、プロジェクトの設定 → Cloud Messaging タブへ。
    • iOS アプリの設定 で .p8 をアップロード。
      • 先ほど作成したアプリにアップロードします

検証

再度Firebaseから通知を送信します

再度通知のテストを実行すると、問題なく表示されました。

おわりに

今回の現象は直接通知機能には関連していないものの、Flutter ✖︎ Firebaseの構成ではよく起こる現象かと思うので、今回を機にFultterとFirebase間での情報の乖離がないかも確認していきたいなと思います。

サクッと実装できるかと思っていたのですが、意外なところで躓いてしまいました😭
同じ問題に当たった方の参考になれば嬉しいです！読んでいただき、ありがとうございます😀

Discussion