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 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. Im Codelab wird auch die plattformspezifische Blockfunktion der FCM HTTP v1 API vorgestellt, mit der Sie eine Nachricht mit unterschiedlichem Verhalten auf verschiedenen Plattformen senden können.

Voraussetzung

Grundlegendes Verständnis von Flutter.

Lerninhalte

• So richten Sie eine Flutter-App ein und erstellen sie.
• FCM-Abhängigkeiten hinzufügen
• Einzelne FCM-Nachrichten an Ihre App senden
• So senden Sie FCM-Nachrichten zu Themen an Ihre App.

Voraussetzungen

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

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

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

Optional: Wenn Sie das Codelab auf 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, können Sie diesen Abschnitt überspringen.

So richten Sie eine Flutter-Entwicklungsumgebung ein:

1. Laden Sie Flutter für Ihr Betriebssystem herunter und installieren Sie es: Install | Flutter
2. Prüfen Sie, ob das Flutter-Tool Ihrem Pfad hinzugefügt wurde.
3. Richten Sie Ihren Editor für Flutter ein, wie unter Set up an editor | Flutter beschrieben. 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 den Befehl flutter doctor aus. Dadurch wird Ihre Einrichtung gescannt und alle fehlenden Abhängigkeiten werden aufgelistet, die behoben werden müssen. Folgen Sie der Anleitung, um wichtige fehlende Abhängigkeiten zu beheben. Einige Abhängigkeiten sind möglicherweise nicht erforderlich. Wenn Sie beispielsweise nicht für iOS entwickeln, ist eine fehlende CocoaPods-Abhängigkeit kein 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 in das Verzeichnis fcmflutter.

Hinweis:Beim Befehl flutter wird der Unternehmensdomainname für die Option --org in umgekehrter Reihenfolge und der Projektname für die Option --project-name verwendet. Der Unternehmensdomainname und der Projektname werden als Paketname 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 Flutter SDK-Pfad in Android Studio einrichten möchten, öffnen Sie Einstellungen -> Sprache & Framework -> Flutter und wählen Sie den Flutter-Installationspfad als SDK-Pfad aus.

Klicken Sie in der Android Studio-Symbolleiste 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

Um eine App zu entwickeln, die Firebase Cloud Messaging mit Flutter integriert, benötigen Sie Folgendes:

• Ein Firebase-Projekt
• Eine funktionierende Firebase CLI.
• Eine Installation von FlutterFire.
• Eine App, die mit flutterfire configure konfiguriert und generiert wurde.

Firebase-Projekt erstellen

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

1. Melden Sie sich mit Ihrem Google-Konto in der Firebase Console an.
2. Klicken Sie auf die Schaltfläche, um ein neues Projekt zu erstellen, und geben Sie dann einen Projektnamen ein (z. B. fcm4flutter).
   

   Dieser Projektname wird als Anzeigename in Firebase-Oberflächen verwendet. Firebase erstellt automatisch eine eindeutige Projekt-ID auf Grundlage dieses Projektnamens. Sie können jetzt optional auf das Symbol Bearbeiten klicken, um die gewünschte Projekt-ID festzulegen. Diese ID kann nach dem Erstellen des Projekts jedoch nicht mehr geändert werden.

   Notieren Sie sich Ihre Projekt-ID, da Sie diese später benötigen, um Ihr Firebase-Projekt in der Firebase CLI zu identifizieren. Wenn Sie Ihre ID vergessen, können Sie sie später jederzeit in den Projekteinstellungen nachsehen.

3. Klicken Sie auf Weiter.
4. Lesen und akzeptieren Sie bei Aufforderung die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
5. (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet).
6. Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
7. Klicken Sie auf Projekt erstellen, warten Sie, bis Ihr Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.

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 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 aber auch 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 die Seite in der Firebase Console, nachdem der Befehl abgeschlossen wurde. Sie sehen, dass Apps für die ausgewählten Plattformen im Firebase-Projekt erstellt wurden.

Mit diesem Befehl wird eine firebase_options.dart-Datei im Verzeichnis lib generiert, 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 Schlüssel auf Schlüssel erstellen.

