Zenn
💫

Flutter2でもプッシュ通知を簡単に実装したい

2021/07/14に公開
Firebase
Flutter
#
プッシュ通知
tech

1. はじめに

Flutterの進化は目まぐるしいですよね。今年の5月にはFlutter2がリリースされ、 先日のv2.2のリリースでは、 主要なFirebase関連のプラグインもアップデートされました。
プッシュ通知を送る、FirebaseCloudMessaging(以下FCM)プラグインであるfirebase_messagingもその例外ではありません。v9からv10へのアップデートに伴い、APIが大きく変わりました。 Flutter2を使用するためには、FCMプラグインも最新にしないといけないため、対応に追われてる方も多いと思います。残念ながら、ネット上の解説記事はfirebase_messaging v9以前の旧APIのものが多いため、参考になりません。

firebase_messaging v10の問題

2021年7月現在、firebase_messagingはv10です。
v9以前とは異なり、デフォルトで以下の制限があります。

  • フォアグラウンド通知を受け取れない(iOS)
  • フォアグラウンド通知を受け取れない(Android)

フォアグラウンド通知を有効化する

フォアグラウンド通知を有効にするには、iOS、Android個別に対応する必要があります。

iOS

iOSの場合は、以下メソッドをFlutterで呼び出すだけでokです。

await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(
  alert: true, // Required to display a heads up notification
  badge: true,
  sound: true,
);

Android

Androidの設定はiOSと比べて手順が多いです。flutter_local_notificationsというパッケージを使用し、Kotlinのコードを書く必要があります。詳しい実装はこちら。

fcm_configパッケージ

そこで登場するのがこのfcm_configパッケージ。iOS、Androidでの通知機能を簡単に実装できます。ネイティブコードを書く必要はありませんし、通知を受け取るだけであれば、追加でコードを書く必要さえありません。公式はこちら。

2. 実装

今回はfcm_configパッケージを使用し、プッシュ通知を実装していきます。

環境

  • Flutter stable v2.2.3
  • firebase_messaging v10.0.3
  • fcm_config v3.0.7

事前準備

  • FlutterFire パッケージの導入が完了していること
    まだの方はこちらからどうぞ。

iOS

  • Apple Developer Accountの登録が完了していること
  • 通知設定が完了していること
    まだの方はこちらからどうぞ。
  • 実機を持っていること

Android

設定は必要ありません。
Apple Developer Accountは毎年12,980円かかるため、未登録の方は、Androidで動作確認をするのがオススメです。Emulatorも使えますので実機不要です。

fcm_configを追加

flutter pub add fcm_config

もしくは以下をpubspec.yamlに追加してください。

dependencies:
  fcm_config: ^3.0.7

バックグラウンド+ターミネーテッド状態で通知を受け取る

以下の実装をすることにより、アプリがバックグラウンド+ターミネーテッド状態でも通知を受け取れるようになります。詳しくはこちら。

    Future<void> _fcmBackgroundHandler(RemoteMessage message) async {
     print("Handling a background message: ${message.messageId}");
    }

上記関数をトップレベルで作成し、fcm_configパッケージ初期化時のonBackgroundMessageに渡します。

    void main() {
      // fcm_configパッケージを初期化
      FCMConfig.instance.init(onBackgroundMessage:_fcmBackgroundHandler);
      runApp(MaterialApp(
        home: MyHomePage(),
      ));
    }

トークンを取得する

サーバから端末(例えばスマフォ)へ通知を送るためには、端末に紐づけられたトークンにアクセスしなければいけません。
トークンは端末が自動的に作成し、Cloud Messaging moduleによってアクセスされます。
詳しい説明はこちら。
以下メソッドによってトークン取得が可能です。Cloud Firestoreを利用している場合、こちらに保存するといいでしょう。

final token = await FCMConfig.messaging.getToken();
print(token);

通知を受け取る

ダイアログ

通知が来た時のダイアログは以下のように書きました。
今回はテスト通知を送るだけなので、タイトルおよび本文はハードコーディングしました。

Future<void> dialog() {
    return showDialog(
      context: context,
      builder: (_) {
        return AlertDialog(
          title: Text("通知"),
          content: Text("通知がきました"),
          actions: <Widget>[
            // ボタン領域
            TextButton(
              child: Text("Cancel"),
              onPressed: () => Navigator.pop(context),
            ),
            TextButton(
              child: Text("OK"),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        );
      },
    );
  }

通知が来た際の処理

端末に通知を送る前に、通知を受け取れるようにします。
FCMNotificationListener はfcm_configパッケージで用意されているWidgetです。
アプリがフォアグラウンド状態で新しい通知が来るたびに、呼ばれます。
今回は、通知が来た際、↑のダイアログが呼ばれるようにしました。

FCMNotificationListener(
        onNotification: (RemoteMessage notification, _) async {
          await dialog();
        }

通知を送信する

Firebaseのダッシュボード上からCloud Messagingタブを選択します。
その後、タイトル、本文を追加、トークンを指定して、テストをタップすれば、スマフォに通知が飛んできます。

3. まとめ

いかがでしたでしょうか。fcm_configパッケージを使って簡単にプッシュ通知が実装できたと思います。一部機能には制限がありますが、シンプルな通知を実装するだけであれば十分ではないでしょうか。
コードは以下に置いておきます。常識の範囲内でご自由にお使いください。
https://github.com/mafreud/fcm_config_sample

今後もFlutter、Firebase関連のチュートリアルをあげていく予定です。知りたいことありましたらこちらにコメントください！
https://zenn.dev/rafekun/scraps/2d92b2a20c2285

Discussion