Erste Schritte mit Firebase Cloud Messaging


In dieser Kurzanleitung wird beschrieben, wie Sie Firebase Cloud Messaging in Ihren mobilen Client-Apps und Webclient-Apps einrichten, damit Sie zuverlässig Nachrichten senden können. Informationen zu Serverumgebungen finden Sie unter Ihre Serverumgebung und FCM.

JavaScript-Client-App Firebase Cloud Messaging einrichten

Mit der FCM JavaScript API können Sie Benachrichtigungen in Web-Apps empfangen, die in Browsern ausgeführt werden, die die Push API unterstützen. Dazu gehören die in dieser Unterstützungsmatrix aufgeführten Browserversionen und Chrome-Erweiterungen, die die Push API verwenden.

Das FCM SDK wird nur auf Seiten unterstützt, die über HTTPS bereitgestellt werden. Das liegt daran, dass Service Worker verwendet werden, die nur auf HTTPS-Websites verfügbar sind. Wenn Sie einen Anbieter benötigen, ist Firebase App Hosting empfehlenswert. Dort gibt es ein kostenloses Abo für das HTTPS-Hosting auf Ihrer eigenen Domain.

Wenn Sie die FCM JavaScript API verwenden möchten, müssen Sie Firebase Ihrer Web-App hinzufügen und Logik für den Zugriff auf Registrierungstokens einfügen.

FCM SDK hinzufügen und initialisieren

  1. Falls noch nicht geschehen, installieren Sie das Firebase JS SDK und initialisieren Sie Firebase.

  2. Fügen Sie das Firebase Cloud Messaging JS SDK hinzu und initialisieren Sie Firebase Cloud Messaging:

Web 

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

Wenn Sie FCM für das Web verwenden und ein Upgrade auf SDK 6.7.0 oder höher durchführen möchten, müssen Sie die FCM Registration API für Ihr Projekt in der Google Cloud aktivieren. Wenn Sie die API aktivieren, achten Sie darauf, dass Sie in der Cloud Console mit demselben Google-Konto angemeldet sind, das Sie für Firebase verwenden, und dass Sie das richtige Projekt auswählen. Bei neuen Projekten, in denen das FCM SDK hinzugefügt wird, ist diese API standardmäßig aktiviert.

Webanmeldedaten mit FCM konfigurieren

Die FCM-Weboberfläche verwendet Webanmeldedaten namens „Voluntary Application Server Identification“ (VAPID-Schlüssel), um Sendeanfragen an unterstützte Web-Push-Dienste zu autorisieren. Wenn Sie Ihre App für Push-Benachrichtigungen registrieren möchten, müssen Sie ein Schlüsselpaar mit Ihrem Firebase-Projekt verknüpfen. Sie können entweder ein neues Schlüsselpaar generieren oder Ihr vorhandenes Schlüsselpaar über die Firebase-Konsole importieren.

Neues Schlüsselpaar generieren

  1. Öffnen Sie in der Firebase-Konsole im Bereich Einstellungen den Tab Cloud Messaging und rufen Sie den Bereich Webkonfiguration auf.
  2. Klicken Sie auf dem Tab Web-Push-Zertifikate auf Schlüsselpaar generieren. In der Konsole wird eine Benachrichtigung angezeigt, dass das Schlüsselpaar generiert wurde, sowie der öffentliche Schlüsselstring und das Datum, an dem er hinzugefügt wurde.

Vorhandenes Schlüsselpaar importieren

