💫

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

6 min read

1. はじめに

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

サンプルコードは以下からclone可能です。ご自由にお使いください。
https://github.com/mafreud/fcm_config_sample
ただし、コードはAndroidのみに対応し、セキュリティ上の観点からgoogle-service.jsonは除外してありますので、使用する際は追加してください。

プッシュ通知の実装を簡単にするために、今回はfcm_configというパッケージを使用します。
このパッケージは、heads-up通知をオフにできないという制限があります。heads-up通知をオフにしたい場合やより自由度高く通知を実装したい場合、公式推奨の実装がオススメです。

firebase_messaging v10の問題

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

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

アプリの状態について、公式の説明を意訳しました。

状態 説明
フォアグラウンド(foreground) アプリを開いている、使ってる、もしくは閲覧している状態。
バックグラウンド(background) アプリを開いているが、アプリが最小化された状態。ユーザーがホームボタンを押した時や、別のアプリを開いている状態。webの場合は、別のタブを閲覧している状態。
ターミネーテッド(terminated) 端末がロックされている、もしくはアプリが終了している状態。ユーザーはアプリをバックグラウンドから削除し、ターミネーテッド状態にすることができる。webの場合はタブを閉じた場合、ターミネーテッド状態になる。

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

フォアグラウンド通知を有効にするには、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での通知機能を簡単に実装できます。ネイティブコードを書く必要はありませんし、通知を受け取るだけであれば、追加でコードを書く必要さえありません。公式はこちら

fcm_configパッケージを利用すると、公式プラグインの導入と比べて、プッシュ通知の実装が簡単にできます。しかし、公式プラグインとは用意されているメソッドが簡略化されているため、ビジネス要件を達成できないかもしれません。また、Flutterチーム公式のパッケージではないため、開発が途中で中止される可能性があります。ユースケースに合わせて利用を検討してください。

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

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