Firebase Cloud Messaging を使用して Flutter アプリの通知を送受信する

1. はじめに

最終更新日: 2022 年 4 月 4 日

この Codelab では、Flutter を使用して Firebase Cloud Messaging（FCM）でマルチプラットフォーム アプリを開発する手順について説明します。アプリの実装を 1 つ作成し、Android、iOS、ウェブの 3 つのプラットフォームでシームレスにビルドして実行します。また、Flutter で FCM を統合する方法と、メッセージの送受信を行うコードを記述する方法も学習します。最後に、この Codelab では、FCM HTTP v1 API のプラットフォーム固有のブロック機能を紹介します。この機能を使用すると、プラットフォームごとに異なる動作をするメッセージを 1 つ送信できます。

要件

Flutter に関する基礎知識。

学習内容

• Flutter アプリをセットアップして作成する方法。
• FCM の依存関係を追加する方法。
• アプリに単一の FCM メッセージを送信する方法。
• トピック FCM メッセージをアプリに送信する方法。

必要なもの

• Dart プラグインと Flutter プラグインで構成された Android Studio の最新の安定版。

この Codelab は、次のいずれかのデバイスを使って実行できます。

• パソコンに接続されている Android の実機。
• Android エミュレータ（Android Emulator 上でアプリを実行するを参照）。
• Chrome などの任意のブラウザ。

必要に応じて、iOS プラットフォームを使用して Codelab を実行するには、iOS デバイス、Apple Developer アカウント、XCode がインストールされた macOS デバイスが必要です。

2. Flutter の設定

Flutter 開発環境がすでに設定されている場合は、このセクションをスキップしてください。

Flutter 開発環境を設定する手順は次のとおりです。

1. オペレーティング システム用の Flutter をダウンロードしてインストールします。インストール | Flutter
2. Flutter ツールがパスに追加されていることを確認します。
3. エディタを設定する | Flutter に示すように、Flutter 用のエディタを設定します。エディタ用の Flutter プラグインと Dart プラグインを必ずインストールしてください。この Codelab の以降の部分では、Android Studio を使用します。
4. コマンドラインから flutter doctor を実行します。これにより、設定がスキャンされ、修正が必要な不足している依存関係が一覧表示されます。手順に沿って、重要な依存関係の欠落を修正します。一部の依存関係は不要な場合があります。たとえば、iOS 向けの開発を行わない場合は、CocoaPods の依存関係が欠落していても問題にはなりません。
5. このコマンドを実行すると、fcmflutter ディレクトリ flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter に Flutter アプリが作成され、ディレクトリが fcmflutter に変更されます。

6. Android Studio で、[File] -> [Open] に移動し、Flutter アプリのパスを見つけて [Open] をクリックして Android Studio でプロジェクトを開きます。アプリコードは lib/main.dart ファイルにあります。

Android Studio のツールバーで、下向き矢印をクリックして Android デバイスを選択します。ターゲット セレクタが空の場合は、仮想 Android デバイス、またはウェブブラウザや iOS デバイスからアプリを起動する場合は Chrome ブラウザまたは iOS シミュレータをインストールします。デバイスを手動で起動し、リストを更新してターゲット デバイスを見つける必要がある場合があります。

[実行 ] をクリックしてアプリを起動します。

これで完了です。Flutter アプリが正常に作成されました。

3. Firebase と FlutterFire の設定

Flutter を使用して Firebase Cloud Messaging と統合するアプリを開発するには、次のものが必要です。

• Firebase プロジェクト
• 動作する Firebase CLI。
• FlutterFire のインストール。
• flutterfire configure で構成および生成されたアプリ。

Firebase プロジェクトを作成する

Firebase プロジェクトをすでに作成している場合は、この手順をスキップできます。

1. Google アカウントを使用して Firebase コンソールにログインします。
2. ボタンをクリックして新しいプロジェクトを作成し、プロジェクト名（例: fcm4flutter）を入力します。
   
3. [続行] をクリックします。
4. Firebase の利用規約が表示されたら、内容を読み、同意して [続行] をクリックします。
5. （省略可）Firebase コンソールで AI アシスタンス（「Gemini in Firebase」）を有効にします。
6. この Codelab では Google アナリティクスは必要ないため、Google アナリティクスのオプションをオフに切り替えます。
7. [プロジェクトを作成] をクリックし、プロジェクトのプロビジョニングが完了するまで待ってから、[続行] をクリックします。

これで完了です。Firebase プロジェクトが正常に作成されました。

Firebase CLI を設定する

Firebase CLI が設定されている場合は、この手順をスキップできます。

Firebase CLI リファレンスに移動して、Firebase CLI をダウンロードしてインストールします。次のコマンドを使用して、Google アカウントで Firebase にログインします。

firebase login

FlutterFire を設定する

1. コマンド flutter pub add firebase_core を使用して FlutterFire プラグインをインストールします。
2. FCM プラグインをインストールします。flutter pub add firebase_messaging
3. FlutterFire CLI を設定します。dart pub global activate flutterfire_cli
4. Flutter で Firebase プロジェクトを構成する: flutterfire configure --project=fcm4flutter. 矢印キーと Space キーを使用してプラットフォームを選択するか、Enter キーを押してデフォルトのプラットフォームを使用します。

この Codelab ではデフォルトのプラットフォーム（Android、iOS、ウェブ）を使用しますが、1 つまたは 2 つのプラットフォームのみを選択することもできます。iOS バンドル ID の入力を求められたら、com.flutter.fcm.fcmflutter または独自の iOS バンドル ID を [company domain name].[project name] 形式で入力します。コマンドが完了したら、Firebase コンソールのページを更新します。選択したプラットフォームのアプリが Firebase プロジェクトに作成されていることがわかります。

このコマンドは、初期化に必要なすべてのオプションを含む lib ディレクトリに firebase_options.dart ファイルを生成します。

iOS 向けに Cloud Messaging を設定する

1. Apple のデベロッパー ページに移動し、[キー] タブで [キーを作成] をクリックします。

2. 鍵の名前を入力し、[Apple Push Notification Service（APNs）] をオンにします。
3. .p8 というファイル拡張子が付いた鍵ファイルをダウンロードします。
4. Firebase コンソールで、プロジェクトの [プロジェクトの設定] に移動し、[Cloud Messaging] タブを選択します。

5. [Cloud Messaging] タブで、iOS アプリの APNs キーファイルをアップロードします。[Cloud Messaging] タブの APNs キー ID と、Apple メンバーシップ センターで確認できるチーム ID を入力します。

4. FCM の準備

アプリが FCM からメッセージを受信するには、次の操作を行う必要があります。

• FlutterFire を初期化します。
• 通知権限をリクエストします。
• FCM に登録して登録トークンを取得します。

初期化

サービスを初期化するには、main 関数（lib/main.dart）を次のコードに置き換えます。

// core Flutter primitives
import 'package:flutter/foundation.dart';
// core FlutterFire dependency
import 'package:firebase_core/firebase_core.dart';
// generated by 

flutterfire configure

import 'firebase_options.dart';
// FlutterFire's Firebase Cloud Messaging plugin
import 'package:firebase_messaging/firebase_messaging.dart';

// TODO: Add stream controller
// TODO: Define the background message handler

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );

 // TODO: Request permission
 // TODO: Register with FCM
 // TODO: Set up foreground message handler
 // TODO: Set up background message handler

 runApp(MyApp());
}

次に、Android Studio で [Tools] -> [Flutter] -> [Flutter Pub Get] を実行して、FlutterFire の設定で追加したパッケージを読み込み、Android Studio で適切な Intellisense 設定でコードを表示します。

これにより、現在のプラットフォーム DefaultFirebaseOptions.currentPlatform の FlutterFire が初期化されます。これは、生成された firebase_options.dart ファイルからインポートされます。initializeApp は非同期関数であり、await キーワードにより、アプリケーションの実行前に初期化が完了します。

権限をリクエストする

