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

1. Einführung

Zuletzt aktualisiert: 04.04.2022

In diesem Codelab erfahren Sie, wie Sie mit Flutter eine plattformübergreifende App mit Firebase Cloud Messaging (FCM) entwickeln. Sie schreiben einen Teil der Implementierung der App und entwickeln und führen sie dann nahtlos auf drei Plattformen aus: Android, iOS und Web. Außerdem erfahren Sie, wie Sie FCM in Flutter einbinden und Code zum Empfangen und Senden von Nachrichten schreiben. Zuletzt wird im Codelab die plattformspezifische Blockfunktion der FCM HTTP v1 API vorgestellt, mit der Sie eine Nachricht senden können, die auf verschiedenen Plattformen unterschiedliches Verhalten aufweist.

Voraussetzung

Grundlegendes Verständnis von Flutter

Aufgaben in diesem Lab

• Informationen zum Einrichten und Erstellen einer Flutter-App.
• So fügen Sie FCM-Abhängigkeiten hinzu.
• So senden Sie einzelne FCM-Nachrichten an Ihre App.
• So senden Sie FCM-Nachrichten mit dem Thema an Ihre App.

Voraussetzungen

• Die neueste stabile Version von Android Studio, die mit den Dart- und Flutter-Plug-ins konfiguriert ist.

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

• Ein mit Ihrem Computer verbundenes physisches Android-Gerät.
• Einen Android-Emulator (siehe Apps im Android-Emulator ausführen)
• Einen Browser Ihrer Wahl, z. B. Chrome.

Optional: Wenn Sie das Codelab mit der iOS-Plattform ausführen möchten, benötigen Sie ein iOS-Gerät, ein Apple-Entwicklerkonto und ein macOS-Gerät mit installiertem Xcode.

2. Flutter-Einrichtung

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

So richten Sie eine Flutter-Entwicklungsumgebung ein:

1. Laden Sie Flutter auf Ihr Betriebssystem herunter und installieren Sie es: Installieren | Flattern
2. Achten Sie darauf, dass das Flutter-Tool dem Pfad hinzugefügt wurde.
3. Richten Sie Ihren Editor für Flutter wie unter Editor einrichten | Flutter beschrieben ein. Installieren Sie die Flutter- und Dart-Plug-ins für Ihren Editor. Für den Rest des Codelabs verwenden Sie Android Studio.
4. Führen Sie über die Befehlszeile flutter doctor aus, um Ihre Einrichtung zu durchsuchen und fehlende Abhängigkeiten aufzulisten, die behoben werden müssen. Folgen Sie der Anleitung, 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, ist eine fehlende CocoaPods-Abhängigkeit kein Problem, das blockiert wird.
5. Führen Sie diesen Befehl aus, um Ihre Flutter-App im Verzeichnis fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter zu erstellen, und wechseln Sie dann zu fcmflutter.

Hinweis:Mit dem Befehl flutter wird der Domainname des Unternehmens für die Option --org in umgekehrter Reihenfolge und für die Option --project-name der Projektname verwendet. Der Domainname des Unternehmens und der Projektname werden zum Paketnamen für Android (die Bundle-ID für iOS) kombiniert und dienen zur eindeutigen Identifizierung einer App.

6. Gehen Sie in Android Studio zu File -> Öffnen, suchen Sie den Pfad zur 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.

Hinweis:Wenn Sie den Flutter SDK-Pfad in Android Studio einrichten möchten, öffnen Sie Einstellungen -> Sprache und Framework -> Flutter und wählen Sie den Flutter-Installationspfad als SDK-Pfad aus.

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, den Chrome-Browser oder den iOS-Simulator, wenn die App lieber über einen Webbrowser oder ein iOS-Gerät gestartet werden soll. 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 eine Flutter-App erstellt.

3. Firebase und FlutterFire einrichten

Wenn Sie eine App entwickeln möchten, die mit Firebase Cloud Messaging über Flutter eingebunden ist, benötigen Sie Folgendes:

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

Firebase-Projekt erstellen

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

1. Wenn Sie ein Google-Konto haben, öffnen Sie Firebase, melden Sie sich mit Ihrem Google-Konto an und klicken Sie dann auf Console aufrufen.
2. Klicken Sie in der Firebase Console auf Projekt hinzufügen. Folgen Sie der Anleitung, um ein Projekt zu erstellen. Entfernen Sie das Häkchen bei Google Analytics für dieses Projekt aktivieren, da Sie es in diesem Projekt nicht verwenden.
3. Rufen Sie nach der Erstellung des Projekts die Projekteinstellungen auf, 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 ein Firebase-Projekt erstellt.

Firebase CLI einrichten

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

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

firebase login

FlutterFire einrichten

1. Installieren Sie das FlutterFire-Plug-in mit dem folgenden Befehl: flutter pub add firebase_core
2. Installieren Sie das FCM-Plug-in: flutter pub add firebase_messaging
3. Richten Sie die FlutterFire CLI ein: dart pub global activate flutterfire_cli
4. Firebase-Projekt in Flutter konfigurieren: 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.

In diesem Codelab werden die Standardplattformen (Android, iOS und Web) verwendet. Sie können aber nur eine oder zwei Plattformen auswählen. Wenn du nach der iOS-Bundle-ID gefragt wirst, gib com.flutter.fcm.fcmflutter oder deine eigene iOS-Bundle-ID im Format [company domain name].[project name] ein. Aktualisieren Sie nach der Ausführung des Befehls die Firebase Console-Seite. Sie sehen, dass im Firebase-Projekt Apps für die ausgewählten Plattformen erstellt wurden.

Mit diesem Befehl wird im Verzeichnis lib eine firebase_options.dart-Datei erstellt, die alle für die Initialisierung erforderlichen Optionen enthält.

Cloud Messaging für iOS einrichten

1. Rufen Sie die Entwicklerseite von Apple auf und klicken Sie auf dem Tab Keys (Schlüssel) auf Create a key (Schlüssel erstellen).

2. Geben Sie den Namen für den Schlüssel ein und aktivieren Sie die Option Apple Push Notification Services (APNs).
3. Laden Sie die Schlüsseldatei mit der Dateiendung .p8 herunter.
4. Rufen Sie in der Firebase Console die Projekteinstellungen des Projekts auf und wählen Sie den Tab Cloud Messaging aus.

5. Laden Sie die APNs-Schlüsseldatei für die iOS-App auf dem Tab Cloud Messaging hoch. Geben Sie die APNs-Schlüssel-ID auf dem Tab Cloud Messaging und die Team-ID ein, die Sie im Apple Member Center finden.

4. FCM-Vorbereitung

Bevor eine App Nachrichten von FCM empfangen kann, muss sie folgende Schritte ausführen:

• Initialisieren Sie FlutterFire.
• Berechtigungen zum Senden von Benachrichtigungen anfordern
• Registriere dich bei FCM, um ein Registrierungstoken zu erhalten.

Initialisierung

Ersetzen Sie zum Initialisieren des Dienstes 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, um die Pakete zu laden, die unter FlutterFire einrichten hinzugefügt wurden, und den Code mit der entsprechenden Intellisense-Einstellung in Android Studio anzeigen zu lassen.

Dadurch wird FlutterFire für die aktuelle Plattform DefaultFirebaseOptions.currentPlatform initialisiert, die aus der generierten firebase_options.dart-Datei importiert wird. initializeApp ist eine asynchrone Funktion. Mit dem Schlüsselwort await wird sichergestellt, dass die Initialisierung abgeschlossen ist, bevor die Anwendung ausgeführt wird.

Hinweis: Der vollständige Code für dieses Codelab ist unter https://github.com/FirebaseExtended/firebase_fcm_flutter verfügbar.

Berechtigung anfordern

Die App muss den Nutzer um Erlaubnis bitten, Benachrichtigungen zu erhalten. Bei der von firebase_messaging bereitgestellten Methode requestPermission wird ein Dialogfeld oder Pop-up angezeigt, in dem der Nutzer aufgefordert wird, die Berechtigung zu erteilen oder zu verweigern.

