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

1. Einführung

Letzte Aktualisierung: 4. April 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 App-Implementierung und erstellen 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. Schließlich wird in diesem Codelab die plattformspezifische Blockierungsfunktion der FCM HTTP v1 API vorgestellt. Mit dieser Funktion können Sie eine Nachricht senden, die auf verschiedenen Plattformen unterschiedlich funktioniert.

Voraussetzung

Grundlegende Kenntnisse von Flutter

Aufgaben in diesem Lab

• Informationen zum Einrichten und Erstellen einer Flutter-App.
• FCM-Abhängigkeiten hinzufügen
• 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 physisches Android-Gerät, das mit Ihrem Computer verbunden ist.
• 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 für Ihr Betriebssystem herunter und installieren Sie es: Install | Flutter
2. Achten Sie darauf, dass das Flutter-Tool Ihrem Pfad hinzugefügt wurde.
3. Richten Sie Ihren Editor für Flutter wie unter Editor einrichten | Flutter beschrieben ein. Installieren Sie dabei unbedingt 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 den Befehl flutter doctor aus. Dadurch wird Ihre Konfiguration geprüft und alle fehlenden Abhängigkeiten werden aufgelistet, 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 blockierendes Problem.
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:Der Befehl flutter verwendet bei der Option --org den Domainnamen des Unternehmens in umgekehrter Reihenfolge und bei der Option --project-name den Projektnamen. 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. Klicken Sie in Android Studio auf 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.

Hinweis:Wenn Sie den Pfad zum Flutter SDK in Android Studio einrichten möchten, öffnen Sie Einstellungen -> Sprache und Framework -> Flutter und wählen Sie den Pfad zur Flutter-Installation 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 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 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 FlutterFire-Installation.
• 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. Klicken Sie nach dem Erstellen des Projekts auf das Zahnradsymbol neben Projektübersicht, um die Projekteinstellungen aufzurufen.

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 bereits 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 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. Wählen Sie mit den Pfeiltasten und der Leertaste die Plattformen aus 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 jedoch 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 die Seite der Firebase Console, nachdem der Befehl abgeschlossen wurde. 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 klicken Sie das Kästchen Apple Push Notification Services (APNs) an.
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

Damit eine App Nachrichten von FCM empfangen kann, müssen folgende Voraussetzungen erfüllt sein:

• Initialisieren Sie FlutterFire.
• Berechtigungen zum Senden von Benachrichtigungen anfordern
• Registrieren Sie sich 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 in Android Studio Tools -> Flutter -> Flutter Pub Get aus, um die Pakete zu laden, die Sie unter FlutterFire einrichten hinzugefügt haben, 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 firebase_options.dart-Datei importiert wird. Hinweis: 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 zum Empfangen von Benachrichtigungen bitten. 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. Anhand des zurückgegebenen settings kannst du feststellen, 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 wird die Berechtigung zur Laufzeit der App angefordert.

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 noch einmal aus.

Daraufhin wird ein Chrome-Tab mit einem Pop-up-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 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

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 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. Sie sollten kein Token beim Starten der App anfordern, da dadurch ein blockierender Aufruf an FCM erfolgt, der einige Zeit in Anspruch nehmen kann.
• Eine App sendet das Token an den App-Server, der es in der Regel in einem Store speichert. 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 den Tab Cloud Messaging des Firebase-Projekts in der Firebase Console. Scrollen Sie nach unten zum Abschnitt Webkonfiguration, um das vorhandene Schlüsselpaar zu finden, oder generieren Sie ein neues Schlüsselpaar. Klicke 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 im Stammverzeichnis Ihres Projekts eine firebase-messaging-sw.js-Datei unter dem Verzeichnis web/. Kopieren Sie den folgenden Code in firebase-messaging-sw.js, damit die Webanwendung 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 abschließend 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 so 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 damit später Nachrichten senden 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 Flutter -> iOS-Modul in Xcode öffnen aus.
2. Aktivieren Sie nach dem Starten von Xcode auf dem Tab Signatur und Funktionen die Optionen Push-Benachrichtigungen und Hintergrundmodi 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 empfangen

Nachrichten-Handler einrichten

Die App muss onMessage-Ereignisse verarbeiten, wenn Nachrichten eingehen, während die App im Vordergrund 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 Event-Handler hinzu, der nach dem Kommentar TODO: Set up foreground message handler nach Nachrichten im Vordergrund lauscht. Es druckt Protokolle aus und veröffentlicht die Nachricht beim Streamcontroller.

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

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

Background Message 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 FcmSender.java-Datei stellt sendMessageToFcmRegistrationToken eine Benachrichtigungsnachricht mit einer Datennutzlast zusammen. Das Registrierungstoken richtet sich an die App-Instanz, 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 aus dem Abschnitt „Registrierung“ 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 läuft, wird die Meldung im Benachrichtigungs-Steuerfeld 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 Webanwendung im Hintergrund ausgeführt wird (d.h., wenn sie von einem anderen Fenster verdeckt ist oder ein anderer Tab aktiv ist), wird eine Webbenachrichtigung angezeigt.

• 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 in der Benutzeroberfläche angezeigt.

6. Nachrichten an Themen senden

Mit der Plattformüberschreibungsfunktion der FCM HTTP v1 API kann eine Anfrage zum Senden von Nachrichten auf verschiedenen Plattformen unterschiedlich ausgeführt werden. Ein Anwendungsfall dieser Funktion ist die Anzeige verschiedener Benachrichtigungsinhalte je nach Plattform. Die Funktion wird am besten genutzt, wenn Sie mit Themen-Messaging auf mehrere Geräte (die mehrere Plattformen umfassen können) ausrichten. 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] Ein Thema vom Server für das Web abonnieren

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

Das FCM JS SDK unterstützt derzeit keine clientseitigen Themenabos. Stattdessen können Sie die serverseitige API zur Themenverwaltung des Admin SDK verwenden. 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 App-Server und klicken Sie auf Ausführen , um die Hauptfunktion in der Datei FcmSubscriptionManager.java auszuführen:

Eine Nachricht mit Plattformüberschreibungen an ein Thema senden

Jetzt können Sie eine Nachricht zur Plattformüberschreibung für das Thema senden. Im folgenden Code-Snippet:

• Sie erstellen eine Sendeanfrage mit einer Basisnachricht und dem Titel „A new app is available“.
• Die Nachricht generiert auf iOS- und Webplattformen eine Benachrichtigung mit dem Titel „A new app is available“.
• Die Nachricht generiert auf Android-Geräten eine Benachrichtigung mit dem Titel „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!!");
 }

Entfernen Sie in der Hauptfunktion der Datei FcmSender.java das Kommentarzeichen für 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 Integration von Abhängigkeiten sowie dem Empfangen und Senden von Nachrichten. Weitere Informationen finden Sie in den folgenden Artikeln:

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