2. Geben Sie den Namen für den Schlüssel ein und setzen Sie ein Häkchen bei Apple Push Notification Service (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 vom 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, muss sie Folgendes tun:

• FlutterFire initialisieren
• Berechtigungen zum Senden von Benachrichtigungen anfordern.
• Registrieren Sie sich bei FCM, um ein Registrierungstoken zu erhalten.

Initialisierung

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

// 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 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. initializeApp ist eine asynchrone Funktion. Das Schlüsselwort await sorgt dafür, 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 empfangen. Die von firebase_messaging bereitgestellte Methode requestPermission zeigt ein Dialogfeld oder Pop-up-Fenster an, 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. Der zurückgegebene settings gibt an, ob der Nutzer die Berechtigung erteilt hat. Wir empfehlen, Berechtigungen nur dann anzufordern, wenn der Nutzer eine Funktion verwenden muss, für die Zugriff erforderlich ist, z.B. wenn der Nutzer Benachrichtigungen in den App-Einstellungen aktiviert. In diesem Codelab wird die Berechtigung der Einfachheit halber beim Start 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 Chrome (web) aus der Zielauswahl aus und führen Sie die App noch einmal aus.

Anschließend 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 Log 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 noch einmal angezeigt. Wenn Sie die Web-App noch einmal in Android Studio ausführen, werden Sie möglicherweise noch einmal um die Berechtigung gebeten.

Anmeldung

Kopieren Sie diesen Code in die Hauptfunktion unter den 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 in der Regel ein Registrierungstoken an, wenn ein Nutzer eine Aktion ausführt. Sie sollten beim Start der App kein Token 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 Speicher ablegt. 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 benötigen.

Hinweis: Wenn der folgende Fehler auftritt, folgen Sie der Anleitung nach der Fehlermeldung und geben Sie einen höheren 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

Für 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 Sendeanfragen an unterstützte Web-Push-Dienste zu autorisieren.

Öffnen Sie zuerst in der Firebase Console den Tab Cloud Messaging des Firebase-Projekts. Scrollen Sie nach unten zum Bereich Webkonfiguration, um das vorhandene Schlüsselpaar zu finden oder ein neues Schlüsselpaar zu generieren. Klicken Sie auf die hervorgehobene Schaltfläche, um den Schlüssel zu kopieren und als „vapidKey“ zu verwenden.

Ersetzen Sie als Nächstes den Registrierungscode im Abschnitt „Registration“ (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 unter dem Verzeichnis web/ eine firebase-messaging-sw.js-Datei. 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 auf dem Tab 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 schließlich 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 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 es später zum Senden von Nachrichten verwenden können.

Zusätzliche Schritte zum Empfangen von Nachrichten unter iOS

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

1. Klicken Sie in Android Studio mit der rechten Maustaste auf den Projektnamen und wählen Sie Flutter -> Open iOS module in Xcode (iOS-Modul in Xcode öffnen) aus.
2. Aktivieren Sie nach dem Start von Xcode auf dem Tab Signieren & Funktionen für das Projektziel Push-Benachrichtigungen und Hintergrundmodi. Weitere Informationen finden Sie unter App konfigurieren.
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 ausgegeben.

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

5. Nachrichten von FCM empfangen

Nachrichtenhandler 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.

Handler für Nachrichten im Vordergrund

Fügen Sie zuerst nach dem Kommentar TODO: Add stream controller in der Datei main.dart einen Stream-Controller hinzu, um Nachrichten vom Event-Handler 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>();

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

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, um nach dem Kommentar TODO: Set up foreground message handler auf Foreground-Nachrichten zu warten. Es gibt Protokolle aus und veröffentlicht die Nachricht im 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 dann das ursprüngliche State-Widget in der Datei main.dart durch diesen Code. Dadurch wird dem Stream-Controller im State-Widget ein Abonnent hinzugefügt und die letzte Nachricht im Widget angezeigt.

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

Handler für Hintergrundnachrichten 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 in den Vordergrund geholt wird. Dazu müssen die Nachrichten verarbeitet (siehe Interaktion verarbeiten) oder mit dem App-Server synchronisiert werden.

Erstellen Sie die Handler-Funktion 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());
}

Hintergrundnachrichten-Handler für das Web

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

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

App-Server einrichten

1. Importieren Sie den Server-Startcode, 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 Funktionen zum Senden von FCM-Nachrichten bietet.
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 wird von sendMessageToFcmRegistrationToken eine Benachrichtigungsnachricht mit einer Datennutzlast erstellt. Das Registrierungstoken ist für die App-Instanz bestimmt, 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 als 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 der folgende Log angezeigt: „Handling a foreground message“. Der Inhalt der Nachricht wird auch in der Benutzeroberfläche angezeigt, da die Benutzeroberfläche den Stream-Controller für neue Nachrichten abonniert hat.

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 durch ein anderes Fenster verdeckt wird oder ein anderer Tab aktiv ist), wird eine Webbenachrichtigung angezeigt.

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

6. Themennachricht senden

Mit der Plattformüberschreibungsfunktion der FCM HTTP v1 API kann für eine Nachrichtensendeanfrage ein unterschiedliches Verhalten auf verschiedenen Plattformen festgelegt werden. Ein Anwendungsfall für diese Funktion ist die Anzeige unterschiedlicher Benachrichtigungsinhalte je nach Plattform. Die Funktion wird am besten genutzt, wenn Sie mit Themennachrichten auf mehrere Geräte (die möglicherweise mehrere Plattformen umfassen) ausgerichtet sind. In diesem Abschnitt erfahren Sie, wie Sie Ihre App so konfigurieren, dass sie eine für jede Plattform angepasste Themennachricht empfängt.

Thema über den Client abonnieren

Rufen Sie zum Abonnieren eines Themas 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

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

Das FCM JS SDK unterstützt derzeit keine clientseitige Themenregistrierung. Stattdessen können Sie die serverseitige Topic Management API des Admin SDK verwenden. Dieser Code veranschaulicht die serverseitige Themenregistrierung 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 , um die Hauptfunktion in der Datei FcmSubscriptionManager.java auszuführen:

Nachricht mit Plattformüberschreibungen an ein Thema senden

Jetzt können Sie eine Nachricht zum Überschreiben der Themenplattform senden. Im folgenden Code-Snippet gilt:

• Sie erstellen eine Sendeanfrage mit einer Basismitteilung und dem Titel „A new app is available“.
• Durch die Nachricht wird auf iOS- und Webplattformen eine Benachrichtigung mit dem Titel „A new app is available“ generiert.
• 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 ansprechende plattformübergreifende Apps entwickeln. Dazu gehören die Einrichtung der Umgebung, die Einbindung von Abhängigkeiten sowie das Empfangen und Senden von Nachrichten. Weitere 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, finden Sie unter FCM und FIAM zum Senden von Nachrichten an Nutzer verwenden und Erste Multicast-Push-Nachricht mit FCM-Themen.

References

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