Kopieren Sie diesen Code zuerst in die Hauptfunktion unter dem Kommentar TODO: Request permission. Die zurückgegebene settings gibt an, ob der Nutzer die Berechtigung erteilt hat. Wir empfehlen, die Berechtigung nur anzufordern, wenn der Nutzer eine Funktion verwenden muss, für die der Zugriff erforderlich ist (z. B. wenn der Nutzer Benachrichtigungen in den App-Einstellungen aktiviert). In diesem Codelab fordern wir der Einfachheit halber die Berechtigung beim Starten der App an.

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 in der Zielauswahl Chrome (web) aus und führen Sie die App dann noch einmal aus.

Daraufhin wird ein Chrome-Tab mit einem Pop-up-Fenster geöffnet, in dem Sie um Erlaubnis gebeten werden. Wenn du auf Allow klickst, siehst du ein Protokoll in der Android Studio-Konsole: Permission granted: AuthorizationStatus.authorized. Nachdem Sie die Berechtigungsanfrage zugelassen oder blockiert haben, wird Ihre Antwort zusammen mit Ihrer App im Browser gespeichert und das Pop-up wird nicht mehr angezeigt. Wenn Sie die Webanwendung in Android Studio noch einmal ausführen, werden Sie möglicherweise noch einmal um die Berechtigung gebeten.

Anmeldung

Kopiere diesen Code in die Hauptfunktion unter dem Kommentar TODO: Register with FCM, um dich bei FCM zu registrieren. Der getToken-Aufruf gibt ein Registrierungstoken zurück, das vom App-Server oder der vertrauenswürdigen Serverumgebung verwendet werden kann, um Nachrichten an Nutzer zu senden.

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

Hinweis: Der obige Code dient nur zu Demonstrationszwecken. Unter normalen Umständen:

• Eine App fordert normalerweise ein Registrierungstoken an, wenn ein Nutzer eine Aktion ausführt. Während des App-Starts sollten Sie kein Token anfordern, da dadurch ein blockierender Aufruf an FCM gesendet wird, der einige Zeit in Anspruch nehmen kann.
• Eine App sendet das Token an den Anwendungsserver, der es normalerweise in einem Speicher aufbewahrt. Später ruft der App-Server das Token aus dem Store ab und verwendet es, um die an den Nutzer gesendeten Nachrichten zu adressieren.

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

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

Kopieren Sie sie in einen Texteditor, da Sie sie später zum Senden von Nachrichten verwenden.

Hinweis: Wenn der folgende Fehler auftritt, folgen Sie der Anleitung nach der Fehlermeldung und geben Sie eine höhere minSdkVersion an (z. B. 19) in der Datei android/app/build.gradle im Projektverzeichnis.

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

Zusätzliche Schritte zum Empfangen von Nachrichten im Web

Bei Web-Apps sind zwei zusätzliche Schritte erforderlich, um das Registrierungstoken abzurufen und auf eingehende Nachrichten zu warten. Web muss einen VAPID-Schlüssel an getToken übergeben, um das Senden von Anfragen an unterstützte Web-Push-Dienste zu autorisieren.

Öffnen Sie zuerst in der Firebase Console den Tab Cloud Messaging des Firebase-Projekts und scrollen Sie nach unten zum Abschnitt Webkonfiguration, um das vorhandene Schlüsselpaar zu suchen, 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 anschließend 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 im Stammverzeichnis Ihres Projekts eine firebase-messaging-sw.js-Datei unter dem Verzeichnis web/. Kopieren Sie Folgendes in firebase-messaging-sw.js, damit die Web-App onMessage-Ereignisse empfangen kann. Weitere Informationen finden Sie unter Benachrichtigungsoptionen im Service Worker festlegen.

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 dann unter Projekteinstellungen -> Tab Allgemein nach unten zu Web-App, kopieren Sie den Codeabschnitt firebaseConfig und fügen Sie ihn in firebase-messaging-sw.js ein.

Wählen Sie schließlich in der Android Studio-Symbolleiste in der Zielauswahl Chrome (web) aus und führen Sie die App aus. In der Android Studio-Konsole wird das Registrierungstoken wie folgt ausgegeben:

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 Senden von Nachrichten verwenden können.

Zusätzliche Schritte zum Empfangen von Nachrichten auf iOS-Geräten

Damit iOS-Geräte Nachrichten von FCM empfangen können, müssen Push-Benachrichtigungen und Hintergrundmodi in Xcode aktiviert sein:

1. Klicken Sie in Android Studio mit der rechten Maustaste auf den Projektnamen und wählen Sie dann Flutter -> aus. Öffnen Sie das iOS-Modul in Xcode.
2. Aktiviere nach dem Start von Xcode Push-Benachrichtigungen und Hintergrundmodi in den Signaturen und Funktionen für das Projektziel. Weitere Informationen finden Sie unter App konfigurieren.
3. Wählen Sie in der Android Studio-Symbolleiste in der Zielauswahl ein iOS-Gerät aus und führen Sie die App aus. Nachdem die Berechtigung für Benachrichtigungen erteilt wurde, wird das Registrierungstoken in der Android Studio-Konsole ausgegeben.

Herzlichen Glückwunsch, Sie haben Ihre App bei FCM registriert. Sie können jetzt Nachrichten empfangen, wie im nächsten Abschnitt beschrieben.

5. Nachrichten von FCM erhalten

Nachrichten-Handler einrichten

Die App muss onMessage-Ereignisse verarbeiten, wenn Nachrichten eingehen, während die App im Vordergrundmodus ausgeführt wird, und onBackgroundMessage-Ereignisse, wenn die App im Hintergrund ausgeführt wird.

Nachrichten-Handler im Vordergrund

Fügen Sie zuerst einen Stream-Controller nach dem Kommentar TODO: Add stream controller in der Datei main.dart hinzu, um Nachrichten vom Ereignis-Handler an die Benutzeroberfläche weiterzuleiten.

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

Führen Sie den folgenden Befehl aus dem Projektverzeichnis flutter pub add rxdart aus, um die Abhängigkeit „rxdart“ hinzuzufügen:

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

Fügen Sie dann einen Ereignis-Handler hinzu, der nach dem Kommentar TODO: Set up foreground message handler nach Nachrichten im Vordergrund lauscht. Logs werden ausgegeben und die Nachricht wird im Stream-Controller veröffentlicht.

 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 dann das ursprüngliche Status-Widget in der Datei main.dart durch diesen Code, der dem Stream-Controller im Status-Widget einen Abonnenten 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),
         ],
       ),
     ),
   );
 }
}

Hintergrund-Nachrichten-Handler für Android/iOS

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

Erstellen Sie die Handlerfunktion nach dem Kommentar TODO: Define the background message handler außerhalb der Hauptfunktion und rufen Sie sie 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());
}

Hintergrund-Nachrichten-Handler für das Web

Ab FlutterFire firebase_messaging Version 11.2.8 ist für die Verarbeitung von Hintergrundnachrichten auf webbasierten Plattformen ein anderer Ablauf erforderlich. Daher müssen Sie im Dienstworker web/firebase-messaging-sw.js einen separaten Nachrichten-Handler hinzufügen.

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

App-Server einrichten

1. Importieren Sie den Startservercode, indem Sie in Android Studio das Projekt https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server öffnen. Der Server ist ein Gradle-basiertes Java-Projekt mit einer Abhängigkeit vom firebase-admin SDK, das die Funktion zum Senden von FCM-Nachrichten bereitstellt.
2. Richten Sie ein Firebase-Dienstkonto ein, mit dem das Firebase Admin SDK Aufrufe an FCM APIs autorisieren kann. Öffnen Sie in der Firebase Console die Projekteinstellungen und wählen Sie den Tab Dienstkonten aus. Wählen Sie „Java“ aus. 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.

Testnachricht senden

