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 Emulator(Android Emulator 上でアプリを実行するを参照)
- Chrome などの任意のブラウザ。
必要に応じて、iOS プラットフォームで Codelab を実行するには、iOS デバイス、Apple Developer アカウント、XCode がインストールされた macOS デバイスが必要です。
2. Flutter のセットアップ
すでに Flutter の開発環境をセットアップ済みの場合は、このセクションをスキップしてください。
Flutter の開発環境をセットアップする手順は次のとおりです。
- お使いのオペレーティング システムに対応した Flutter をダウンロードしてインストールします。インストール |フラッター
- Flutter ツールがパスに追加されていることを確認します。
- エディタの設定 |Flutter: エディタ用の Flutter プラグインと Dart プラグインを必ずインストールします。この Codelab の残りの部分では Android Studio を使用します。
- コマンドラインから
flutter doctor
を実行します。これにより、設定がスキャンされ、修正が必要な欠落している依存関係が一覧表示されます。欠落している重要な依存関係を手順に沿って修正します。一部の依存関係は不要な場合があります。たとえば、iOS 向けの開発を行う予定がない場合、CocoaPods の依存関係が欠けていても、問題になることはありません。 - 次のコマンドを実行して、Flutter アプリを
fcmflutter
ディレクトリflutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter
に作成し、fcmflutter
ディレクトリに移動します。
- 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 プロジェクトがすでに存在する場合は、この手順をスキップできます。
- Google アカウントをお持ちの場合は、Firebase を開いて Google アカウントでログインし、[コンソールに移動] をクリックします。
- Firebase コンソールで [プロジェクトを追加] をクリックします。手順に沿ってプロジェクトを作成します。[このプロジェクトの Google アナリティクスを有効にする] はこのプロジェクトで使用されないため、オンにしないでください。
- プロジェクトを作成したら、[Project Overview] の横にある歯車アイコンをクリックして、プロジェクトの [Project Settings] に移動します。
プロジェクト ID はプロジェクトを一意に識別するために使用され、[プロジェクト名] とは異なる場合があります。プロジェクト ID は、後で FlutterFire を設定する際に使用されます。
これで完了です。これで Firebase プロジェクトを作成できました。
Firebase CLI を設定する
Firebase CLI を設定している場合は、この手順をスキップできます。
Firebase CLI リファレンスに移動し、Firebase CLI をダウンロードしてインストールします。次のコマンドを使用し、Google アカウントで Firebase にログインします。
firebase login
FlutterFire をセットアップする
- コマンド
flutter pub add firebase_core
を使用して FlutterFire プラグインをインストールします。 - FCM プラグイン
flutter pub add firebase_messaging
をインストールします。 - FlutterFire CLI を設定します。
dart pub global activate flutterfire_cli
- Flutter で Firebase プロジェクトを構成します。
flutterfire configure --project=fcm4flutter.
矢印キーとスペースを使用してプラットフォームを選択するか、Enter キーを押してデフォルトのプラットフォームを使用します。
この Codelab ではデフォルトのプラットフォーム(Android、iOS、ウェブ)を使用しますが、選択できるプラットフォームは 1 つまたは 2 つだけです。iOS バンドル ID の入力を求められたら、「com.flutter.fcm.fcmflutter
」または独自の iOS バンドル ID([company domain name].[project name]
の形式)を入力します。コマンドが完了したら、Firebase コンソールのページを更新します。選択したプラットフォーム用のアプリが Firebase プロジェクトの下に作成されていることがわかります。
このコマンドは、初期化に必要なすべてのオプションを含む firebase_options.dart
ファイルを lib
ディレクトリに生成します。
iOS 向け Cloud Messaging を設定する
- Apple のデベロッパー ページに移動し、[キー] タブの [キーの作成] をクリックします。
- キーの名前を入力し、[Apple Push Notifications services(APNs)] をオンにします。
- キーファイルをダウンロードします。ファイル拡張子は
.p8
です。 - Firebase コンソールでプロジェクトの [プロジェクトの設定] に移動し、[Cloud Messaging] タブを選択します。
- [Cloud Messaging] タブで、iOS アプリの APNs キーファイルをアップロードします。[Cloud Messaging] タブの APNs キー ID と、チーム ID を入力します。チーム ID は、Apple メンバーシップ センターで確認できます。
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());
}
次に、[ツール] ->Flutter ->Android Studio の Flutter Pub Get を使用して、FlutterFire のセットアップで追加したパッケージを読み込み、Android Studio で適切な Intellisense 設定でコードを表示します。
これにより、生成された firebase_options.dart
ファイルからインポートされる現在のプラットフォームの DefaultFirebaseOptions.currentPlatform
用の FlutterFire が初期化されます。initializeApp
は非同期関数であり、await
キーワードにより、アプリケーションを実行する前に初期化が完了しています。
権限をリクエストする
通知を受信するには、アプリがユーザーに許可を求める必要があります。firebase_messaging
が提供する requestPermission
メソッドにより、権限を許可または拒否するようユーザーに求めるダイアログまたはポップアップが表示されます。
まず、このコードをコメント TODO: Request permission
の下の main 関数にコピーします。返された 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
次に、[プロジェクト設定] ->[General] タブで、下にスクロールして [Web App] を探します。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 でプッシュ通知とバックグラウンド モードを有効にする必要があります。
- Android Studio でプロジェクト名を右クリックして、[Flutter] ->Xcode で iOS モジュールを開きます。
- Xcode が起動したら、[Signing &] セクションで [Push Notifications] と [Background Modes] を有効にします。プロジェクト ターゲットの [機能] タブ。詳細については、アプリの構成をご覧ください。
- Android Studio のツールバーで、ターゲット セレクタで iOS デバイスを選択し、アプリを実行します。通知権限が付与されると、Android Studio コンソールに登録トークンが出力されます。
これで、アプリが FCM に正常に登録されました。次のセクションで説明するように、メッセージを受信する準備が整っています。
5. FCM からメッセージを受信する
メッセージ ハンドラを設定する
アプリがフォアグラウンド モードのときにメッセージを受信した場合は onMessage
イベントを処理し、アプリがバックグラウンドで実行されているときは onBackgroundMessage
イベントを処理する必要があります。
フォアグラウンド メッセージ ハンドラ
まず、イベント ハンドラから UI にメッセージを渡すために、ファイル main.dart
のコメント TODO: Add stream controller
の後にストリーム コントローラを追加します。
import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();
依存関係 rxdart を追加するには、プロジェクト ディレクトリから flutter pub add rxdart
コマンドを実行します。
次に、[ツール] ->Flutter ->Flutter Pub Get を Android Studio で使用して、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 は、メッセージの処理(インタラクションの処理を参照)またはアプリサーバーと同期することで、アプリがフォアグラウンドになったときに更新できます。
main 関数外のコメント TODO: Define the background message handler
の後にハンドラ関数を作成し、main 関数のコメント 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 では、ウェブベースのプラットフォームでバックグラウンド メッセージを処理する別のフローが必要になります。したがって、Service Worker の web/firebase-messaging-sw.js
に別のメッセージ ハンドラを追加する必要があります。
messaging.onBackgroundMessage((message) => {
console.log("onBackgroundMessage", message);
});
アプリサーバーをセットアップする
- Android Studio で https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server プロジェクトを開き、スターター サーバーコードをインポートします。このサーバーは Gradle ベースの Java プロジェクトであり、FCM メッセージ送信機能を提供する firebase-admin SDK と依存関係があります。
- Firebase Admin SDK が FCM API の呼び出しを承認できるように Firebase サービス アカウントを設定します。Firebase コンソールで [プロジェクトの設定] を開き、[サービス アカウント] タブを選択します。[Java] を選択します[
Generate new private key
] をクリックして構成スニペットをダウンロードします。 - ファイル名を
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!!");
}
- 登録セクションからコピーした Android 登録トークンをコピーし、変数
registrationToken
の値に貼り付けます。 - 実行 アイコン をクリックして main 関数を実行し、FCM を介してユーザーにメッセージを送信します。
Android アプリがバックグラウンドの場合、メッセージは通知トレイに表示されます。
Android アプリがフォアグラウンドにある場合、Android Studio コンソールに「フォアグラウンド メッセージの処理」というログが表示されます。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
ファイル内の main 関数を実行します。
プラットフォームのオーバーライドを使用してメッセージをトピックに送信します
これで、トピック プラットフォーム オーバーライド メッセージを送信する準備が整いました。次のコード スニペットでは、
- ベース メッセージとタイトル「
A new app is available
」を使用して送信リクエストを作成します。 - このメッセージにより、「
A new app is available
」というタイトルの表示通知が生成されます。サポートしています - このメッセージにより、「
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 を使用したマルチプラットフォーム アプリ開発の魅力について学習しました。これには、環境のセットアップ、依存関係の統合、メッセージの送受信などが含まれます。詳細については、次の資料をご覧ください。
Codelab
- ユーザー認証やデータの同期など、Flutter が他の Firebase プロダクトと連携する仕組みについて詳しくは、Firebase for Flutter を理解するをご覧ください。
- アプリ内メッセージングやトピックなど、FCM の詳細については、FCM と FIAM を使用してユーザーにメッセージを送信するおよび FCM トピックを使用した初めてのマルチキャスト プッシュ メッセージをご覧ください。