アプリは、通知を受信するためのユーザーの権限をリクエストする必要があります。firebase_messaging が提供する requestPermission メソッドは、権限を許可または拒否するよう求めるダイアログまたはポップアップをユーザーに表示します。

まず、このコードをコメント TODO: Request permission の下のメイン関数にコピーします。返された settings は、ユーザーが権限を付与したかどうかを示します。権限のリクエストは、アクセスが必要な機能を使用する必要がある場合（アプリの設定で通知をオンにする場合など）にのみ行うことをおすすめします。この Codelab では、わかりやすくするために、アプリの起動時に権限をリクエストします。

final messaging = FirebaseMessaging.instance;

final settings = await messaging.requestPermission(
 alert: true,
 announcement: false,
 badge: true,
 carPlay: false,
 criticalAlert: false,
 provisional: false,
 sound: true,
);

 if (kDebugMode) {
   print('Permission granted: ${settings.authorizationStatus}');
 }

次に、Android Studio のツールバーで、ターゲット セレクタから Chrome (web) を選択し、アプリを再度実行します。

その後、Chrome のタブが起動し、権限を求めるポップアップが表示されます。Allow をクリックすると、Android Studio コンソールに Permission granted: AuthorizationStatus.authorized のログが表示されます。権限リクエストを許可またはブロックすると、その応答がブラウザ内のアプリとともに保存され、ポップアップは再び表示されなくなります。Android Studio でウェブアプリを再度実行すると、権限の付与を再度求められることがあります。

登録

このコードを、コメント TODO: Register with FCM の下の main 関数にコピーして、FCM に登録します。getToken 呼び出しは、アプリサーバーまたは信頼できるサーバー環境がユーザーにメッセージを送信するために使用できる登録トークンを返します。

// It requests a registration token for sending messages to users from your App server or other trusted server environment.
String? token = await messaging.getToken();

if (kDebugMode) {
  print('Registration Token=$token');
}

Android Studio のツールバーで Android デバイスを選択し、アプリを実行します。Android Studio のコンソールに、次のように登録トークンが出力されます。

I/flutter ( 3717): Permission granted: AuthorizationStatus.authorized
I/flutter ( 3717): Registration Token=dch. . . D2P:APA9. . .kbb4

この値は後でメッセージの送信に使用するため、テキスト エディタにコピーします。

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:firebase_messaging]

ウェブでメッセージを受信するための追加の手順

ウェブアプリで登録トークンを取得して受信メッセージをリッスンするには、2 つの追加手順が必要です。ウェブは、サポートされているウェブプッシュ サービスへの送信リクエストを承認するために、VAPID 鍵を getToken に渡す必要があります。

まず、Firebase コンソールの Firebase プロジェクトで [Cloud Messaging] タブを開き、[ウェブ設定] セクションまでスクロールして、既存のキーペアを見つけるか、新しいキーペアを生成します。ハイライト表示されたボタンをクリックして鍵をコピーし、vapidKey として使用できるようにします。

次に、[Registration] セクションの登録コードをこのコードに置き換え、vapidKey を更新します。

// TODO: replace with your own VAPID key
 const vapidKey = "<YOUR_PUBLIC_VAPID_KEY_HERE>";

 // use the registration token to send messages to users from your trusted server environment
 String? token;

 if (DefaultFirebaseOptions.currentPlatform == DefaultFirebaseOptions.web) {
   token = await messaging.getToken(
     vapidKey: vapidKey,
   );
 } else {
   token = await messaging.getToken();
 }

 if (kDebugMode) {
   print('Registration Token=$token');
 }

次に、プロジェクトのルートにある web/ ディレクトリの下に firebase-messaging-sw.js ファイルを作成します。次のコードを firebase-messaging-sw.js にコピーして、ウェブアプリが onMessage イベントを受け取れるようにします。詳細については、Service Worker での通知オプションの設定をご覧ください。

importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");

// todo Copy/paste firebaseConfig from Firebase Console
const firebaseConfig = {
 apiKey: "...",
 authDomain: "...",
 databaseURL: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// todo Set up background message handler

次に、[プロジェクトの設定] -> [全般] タブで下にスクロールして [ウェブアプリ] を見つけ、firebaseConfig コード セクションをコピーして firebase-messaging-sw.js に貼り付けます。

最後に、Android Studio のツールバーで、ターゲット セレクタの Chrome (web) を選択してアプリを実行します。Android Studio のコンソールに、登録トークンが次のように出力されます。

Debug service listening on ws://127.0.0.1:61538/BLQQ3Fg-h7I=/ws
Permission granted: AuthorizationStatus.authorized
Registration Token=fH. . .ue:APA91. . .qwt3chpv

登録トークンをテキスト エディタにコピーして、後でメッセージの送信に使用できるようにします。

iOS でメッセージを受信するための追加の手順

FCM からメッセージを受信するには、iOS デバイスで Xcode の [プッシュ通知] と [バックグラウンド モード] を有効にする必要があります。

1. Android Studio で、プロジェクト名を右クリックし、[Flutter] -> [Open iOS module in Xcode] を選択します。
2. Xcode が起動したら、プロジェクト ターゲットの [Signing & Capabilities] タブで [Push Notifications] と [Background Modes] を有効にします。詳細については、アプリを構成するをご覧ください。
3. Android Studio のツールバーで、ターゲット セレクタで iOS デバイスを選択し、アプリを実行します。通知権限が付与されると、登録トークンが Android Studio コンソールに出力されます。

おめでとうございます。アプリが FCM に正常に登録されました。次のセクションで説明するように、メッセージを受信する準備が整いました。

5. FCM からメッセージを受信する

メッセージ ハンドラを設定する

アプリは、アプリがフォアグラウンド モードのときにメッセージが届いた場合は onMessage イベントを処理し、アプリがバックグラウンドのときは onBackgroundMessage イベントを処理する必要があります。

フォアグラウンド メッセージ ハンドラ

まず、ファイル main.dart のコメント TODO: Add stream controller の後にストリーム コントローラを追加して、イベント ハンドラから UI にメッセージを渡します。

import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();

依存関係 rxdart を追加するには、プロジェクト ディレクトリから flutter pub add rxdart コマンドを実行します。

次に、Android Studio で [Tools] -> [Flutter] -> [Flutter Pub Get] を実行して rxdart.dart パッケージを読み込み、Android Studio で適切な Intellisense 設定でコードを表示します。

次に、コメント TODO: Set up foreground message handler の後に、フォアグラウンド メッセージをリッスンするイベント ハンドラを追加します。ログを出力し、メッセージをストリーム コントローラにパブリッシュします。

 FirebaseMessaging.onMessage.listen((RemoteMessage message) {
   if (kDebugMode) {
     print('Handling a foreground message: ${message.messageId}');
     print('Message data: ${message.data}');
     print('Message notification: ${message.notification?.title}');
     print('Message notification: ${message.notification?.body}');
   }

   _messageStreamController.sink.add(message);
 });

その後、ファイル main.dart の元の State ウィジェットをこのコードに置き換えます。このコードは、State ウィジェットのストリーム コントローラにサブスクライバーを追加し、ウィジェットに最後のメッセージを表示します。

class _MyHomePageState extends State<MyHomePage> {
 String _lastMessage = "";

 _MyHomePageState() {
   _messageStreamController.listen((message) {
     setState(() {
       if (message.notification != null) {
         _lastMessage = 'Received a notification message:'
             '\nTitle=${message.notification?.title},'
             '\nBody=${message.notification?.body},'
             '\nData=${message.data}';
       } else {
         _lastMessage = 'Received a data message: ${message.data}';
       }
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('Last message from Firebase Messaging:',
               style: Theme.of(context).textTheme.titleLarge),
           Text(_lastMessage, style: Theme.of(context).textTheme.bodyLarge),
         ],
       ),
     ),
   );
 }
}

Android/iOS のバックグラウンド メッセージ ハンドラ

アプリがバックグラウンドで動作している間、メッセージは onBackgroundMessage ハンドラによって処理されます。ハンドラはトップレベル関数である必要があります。アプリがフォアグラウンドに切り替わったときに、メッセージを処理する（インタラクションの処理を参照）か、アプリサーバーと同期することで、UI を更新できます。

コメント TODO: Define the background message handler の後にメイン関数外でハンドラ関数を作成し、コメント TODO: Set up background message handler の後にメイン関数内で呼び出します。

// TODO: Define the background message handler
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
 await Firebase.initializeApp();

 if (kDebugMode) {
   print("Handling a background message: ${message.messageId}");
   print('Message data: ${message.data}');
   print('Message notification: ${message.notification?.title}');
   print('Message notification: ${message.notification?.body}');
 }
}

void main() {
 ...

 // TODO: Set up background message handler
 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

 runApp(MyApp());
}

ウェブのバックグラウンド メッセージ ハンドラ

FlutterFire の firebase_messaging バージョン 11.2.8 以降では、ウェブベースのプラットフォームでバックグラウンド メッセージを処理する際に別のフローが必要になります。そのため、サービス ワーカー web/firebase-messaging-sw.js に別のメッセージ ハンドラを追加する必要があります。

messaging.onBackgroundMessage((message) => {
 console.log("onBackgroundMessage", message);
});

アプリサーバーを設定する

1. Android Studio で https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server プロジェクトを開いて、スターター サーバーコードをインポートします。サーバーは、firebase-admin SDK に依存する Gradle ベースの Java プロジェクトです。この SDK は FCM メッセージ送信機能を提供します。
2. Firebase Admin SDK が FCM API への呼び出しを承認できるようにする Firebase サービス アカウントを設定します。Firebase コンソールで [プロジェクトの設定] を開き、[サービス アカウント] タブを選択します。[Java] を選択し、Generate new private key をクリックして構成スニペットをダウンロードします。
3. ファイルの名前を service-account.json に変更し、サーバー プロジェクトの src/main/resources パスにコピーします。

テスト メッセージを送信する

FcmSender.java ファイルで、sendMessageToFcmRegistrationToken はデータ ペイロードを含む通知メッセージを作成します。登録トークンは、メッセージの送信先となるアプリ インスタンスをターゲットにします。

private static void sendMessageToFcmRegistrationToken() throws Exception {
   String registrationToken = "REPLACE_WITH_FCM_REGISTRATION_TOKEN";
   Message message =
       Message.builder()
           .putData("FCM", "https://firebase.google.com/docs/cloud-messaging")
           .putData("flutter", "https://flutter.dev/")
           .setNotification(
               Notification.builder()
                   .setTitle("Try this new app")
                   .setBody("Learn how FCM works with Flutter")
                   .build())
           .setToken(registrationToken)
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to FCM Registration Token sent successfully!!");
 }

1. [Registration] セクションからコピーした Android 登録トークンをコピーし、変数 registrationToken の値に貼り付けます。
2. [実行 ] をクリックしてメイン関数を実行し、FCM を介してユーザーにメッセージを送信します。

Android アプリがバックグラウンドで動作している場合、メッセージは通知トレイに表示されます。

Android アプリがフォアグラウンドにある場合、Android Studio コンソールに「Handling a foreground message」というログが表示されます。UI は新しいメッセージのストリーム コントローラに登録されているため、メッセージの内容も UI に表示されます。

登録トークンを貼り付けて、アプリサーバーまたは他の信頼できるサーバー環境からメッセージを送信すると、同様の動作になります。

• ウェブアプリがバックグラウンドにある場合（別のウィンドウで隠れている場合や、別のタブがアクティブになっている場合など）、ウェブ通知が表示されます。

• ウェブアプリがフォアグラウンドにある場合は、ウェブを右クリックして Inspect を選択すると、Chrome コンソールでログを表示できます。メッセージの内容は UI にも表示されます。

6. トピック メッセージを送信する