In der Datei FcmSender.java verfasst sendMessageToFcmRegistrationToken eine Benachrichtigung 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 Android-Registrierungstoken, das Sie im Abschnitt „Registrierung“ kopiert haben, 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 Nutzer zu senden.

Wenn die Android-App im Hintergrund ausgeführt wird, wird die Nachricht in der Benachrichtigungsleiste angezeigt.

Wenn sich die Android-App im Vordergrund befindet, wird in der Android Studio-Konsole ein Protokoll angezeigt: „Handling a foreground message“ (Bearbeitung einer Nachricht im Vordergrund). Der Nachrichteninhalt wird auch in der Benutzeroberfläche angezeigt, da die Benutzeroberfläche für neue Nachrichten beim Streamcontroller angemeldet ist.

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

• Wenn die Web-App im Hintergrund ausgeführt wird, also wenn sie durch ein anderes Fenster ausgeblendet ist oder ein anderer Tab aktiv ist, erhalten Sie eine Web-Benachrichtigung.

• Wenn sich die Webanwendung im Vordergrund befindet, können Sie das Protokoll in der Chrome Console aufrufen, indem Sie mit der rechten Maustaste auf das Web klicken und Inspect auswählen. Der Inhalt der Nachricht wird auch auf der Benutzeroberfläche angezeigt.

6. Themennachricht senden

Die Plattform-Überschreibungsfunktion der FCM HTTP v1 API ermöglicht es, dass eine Anfrage zum Senden von Nachrichten auf verschiedenen Plattformen unterschiedliches Verhalten aufweist. Ein Anwendungsfall für diese Funktion ist die Anzeige von Benachrichtigungsnachrichten je nach Plattform. Die Funktion wird vor allem dann eingesetzt, wenn die Ausrichtung auf mehrere Geräte (die sich über mehrere Plattformen erstrecken kann) mit themenbezogenen Mitteilungen. In diesem Abschnitt wird beschrieben, wie Sie dafür sorgen, dass Ihre App eine für jede Plattform angepasste Themennachricht empfängt.

Themen vom Kunden abonnieren

Wenn Sie ein Thema abonnieren möchten, 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] Thema vom Server für das Web abonnieren

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

Das FCM JS SDK unterstützt derzeit kein clientseitiges Abo von Themen. Verwenden Sie stattdessen die serverseitige Topic Management API des Admin SDK. In diesem Code wird das serverseitige Themenabo mit dem Java Admin SDK veranschaulicht.

 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 Anwendungsserver und klicken Sie auf Ausführen , um die Hauptfunktion in der Datei FcmSubscriptionManager.java auszuführen:

Nachricht mit Plattformüberschreibungen an ein Thema senden

Jetzt können Sie eine Überschreibungsnachricht für die Themenplattform senden. Im folgenden Code-Snippet:

• Sie erstellen eine Sendeanfrage mit einer Basisnachricht und dem Titel „A new app is available“.
• Die Nachricht generiert eine Displaybenachrichtigung mit dem Titel „A new app is available“ auf iOS- und Webplattformen.
• Die Nachricht generiert eine Displaybenachrichtigung 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 nächste Schritte

Zusammenfassend haben Sie gelernt, wie Sie mit Flutter und FCM plattformübergreifende Apps entwickeln, einschließlich der Umgebungseinrichtung, der Abhängigkeitsintegration sowie dem Empfangen und Senden von Nachrichten. Ausführliche Informationen finden Sie in den folgenden Materialien:

Codelabs

• Weitere Informationen zur Verwendung von Flutter mit anderen Firebase-Produkten, einschließlich Nutzerauthentifizierung und Datensynchronisierung, finden Sie unter Informationen zu Firebase für Flutter.
• Weitere Informationen zu FCM, einschließlich In-App-Messaging und Themen: Mit FCM und FIAM Nachrichten an Nutzer senden und Erste Multicast-Push-Nachricht mit FCM-Themen

References

• Firebase-Website
• Flutter-Website
• FlutterFire Firebase Flutter-Widgets
• Firebase-YouTube-Kanal
• YouTube-Kanal von Flutter