🐯

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

2022/03/02に公開約9,100字

はじめに

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

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

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

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 fetchRemote 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メソッドの返り値である、NotificationSettingsauthorizationStatus プロパティから確認することが出来ます。

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
GitHubで編集を提案

Discussion

ログインするとコメントできます