Senden und empfangen Sie Benachrichtigungen für eine Flutter-App mit Firebase Cloud Messaging

1. Einleitung

Letzte Aktualisierung : 04.04.2022

Dieses Codelab führt Sie durch den Prozess der Entwicklung einer Multiplattform-App mit Firebase Cloud Messaging (FCM) unter Verwendung von Flutter. Sie schreiben einen Teil der Implementierung der App und erstellen diese dann und führen sie nahtlos auf drei Plattformen aus: Android, iOS und Web. Außerdem erfahren Sie, wie Sie FCM in Flutter integrieren und Code zum Empfangen und Senden von Nachrichten schreiben. Abschließend stellt das Codelab die plattformspezifische Blockierungsfunktion der FCM HTTP v1 API vor, mit der Sie eine Nachricht senden können, die sich auf verschiedenen Plattformen unterschiedlich verhält.

Voraussetzung

Grundlegendes Verständnis von Flutter.

Was Sie lernen werden

• So richten Sie eine Flutter-App ein und erstellen sie.
• So fügen Sie FCM-Abhängigkeiten hinzu.
• So senden Sie einzelne FCM-Nachrichten an Ihre App.
• So senden Sie thematische FCM-Nachrichten an Ihre App.

Was du brauchen wirst

• Neueste stabile Version von Android Studio , konfiguriert mit den Dart- und Flutter-Plugins.

Sie können das Codelab mit einem der folgenden Geräte ausführen:

• Ein physisches Android-Gerät, das mit Ihrem Computer verbunden ist.
• Ein Android-Emulator (siehe Ausführen von Apps auf dem Android-Emulator ).
• Ein Browser Ihrer Wahl, z. B. Chrome.

Um das Codelab auf der iOS-Plattform auszuführen, benötigen Sie optional ein iOS-Gerät, ein Apple Developer-Konto und ein macOS-Gerät, auf dem XCode installiert ist.

2. Flatter-Setup

Wenn Sie bereits eine Flutter-Entwicklungsumgebung eingerichtet haben, überspringen Sie diesen Abschnitt.

Gehen Sie folgendermaßen vor, um eine Flutter-Entwicklungsumgebung einzurichten:

1. Laden Sie Flutter für Ihr Betriebssystem herunter und installieren Sie es: Installieren | Flattern
2. Stellen Sie sicher, dass das Flutter-Tool zu Ihrem Pfad hinzugefügt ist.
3. Richten Sie Ihren Editor für Flutter ein, wie unter Einrichten eines Editors | gezeigt Flutter Stellen Sie sicher, dass Sie die Flutter- und Dart-Plugins für Ihren Editor installieren. Für den Rest des Codelabs verwenden Sie Android Studio.
4. Führen Sie über die Befehlszeile flutter doctor aus, das Ihr Setup durchsucht und alle fehlenden Abhängigkeiten auflistet, die behoben werden müssen. Befolgen Sie die Anweisungen, um alle wichtigen fehlenden Abhängigkeiten zu beheben. Beachten Sie, dass einige Abhängigkeiten möglicherweise nicht erforderlich sind. Wenn Sie beispielsweise nicht für iOS entwickeln möchten, stellt eine fehlende CocoaPods-Abhängigkeit kein blockierendes Problem dar.
5. Führen Sie diesen Befehl aus, um Ihre Flutter-App im fcmflutter Verzeichnis flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter erstellen, und ändern Sie dann die Verzeichnisse in fcmflutter .

6. Gehen Sie in Android Studio zu Datei -> Öffnen , suchen Sie den Pfad Ihrer Flutter-App und klicken Sie dann auf Öffnen , um das Projekt in Android Studio zu öffnen. Der App-Code befindet sich in der Datei lib/main.dart .

Klicken Sie in der Symbolleiste von Android Studio auf den Abwärtspfeil, um ein Android-Gerät auszuwählen. Wenn die Zielauswahl leer ist, installieren Sie virtuelle Android-Geräte oder den Chrome-Browser oder den iOS-Simulator, wenn Sie die App lieber über einen Webbrowser oder ein iOS-Gerät starten möchten. Möglicherweise müssen Sie das Gerät manuell starten und die Liste aktualisieren, um das Zielgerät zu finden.

Klicken Sie auf Ausführen um die App zu starten.

Glückwunsch! Sie haben erfolgreich eine Flutter-App erstellt.

3. Firebase- und FlutterFire-Setup

Um eine App zu entwickeln, die sich mithilfe von Flutter in Firebase Cloud Messaging integrieren lässt, benötigen Sie:

• Ein Firebase-Projekt.
• Eine funktionierende Firebase-CLI.
• Eine Installation von FlutterFire.
• Eine mit flutterfire configure konfigurierte und generierte App.

Erstellen Sie Ihr Firebase-Projekt

Wenn Sie bereits ein Firebase-Projekt haben, können Sie diesen Schritt überspringen.

1. Wenn Sie über ein Google-Konto verfügen, öffnen Sie Firebase , melden Sie sich mit Ihrem Google-Konto an und klicken Sie dann auf Zur Konsole gehen .
2. Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen . Befolgen Sie die Anweisungen, um ein Projekt zu erstellen. Aktivieren Sie nicht „Google Analytics für dieses Projekt aktivieren“, da Sie es in diesem Projekt nicht verwenden werden.
3. Nachdem das Projekt erstellt wurde, navigieren Sie zu den Projekteinstellungen des Projekts, indem Sie auf das Zahnradsymbol neben „Projektübersicht“ klicken.

Die Projekt-ID dient zur eindeutigen Identifizierung des Projekts und kann sich vom Projektnamen unterscheiden. Die Projekt-ID wird später zum Einrichten von FlutterFire verwendet.

Glückwunsch! Sie haben erfolgreich ein Firebase-Projekt erstellt.

Richten Sie die Firebase-CLI ein

Wenn Sie die Firebase-CLI eingerichtet haben, können Sie diesen Schritt überspringen.

Gehen Sie zur Firebase-CLI-Referenz , um die Firebase-CLI herunterzuladen und zu installieren. Melden Sie sich mit Ihrem Google-Konto mit dem folgenden Befehl bei Firebase an:

firebase login

Richten Sie FlutterFire ein

1. Installieren Sie das FlutterFire-Plugin mit dem Befehl: flutter pub add firebase_core
2. Installieren Sie das FCM-Plugin: flutter pub add firebase_messaging
3. Richten Sie die FlutterFire-CLI ein: dart pub global activate flutterfire_cli
4. Konfigurieren Sie das Firebase-Projekt auf Flutter: flutterfire configure --project=fcm4flutter. Verwenden Sie die Pfeiltasten und die Leertaste, um die Plattformen auszuwählen, oder drücken Sie die Eingabetaste, um die Standardplattformen zu verwenden.

Dieses Codelab verwendet die Standardplattformen (Android, iOS und Web), Sie können jedoch nur eine oder zwei Plattformen auswählen. Wenn Sie zur Eingabe der iOS-Bundle-ID aufgefordert werden, geben Sie com.flutter.fcm.fcmflutter oder Ihre eigene iOS-Bundle-ID im Format [company domain name].[project name] ein. Aktualisieren Sie nach Abschluss des Befehls die Seite der Firebase-Konsole. Sie werden sehen, dass im Rahmen des Firebase-Projekts Apps für die ausgewählten Plattformen erstellt wurden.

Dieser Befehl generiert eine Datei firebase_options.dart im Verzeichnis lib “, die alle für die Initialisierung erforderlichen Optionen enthält.

Richten Sie Cloud Messaging für iOS ein

1. Navigieren Sie zur Apple- Entwicklerseite und klicken Sie auf der Registerkarte „Schlüssel“ auf „Schlüssel erstellen“ .

2. Geben Sie den Namen für den Schlüssel ein und überprüfen Sie die Apple Push Notifications-Dienste (APNs) .
3. Laden Sie die Schlüsseldatei herunter, die die Dateierweiterung .p8 hat.
4. Navigieren Sie in der Firebase-Konsole zu den Projekteinstellungen des Projekts und wählen Sie die Registerkarte Cloud Messaging aus.

5. Laden Sie die APNs-Schlüsseldatei für die iOS-App auf der Registerkarte „Cloud Messaging“ hoch. Geben Sie die APNs-Schlüssel-ID aus der Registerkarte „Cloud Messaging“ und die Team-ID ein, die Sie im Apple Membership Center finden.

4. FCM-Vorbereitung

Bevor eine App Nachrichten von FCM empfangen kann, muss sie:

• FlutterFire initialisieren.
• Fordern Sie Benachrichtigungsberechtigungen an.
• Registrieren Sie sich bei FCM, um ein Registrierungstoken zu erhalten.

Initialisierung

Um den Dienst zu initialisieren, ersetzen Sie die Hauptfunktion ( lib/main.dart ) durch diesen Code:

// 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());
}

Führen Sie dann Tools -> Flutter -> Flutter Pub Get in Android Studio aus, um die unter FlutterFire einrichten hinzugefügten Pakete zu laden und den Code mit der entsprechenden Intellisense-Einstellung in Android Studio anzuzeigen.

Dadurch wird FlutterFire für die aktuelle Plattform DefaultFirebaseOptions.currentPlatform initialisiert, die aus der generierten Datei firebase_options.dart importiert wird. Beachten Sie, dass initializeApp eine asynchrone Funktion ist und das Schlüsselwort „ await “ sicherstellt, dass die Initialisierung abgeschlossen ist, bevor die Anwendung ausgeführt wird.

Um Erlaubnis bitten

Die App muss den Benutzer um Erlaubnis zum Empfang von Benachrichtigungen bitten. Die von firebase_messaging bereitgestellte requestPermission Methode zeigt einen Dialog oder ein Popup an, in dem der Benutzer aufgefordert wird, die Berechtigung zu erteilen oder zu verweigern.

Kopieren Sie diesen Code zunächst in die Hauptfunktion unter dem Kommentar TODO: Request permission . Anhand der zurückgegebenen settings erfahren Sie, ob der Benutzer die Berechtigung erteilt hat. Wir empfehlen, die Erlaubnis nur dann anzufordern, wenn der Benutzer eine Funktion verwenden muss, die Zugriff erfordert (z. B. wenn der Benutzer Benachrichtigungen in den App-Einstellungen aktiviert). In diesem Codelab bitten wir der Einfachheit halber um Erlaubnis beim App-Start.

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}');
 }

Wählen Sie als Nächstes in der Android Studio-Symbolleiste Chrome (web) aus der Zielauswahl aus und führen Sie die App dann erneut aus.

Dann wird ein Chrome-Tab mit einem Popup-Fenster geöffnet, in dem Sie um Erlaubnis gebeten werden. Wenn Sie auf Allow klicken, wird in der Android Studio-Konsole ein Protokoll angezeigt: Permission granted: AuthorizationStatus.authorized . Nachdem Sie die Berechtigungsanfrage zugelassen oder blockiert haben, wird Ihre Antwort zusammen mit Ihrer App im Browser gespeichert und das Popup wird nicht erneut angezeigt. Beachten Sie, dass Sie möglicherweise erneut zur Berechtigung aufgefordert werden, wenn Sie die Web-App erneut in Android Studio ausführen.

Anmeldung

Kopieren Sie diesen Code in die Hauptfunktion unter dem Kommentar TODO: Register with FCM um sich bei FCM zu registrieren. Der getToken Aufruf gibt ein Registrierungstoken zurück, das vom App-Server oder der vertrauenswürdigen Serverumgebung zum Senden von Nachrichten an Benutzer verwendet werden kann.

// 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');
}

Wählen Sie in der Symbolleiste von Android Studio ein Android-Gerät aus und führen Sie die App aus. In der Android Studio-Konsole wird das Registrierungstoken wie folgt ausgedruckt:

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

Kopieren Sie es in einen Texteditor, da Sie es später zum Versenden von Nachrichten verwenden werden.

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

Zusätzliche Schritte zum Empfangen von Nachrichten im Internet

Web-Apps benötigen zwei zusätzliche Schritte, um das Registrierungstoken abzurufen und auf eingehende Nachrichten zu warten. Web muss einen VAPID-Schlüssel an getToken übergeben, um Sendeanfragen an unterstützte Web-Push-Dienste zu autorisieren.

Öffnen Sie zunächst die Registerkarte „Cloud Messaging“ des Firebase-Projekts in der Firebase-Konsole, scrollen Sie nach unten zum Abschnitt „Webkonfiguration“ , um das vorhandene Schlüsselpaar zu finden, oder generieren Sie ein neues Schlüsselpaar. Klicken Sie auf die hervorgehobene Schaltfläche, um den Schlüssel zu kopieren, damit er als vapidKey verwendet werden kann.

Ersetzen Sie als Nächstes den Registrierungscode im Abschnitt „Registrierung“ durch diesen Code und aktualisieren Sie dann den 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');
 }

Erstellen Sie dann eine Datei firebase-messaging-sw.js unterhalb des Verzeichnisses web/ im Stammverzeichnis Ihres Projekts. Kopieren Sie Folgendes in firebase-messaging-sw.js damit die Web-App onMessage Ereignisse empfangen kann. Weitere Informationen finden Sie unter Festlegen von Benachrichtigungsoptionen im 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

Scrollen Sie anschließend unter der Registerkarte „Projekteinstellungen“ -> „Allgemein“ nach unten und suchen Sie nach „ Web App“ , kopieren Sie den Codeabschnitt firebaseConfig “ und fügen Sie ihn in firebase-messaging-sw.js ein.

Wählen Sie abschließend in der Android Studio-Symbolleiste Chrome (web) in der Zielauswahl aus und führen Sie die App aus. In der Android Studio-Konsole wird das Registrierungstoken folgendermaßen ausgedruckt:

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

Kopieren Sie das Registrierungstoken in einen Texteditor, damit Sie es später zum Versenden von Nachrichten verwenden können.

Zusätzliche Schritte zum Empfangen von Nachrichten auf iOS

Um Nachrichten von FCM zu empfangen, müssen iOS-Geräte Push-Benachrichtigungen und Hintergrundmodi auf Xcode aktivieren:

1. Klicken Sie in Android Studio mit der rechten Maustaste auf den Projektnamen und wählen Sie dann Flutter -> iOS-Modul in Xcode öffnen .
2. Aktivieren Sie nach dem Start von Xcode Push-Benachrichtigungen und Hintergrundmodi auf der Registerkarte „Signierung und Funktionen“ für das Projektziel. Weitere Informationen finden Sie unter Konfigurieren Ihrer App .
3. Wählen Sie in der Android Studio-Symbolleiste ein iOS-Gerät in der Zielauswahl aus und führen Sie die App aus. Nachdem die Benachrichtigungsberechtigung erteilt wurde, wird das Registrierungstoken in der Android Studio-Konsole gedruckt.

Herzlichen Glückwunsch, Sie haben Ihre App erfolgreich bei FCM registriert. Sie sind bereit, Nachrichten zu empfangen, wie im nächsten Abschnitt beschrieben.

5. Empfangen Sie Nachrichten von FCM

Richten Sie Nachrichtenhandler ein

Die App muss onMessage Ereignisse verarbeiten, wenn Nachrichten eingehen, während sich die App im Vordergrundmodus befindet, und onBackgroundMessage Ereignisse, wenn sich die App im Hintergrund befindet.

Vordergrundnachrichtenhandler

Fügen Sie zunächst einen Stream-Controller nach dem Kommentar TODO: Add stream controller in der Datei „ main.dart “ hinzu, um Nachrichten vom Ereignishandler an die Benutzeroberfläche zu übergeben.

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

Um die Abhängigkeit rxdart hinzuzufügen, führen Sie diesen Befehl im Projektverzeichnis aus: flutter pub add rxdart .

Führen Sie als Nächstes Tools -> Flutter -> Flutter Pub Get in Android Studio aus, um das Paket rxdart.dart zu laden und den Code mit den entsprechenden Intellisense-Einstellungen in Android Studio anzuzeigen.

Fügen Sie dann nach dem Kommentar TODO: Set up foreground message handler handler einen Ereignishandler hinzu, der auf Vordergrundnachrichten wartet. Es druckt Protokolle und veröffentlicht die Nachricht an den Stream-Controller.

 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);
 });

Ersetzen Sie anschließend das ursprüngliche Status-Widget in der Datei main.dart durch diesen Code, der einen Abonnenten zum Stream-Controller im Status-Widget hinzufügt und die letzte Nachricht im Widget anzeigt.

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),
         ],
       ),
     ),
   );
 }
}

Hintergrundnachrichten-Handler für Android/iOS

Nachrichten werden vom onBackgroundMessage Handler verarbeitet, während die App im Hintergrund läuft. Der Handler sollte eine Funktion der obersten Ebene sein. Die Benutzeroberfläche kann aktualisiert werden, wenn die App in den Vordergrund gebracht wird, indem die Nachrichten verarbeitet werden (siehe Umgang mit Interaktionen ) oder eine Synchronisierung mit dem App-Server durchgeführt wird.

Erstellen Sie die Handler-Funktion nach dem Kommentar TODO: Define the background message handler außerhalb der Hauptfunktion und rufen Sie ihn in der Hauptfunktion nach dem Kommentar TODO: Set up background message handler auf.

// 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());
}

Hintergrundnachrichten-Handler für das Web

Ab FlutterFire firebase_messaging Version 11.2.8 erfordert die Verarbeitung von Hintergrundnachrichten auf webbasierten Plattformen einen anderen Ablauf. Daher müssen Sie im Service Worker web/firebase-messaging-sw.js einen separaten Nachrichtenhandler hinzufügen.

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

Richten Sie den App-Server ein

1. Importieren Sie den Starter-Servercode, indem Sie das Projekt https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server in Android Studio öffnen. Der Server ist ein Gradle-basiertes Java-Projekt mit einer Abhängigkeit vom Firebase-Admin- SDK, das FCM-Nachrichtenversandfunktionen bereitstellt.
2. Richten Sie ein Firebase-Dienstkonto ein, mit dem das Firebase Admin SDK Aufrufe an FCM-APIs autorisieren kann. Öffnen Sie die Projekteinstellungen in der Firebase-Konsole und wählen Sie die Registerkarte Dienstkonten aus. Wählen Sie „Java“ und klicken Sie auf Generate new private key , um das Konfigurations-Snippet herunterzuladen.
3. Benennen Sie die Datei in service-account.json um und kopieren Sie sie in den Pfad src/main/resources des Serverprojekts.

Senden Sie eine Testnachricht

In der Datei FcmSender.java erstellt sendMessageToFcmRegistrationToken eine Benachrichtigungsnachricht mit einer Datennutzlast. Das Registrierungstoken zielt auf die App-Instanz ab, an die die Nachricht gesendet wird.

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. Kopieren Sie das aus dem Abschnitt „Registrierung“ kopierte Android-Registrierungstoken und fügen Sie es in den Wert für die Variable registrationToken ein.
2. Klicken Sie auf Ausführen um die Hauptfunktion auszuführen und die Nachricht über FCM an den Benutzer zu senden.

Wenn die Android-App im Hintergrund läuft, wird die Nachricht in der Benachrichtigungsleiste angezeigt.

Wenn sich die Android-App im Vordergrund befindet, wird in der Android Studio-Konsole ein Protokoll angezeigt: „Verarbeitung einer Vordergrundnachricht“. Der Nachrichteninhalt wird auch in der Benutzeroberfläche angezeigt, da die Benutzeroberfläche für neue Nachrichten beim Stream-Controller abonniert ist.

Wenn Sie das Registrierungstoken einfügen und die Nachricht vom App-Server oder einer anderen vertrauenswürdigen Serverumgebung senden, sehen Sie ein ähnliches Verhalten:

• Wenn sich die Web-App im Hintergrund befindet (d. h. wenn sie von einem anderen Fenster ausgeblendet wird oder eine andere Registerkarte aktiv ist), wird eine Web-Benachrichtigung angezeigt.

• Wenn sich die Web-App im Vordergrund befindet, können Sie das Protokoll in der Chrome-Konsole anzeigen, indem Sie mit der rechten Maustaste auf das Web klicken und Inspect auswählen. Der Nachrichteninhalt wird auch in der Benutzeroberfläche angezeigt.

6. Senden Sie eine Themennachricht

Die Plattformüberschreibungsfunktion der FCM-HTTP-v1-API ermöglicht es, dass eine Nachrichtensendeanforderung auf verschiedenen Plattformen unterschiedliche Verhaltensweisen aufweist. Ein Anwendungsfall dieser Funktion besteht darin, je nach Plattform unterschiedliche Inhalte von Benachrichtigungsnachrichten anzuzeigen. Die Funktion wird am häufigsten genutzt, wenn die Themenmitteilung auf mehrere Geräte (die mehrere Plattformen umfassen können) ausgerichtet ist. Dieser Abschnitt führt Sie durch die Schritte, damit Ihre App eine für jede Plattform angepasste Themennachricht erhält.

Abonnieren Sie ein Thema vom Client

Um ein Thema zu abonnieren, rufen Sie die Methode messaging.subscribeToTopic “ am Ende der Hauptfunktion in der Datei main.dart der Flutter-App auf.

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

[Optional] Abonnieren Sie ein Thema vom Server für das Web

Sie können diesen Abschnitt überspringen, wenn Sie nicht auf der Webplattform entwickeln.

Das FCM JS SDK unterstützt derzeit kein clientseitiges Themenabonnement. Stattdessen können Sie ein Abonnement über die serverseitige Themenverwaltungs-API des Admin SDK durchführen. Dieser Code veranschaulicht das serverseitige Themenabonnement mit dem 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());
 }

Öffnen Sie den App-Server und klicken Sie auf Ausführen So führen Sie die Hauptfunktion in der Datei FcmSubscriptionManager.java aus:

Senden Sie eine Nachricht mit Plattformüberschreibungen an ein Thema

Jetzt können Sie eine Nachricht zum Überschreiben der Themenplattform senden. Im folgenden Codeausschnitt:

• Sie erstellen eine Sendeanforderung mit einer Basisnachricht und dem Titel „ A new app is available “.
• Die Nachricht generiert eine Anzeigebenachrichtigung mit dem Titel „ A new app is available “ auf iOS- und Webplattformen.
• Die Nachricht generiert eine Anzeigebenachrichtigung mit dem Titel „ A new Android app is available “ auf Android-Geräten.

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!!");
 }

Entfernen Sie in der Hauptfunktion der Datei FcmSender.java das Kommentarzeichen sendMessageToFcmTopic(); . Klicken Sie auf Ausführen um die Themennachricht zu senden.

7. Zusammenfassung und was als nächstes kommt

Zusammenfassend haben Sie gelernt, wie Sie mit Flutter und FCM eine plattformübergreifende App-Entwicklung durchführen können, die die Einrichtung der Umgebung, die Integration von Abhängigkeiten sowie das Empfangen und Senden von Nachrichten umfasst. Um tiefer einzutauchen, sehen Sie sich die folgenden Materialien an:

Codelabs

• Weitere Informationen zur Funktionsweise von Flutter mit anderen Firebase-Produkten, einschließlich Benutzerauthentifizierung und Synchronisierung von Daten, finden Sie unter „Kennenlernen von Firebase für Flutter“ .
• Weitere Informationen zu FCM, einschließlich In-App-Messaging und -Themen: Verwenden Sie FCM und FIAM, um Nachrichten an Benutzer zu senden und Ihre erste Multicast-Push-Nachricht mithilfe von FCM-Themen

Verweise

• Firebase-Site
• Flutter-Site
• FlutterFire Firebase Flutter-Widgets
• Firebase-YouTube-Kanal
• Flutter YouTube-Kanal