Wenn Sie bereits ein Schlüsselpaar haben, das Sie mit Ihrer Web-App verwenden, können Sie es in FCM importieren, damit Sie über FCM-APIs auf Ihre vorhandenen Web-App-Instanzen zugreifen können. Zum Importieren von Schlüsseln benötigen Sie Zugriff auf das Firebase-Projekt auf Inhaberebene. Importieren Sie Ihren vorhandenen öffentlichen und privaten Schlüssel in Base64-URL-sicherer codierter Form:

  1. Öffnen Sie in der Firebase-Konsole im Bereich Einstellungen den Tab Cloud Messaging und rufen Sie den Bereich Webkonfiguration auf.
  2. Suchen Sie auf dem Tab Web-Push-Zertifikate nach dem Linktext Vorhandenes Schlüsselpaar importieren und wählen Sie ihn aus.
  3. Geben Sie im Dialogfeld Schlüsselpaar importieren Ihren öffentlichen und privaten Schlüssel in die entsprechenden Felder ein und klicken Sie auf Importieren. In der Konsole werden der öffentliche Schlüsselstring und das Hinzufügungsdatum angezeigt.

Eine Anleitung zum Hinzufügen des Schlüssels zu Ihrer App finden Sie unter Webanmeldedaten in Ihrer App konfigurieren. Weitere Informationen zum Format der Schlüssel und zum Generieren von Schlüsseln finden Sie unter Anwendungsserverschlüssel.

Webanmeldedaten in Ihrer App konfigurieren

Mit der Methode getToken(): Promise<string> kann FCM das VAPID-Schlüssel-Anmeldedaten verwenden, wenn Nachrichtenanfragen an verschiedene Push-Dienste gesendet werden. Fügen Sie den Schlüssel, den Sie gemäß der Anleitung unter Webanmeldedaten mit FCM konfigurieren generiert oder importiert haben, in Ihren Code ein, nachdem das Messaging-Objekt abgerufen wurde:

import { getMessaging, getToken } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Auf das Registrierungstoken zugreifen

Wenn Sie das aktuelle Registrierungstoken für eine App-Instanz abrufen müssen, fordern Sie zuerst mit Notification.requestPermission() Benachrichtigungsberechtigungen vom Nutzer an. Wenn die Funktion wie gezeigt aufgerufen wird, wird ein Token zurückgegeben, wenn die Berechtigung erteilt wird, oder das Promise wird abgelehnt, wenn die Berechtigung verweigert wird: 

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

Für FCM ist eine firebase-messaging-sw.js-Datei erforderlich. Sofern Sie noch keine firebase-messaging-sw.js-Datei haben, erstellen Sie eine leere Datei mit diesem Namen und legen Sie sie im Stammverzeichnis Ihrer Domain ab, bevor Sie ein Token abrufen. Sie können der Datei später während der Client-Einrichtung aussagekräftige Inhalte hinzufügen.

So rufen Sie das aktuelle Token ab:

Web

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
messaging_get_token.js

Web

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
index.js

Nachdem Sie das Token erhalten haben, senden Sie es an den App-Server und speichern Sie es mit der gewünschten Methode.

Testbenachrichtigung senden

  1. Installieren Sie die App auf dem Zielgerät und führen Sie sie aus. Auf Apple-Geräten müssen Sie die Anfrage für die Berechtigung zum Empfangen von Remote-Benachrichtigungen annehmen.
  2. Prüfen Sie, ob die App auf dem Gerät im Hintergrund ausgeführt wird.
  3. Öffnen Sie in der Firebase Console die Seite Messaging.
  4. Wenn dies Ihre erste Mitteilung ist, wählen Sie Erste Kampagne erstellen aus.
    1. Wählen Sie Firebase-Benachrichtigungen und dann Erstellen aus.
  5. Wählen Sie andernfalls auf dem Tab Kampagnen die Option Neue Kampagne und dann Benachrichtigungen aus.
  6. Geben Sie den Nachrichtentext ein.
  7. Wählen Sie im rechten Bereich Testnachricht senden aus.
  8. Geben Sie im Feld FCM-Registrierungstoken hinzufügen Ihr Registrierungstoken ein.
  9. Wählen Sie Testen aus.

Nachdem Sie Testen ausgewählt haben, sollte das Zielclientgerät die Benachrichtigung erhalten, während die App im Hintergrund ausgeführt wird.

Nächste Schritte

Nachdem Sie die Einrichtungsschritte abgeschlossen haben, haben Sie folgende Möglichkeiten, mit FCM für Web (JavaScript) fortzufahren: