バックグラウンド アプリにテスト メッセージを送信する

FCM を使用する手始めとして、最も単純なユースケースを作成します。具体的には、アプリがバックグラウンドで動作しているときに、Notifications Composer から開発デバイスにテスト通知メッセージを送信します。このページには、このチュートリアルに必要なセットアップから検証までのすべての手順が記載されています。Flutter アプリでの FCM の設定がすでに済んでいる場合は、一部の手順を省略できます。

FCM プラグインをインストールする

1. Flutter 用の Firebase SDK をインストールして初期化します（まだ行っていない場合）。

2. Flutter プロジェクトのルートから、次のコマンドを実行してプラグインをインストールします。

   flutter pub add firebase_messaging
   

3. 完了したら、Flutter アプリを再ビルドします。

   flutter run
   

登録トークンにアクセスする

特定のデバイスにメッセージを送信するには、そのデバイスの登録トークンを知っておく必要があります。このチュートリアルを完了するには、Notifications コンソールのフィールドにトークンを入力する必要があるため、トークンを取得したら、必ずコピーするか安全に保管しておく必要があります。

アプリ インスタンスの現在の登録トークンを取得するには、getToken() を呼び出します。このメソッドに通知権限が付与されていない場合は、ユーザーに通知権限を付与するよう求められます。すでに通知権限が付与されている場合、このメソッドはトークンを返すか、エラーが発生するので future を拒否します。

final fcmToken = await FirebaseMessaging.instance.getToken();

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

1. 対象デバイスでアプリをインストールして実行します。Apple デバイスの場合、リモート通知受信権限に対するリクエストを承認する必要があります。

2. アプリがデバイスのバックグラウンドで動作していることを確認します。

3. Firebase コンソールで [Messaging] ページを開きます。

4. メッセージを初めて作成する場合は、[最初のキャンペーンを作成] を選択します。

   1. [Firebase Notification メッセージ] を選択し、[作成] を選択します。

5. それ以外の場合は、[キャンペーン] タブで [新しいキャンペーンを作成]、[通知] の順に選択します。

6. 通知テキストを入力します。それ以外のフィールドはすべて省略可能です。

7. 右側のペインで [テスト メッセージを送信] を選択します。

8. [FCM 登録トークンを追加] というラベルの付いたフィールドで、このガイドの前のセクションで取得した登録トークンを入力します。

9. [テスト] を選択します。

[テスト] を選択すると、アプリをバックグラウンドで実行しているターゲット クライアント デバイスに通知が届きます。

アプリへのメッセージ配信については、FCM レポート ダッシュボードをご覧ください。このダッシュボードには、Android アプリの「インプレッション」（ユーザーが表示した通知）のデータとともに、Apple と Android のデバイスで送信および開封されたメッセージの数が記録されています。

インタラクションの処理

ユーザーが通知をタップすると、Android と iOS のいずれも、デフォルトの動作ではアプリが開きます。アプリが終了している場合は、アプリが起動します。アプリがバックグラウンドで動作している場合は、フォアグラウンドに移動します。

通知の内容によっては、アプリを開くときにユーザーの操作を処理する必要が生じることがあります。たとえば、通知を使用して新しいチャット メッセージを送信した後にユーザーが通知を選択した場合、アプリの起動時に特定のスレッドを開きたいことがあります。

firebase-messaging パッケージには、このインタラクションを処理する 2 つの方法が用意されています。

1. getInitialMessage(): アプリが終了状態から開いた状態になると、このメソッドは RemoteMessage を含む Future を返します。使用済みの RemoteMessage は削除されます。
2. onMessageOpenedApp: アプリがバックグラウンド状態から開いた状態になった場合に、RemoteMessage を送信する Stream です。

ユーザーがスムーズに利用できるように、2 つのシナリオに対処する必要があります。以下のサンプルコードは、この方法を示しています。

class Application extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _Application();
}

class _Application extends State<Application> {
  // In this example, suppose that all messages contain a data field with the key 'type'.
  Future<void> setupInteractedMessage() async {
    // Get any messages which caused the application to open from
    // a terminated state.
    RemoteMessage? initialMessage =
        await FirebaseMessaging.instance.getInitialMessage();

    // If the message also contains a data property with a "type" of "chat",
    // navigate to a chat screen
    if (initialMessage != null) {
      _handleMessage(initialMessage);
    }

    // Also handle any interaction when the app is in the background via a
    // Stream listener
    FirebaseMessaging.onMessageOpenedApp.listen(_handleMessage);
  }

  void _handleMessage(RemoteMessage message) {
    if (message.data['type'] == 'chat') {
      Navigator.pushNamed(context, '/chat',
        arguments: ChatArguments(message),
      );
    }
  }

  @override
  void initState() {
    super.initState();

    // Run code required to handle interacted messages in an async function
    // as initState() must not be async
    setupInteractedMessage();
  }

  @override
  Widget build(BuildContext context) {
    return Text("...");
  }
}

インタラクションの処理方法は、アプリの設定によって異なります。上記の例は、StatefulWidget の基本的な使用例を示しています。

次のステップ

フォアグラウンドで動作しているアプリへのメッセージの送信

バックグラウンドで動作しているアプリに通知メッセージが正常に送信されたら、Flutter アプリでメッセージを受信するを参照して、フォアグラウンドで動作しているアプリへのメッセージの送信を試します。

通知メッセージ以外の動作

その他のより高度な動作をアプリに追加するには、サーバーの実装が必要です。

次に、アプリ クライアントで以下を実行します。

• メッセージの受信
• メッセージ トピックへの登録