FCM HTTP v1 API のプラットフォーム オーバーライド機能を使用すると、メッセージ送信リクエストの動作をプラットフォームごとに変更できます。この機能のユースケースの 1 つは、プラットフォームに基づいて異なる通知メッセージの内容を表示することです。この機能は、トピック メッセージングで複数のデバイス（複数のプラットフォームにまたがる可能性あり）をターゲットに設定する場合に最も効果を発揮します。このセクションでは、アプリが各プラットフォーム用にカスタマイズされたトピック メッセージを受信できるようにする手順について説明します。

クライアントからトピックに登録する

トピックにサブスクライブするには、Flutter アプリの main.dart ファイルの main 関数の最後に messaging.subscribeToTopic メソッドを呼び出します。

// subscribe to a topic.
const topic = 'app_promotion';
await messaging.subscribeToTopic(topic);

[省略可] ウェブ用のサーバーからトピックに登録する

ウェブ プラットフォームで開発していない場合は、このセクションをスキップできます。

FCM JS SDK は現在、クライアントサイドのトピック登録をサポートしていません。代わりに、Admin SDK のサーバーサイド トピック管理 API を使用して登録できます。このコードは、Java Admin SDK を使用したサーバーサイドのトピック サブスクリプションを示しています。

 private static void subscribeFcmRegistrationTokensToTopic() throws Exception {
   List<String> registrationTokens =
       Arrays.asList(
           "REPLACE_WITH_FCM_REGISTRATION_TOKEN"); // TODO: add FCM Registration Tokens to
   // subscribe
   String topicName = "app_promotion";

   TopicManagementResponse response =     FirebaseMessaging.getInstance().subscribeToTopic(registrationTokens, topicName);
   System.out.printf("Num tokens successfully subscribed %d", response.getSuccessCount());
 }

アプリサーバーを開き、[実行 ] をクリックして、FcmSubscriptionManager.java ファイルのメイン関数を実行します。

プラットフォームのオーバーライドを使用してトピックにメッセージを送信する

これで、トピック プラットフォームのオーバーライド メッセージを送信する準備が整いました。次のコード スニペットをご覧ください。

• 基本メッセージとタイトル「A new app is available」を使用して送信リクエストを作成します。
• このメッセージにより、iOS とウェブ プラットフォームで「A new app is available」というタイトルのディスプレイ通知が生成されます。
• このメッセージにより、Android デバイスにタイトル「A new Android app is available」の表示通知が生成されます。

private static void sendMessageToFcmTopic() throws Exception {
   String topicName = "app_promotion";

   Message message =
       Message.builder()
           .setNotification(
               Notification.builder()
                   .setTitle("A new app is available")
                   .setBody("Check out our latest app in the app store.")
                   .build())
           .setAndroidConfig(
               AndroidConfig.builder()
                   .setNotification(
                       AndroidNotification.builder()
                           .setTitle("A new Android app is available")
                           .setBody("Our latest app is available on Google Play store")
                           .build())
                   .build())
           .setTopic("app_promotion")
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to topic sent successfully!!");
 }

FcmSender.java ファイルの main 関数で、sendMessageToFcmTopic(); のコメントを解除します。[実行 ] をクリックして、トピック メッセージを送信します。

7. まとめと次のステップ

まとめると、Flutter と FCM を使用した魅力的なマルチプラットフォーム アプリ開発について学習しました。これには、環境設定、依存関係の統合、メッセージの受信と送信が含まれます。詳細については、次の資料をご覧ください。

Codelabs

• ユーザー認証やデータの同期など、Flutter と他の Firebase プロダクトの連携について詳しくは、Firebase for Flutter を理解するをご覧ください。
• In-App Messaging やトピックなど、FCM の詳細については、FCM と FIAM を使用してユーザーにメッセージを送信するとFCM トピックを使用した最初のマルチキャスト プッシュ メッセージをご覧ください。

参照

• Firebase サイト
• Flutter サイト
• FlutterFire Firebase Flutter ウィジェット
• Firebase の YouTube チャンネル
• Flutter の YouTube チャンネル