Flutter × FCMでプッシュ通知を実装する

はじめに

こんにちは、ダイゴです。

Flutter で Firebase Cloud Messaging を用いた通知の実装をする機会があったので、備忘録として記事にしました。

本記事では、パッケージのインポート 〜 テスト通知を受け取る までの流れをまとめています。
どなたかの参考になれば幸いです。

前提として

1. Apple Developer アカウント（99 米ドル ≒ 11,800 円 / 年）
2. iOS の実機デバイス（iOS シミュレータでは通知が動作しないので）

が必要です。

1. パッケージのインポート

dependencies:
  firebase_messaging: ^11.2.8

プロジェクトの pubspec.yamlファイルに、任意のfirebase_messagingバージョンを追記し、pub get します。

2. iOS のセットアップ

ここが少し面倒です。

• Xcode の設定
• APNs と FCM の繋ぎこみ
  • APNs キーを Firebase に登録
  • App Identifier の生成
  • Provisioning Profile の登録

の順で解説していきます。

Xcode の設定

まずは、Xcode の capability（アプリが持つ機能）に

• 「Push Notifications」
• 「Background Modes」

を追加していきます。

Xcode を開き、

①Runner > ②Target Runner > ③Signing & Capabilities を選択します。

その後、①「＋ capability」ボタン から、②Push Notifications を選択することで、通知の設定が有効になります。

Background Modes も同様に、①「＋ capability」ボタン から、②Background Modes を選択し有効化し、

詳細設定として、Background fetch と Remote notifications の両方のサブモードを有効にします。

これで Xcode 側の設定は終了です。

APNs と FCM の繋ぎこみ

APNs(Apple Push Notification service)と FCM（Firebase Cloud Messaging)の繋ぎこみをしていきます。

1. APNs キーを Firebase に登録する
2. App Identifier の生成
3. Provisioning Profile の生成

1. APNs キーを Firebase に登録する

AppleDeveloper のアカウントページを開き、Certificates, Identifiers & Profilesを選択します。

以下のようなページに飛ぶので、Keys から Create Key を選択し、

Key Name に適当な名前をつけて、APNs にチェックを入れます。

Continue を押すと確認画面が表示されるので、内容を確認し、Resister。

① Key ID をコピーしておき、② ファイルをダウンロードします。（再ダウンロードは出来ない点に注意しましょう）

これで、APNs の Key を生成出来ました。

次に、生成した Key を Firebase プロジェクトに登録していきます。
Firebase コンソール から、プロジェクトの設定 > Cloud Messaging を開きます。

Apple アプリの構成 > APNs 認証キー > アップロード から

• ① Key ファイル（先程生成したもの）
• ② Key ID（先程コピーしたもの）
• ③ Team ID（AppleDeveloperページ右上の 8 桁くらいの ID）

を入力し、アップロードします。

これで、APNs キーを Firebase プロジェクトに登録出来ました。

2. App Identifier の生成

次に、App Identifier（バンドル ID やアプリの機能などをまとめた識別情報）を生成します。

Certificates, Identifiers & Profiles > Identifiers > ＋ ボタンを選択

App IDs > App と選択し、説明（なんでもいい）と bundleID を入力します。

capability の部分で Push Notifications を設定し、内容を確認して Resister。

これで、App Identifier の登録が完了しました。

3. Provisioning Profile の生成

最後に Provisioning Profile（AppID や Key などの情報をまとめたファイル）を生成し、アプリ側に登録していきます。

Certificates, Identifiers & Profiles > Profiles > ＋ ボタンを選択

開発版であれば iOS App Development、本番用であれば App Store を選択します。

AppID は、先程生成した App ID を選択します。

任意の Certificates（開発者の証明書）を選択し、

デバイスも登録している場合は選択します。

Profile の名前を記入し、

内容を確認してから Download します。

これで、通知の設定が入った Profile が生成出来たので、Xcode に登録します。

Xcode の ①Runner > ②Target Runner > ③Signing & Capabilities を開き、Provisioning Profile の欄で、先程ダウンロードした Profile を選択します。

少し長かったですが、これで一通りのセットアップが完了しました。

画像付き通知を実装したい場合

追加の設定が必要です。
今回は解説できませんでしたが、公式 Docで詳しく解説されているので、そちらをご覧ください 🙏

3. 通知の送信

通知権限のリクエスト

ようやくアプリ側の実装を進めて行きます。
main.dart 内の関数で通知の権限をリクエストしてみます。

    // FCM の通知権限リクエスト
    final messaging = FirebaseMessaging.instance;
    await messaging.requestPermission(
      alert: true,
      announcement: false,
      badge: true,
      carPlay: false,
      criticalAlert: false,
      provisional: false,
      sound: true,
    );

すると、アプリのビルド時に権限要求のダイアログが表示されました。

権限のステータスは以下の 4 つで、requestPermissionメソッドの返り値である、NotificationSettingsのauthorizationStatus プロパティから確認することが出来ます。

enum AuthorizationStatus {
  /// 承認
  authorized,

  /// 拒否
  denied,

  /// 未定（requestPermission するまではこの状態）
  notDetermined,

  /// 暗黙的な仮承認（iOS 12 以上の場合、requestPermission 時に provisional: true を指定することで、ダイアログ無しに通知を送信することが出来る）
  /// 詳細 → https://firebase.flutter.dev/docs/messaging/permissions/#provisional-authorization
  provisional,
}

https://firebase.flutter.dev/docs/messaging/permissions/

権限が承認したら、最後に、トークンを使ったテスト通知で動作を確認してみます。

トークンを使ったテスト通知

トークン（通知を送るためのデバイスの識別子）を取得し、Firebase コンソールからテスト通知を送ってみます。
getToken メソッドを呼び出し、返り値の token を print してみます。

    // FCM の通知権限リクエスト
    final messaging = FirebaseMessaging.instance;
    await messaging.requestPermission(
      alert: true,
      announcement: false,
      badge: true,
      carPlay: false,
      criticalAlert: false,
      provisional: false,
      sound: true,
    );

    // トークンの取得
    final token = await messaging.getToken();
    print('🐯 FCM TOKEN: $token');

トークンが print されたので、こちらを元に Firebase コンソールから通知を送ります。
トークンをコピーしておき、 Firebase コンソールの Cloud Messaging タブを選択。

テスト用の通知の文章を入力し、

先程コピーした token を入力し、送信してみます。

アプリを Background 状態にすることで、通知が表示されました 🎉

Foregroud 状態で通知を表示するには少し設定が必要なので、公式ドキュメントを参考に実装をしてみて下さい 🙏

状態	説明
Foreground	アプリケーションを開いているとき、表示中＆使用中の状態。
Background	アプリケーションを開いているが、バックグラウンドにある（最小化されている）状態。ユーザーがデバイスの「ホーム」ボタンを押したり、アプリケーションスイッチャーで別のアプリケーションに切り替えたりした場合にこの状態になる。
Terminated	端末がロックされているとき、アプリケーションを起動していない状態。

さいごに

通知機能は、モバイルアプリにおける主要な機能であり、初学者の方でも個人アプリ等に組み込みたいケースが多いと思います。

一方で、実装のハードルが少し高い（特に iOS のセットアップ周り）ので、この記事が少しでもそういった方々の参考になれば嬉しいです。🙏

最後まで読んで頂き、ありがとうございました。

参考

https://firebase.google.com/docs/cloud-messaging

https://firebase.flutter.dev/docs/messaging/usage

お世話になっているコミュニティ

https://kboyflutteruniv.com/

https://community.camp-fire.jp/projects/view/280040