Firebase Cloud Messaging-Client-App für JavaScript einrichten

Mit der FCM JavaScript API können Sie Benachrichtigungsnachrichten in Web-Apps erhalten, die in Browsern ausgeführt werden, die die Push API unterstützen. Dazu gehören die in dieser Supportmatrix aufgeführten Browserversionen und Chrome-Erweiterungen über die Push API.

Das FCM SDK wird nur auf Seiten unterstützt, die über HTTPS bereitgestellt werden. Das liegt an der Verwendung von Dienst-Workern, die nur auf HTTPS-Websites verfügbar sind. Wenn Sie einen Anbieter benötigen, wird Firebase Hosting empfohlen. Es bietet eine kostenlose Stufe für das HTTPS-Hosting auf Ihrer eigenen Domain.

Wenn Sie mit der FCM JavaScript API beginnen möchten, müssen Sie Ihrer Webanwendung Firebase hinzufügen und Logik zum Zugriff auf Registrierungstokens hinzufügen.

FCM SDK hinzufügen und initialisieren

  1. Installieren und initialisieren Sie das Firebase JS SDK, falls noch nicht geschehen.

  2. Füge das Firebase Cloud Messaging JS SDK hinzu und initialisiere 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 derzeit FCM für das Web verwenden und auf das SDK 6.7.0 oder höher umstellen möchten, müssen Sie die FCM Registration API für Ihr Projekt in der Google Cloud Console aktivieren. Achten Sie beim Aktivieren der API darauf, dass Sie mit demselben Google-Konto in der Cloud Console angemeldet sind, das Sie auch für Firebase verwenden, und wählen Sie das richtige Projekt aus. Bei neuen Projekten, in denen das FCM SDK hinzugefügt wird, ist diese API standardmäßig aktiviert.

Web-Anmeldedaten mit FCM konfigurieren

Die FCM-Weboberfläche verwendet Web-Anmeldedaten, sogenannte „VAPID-Schlüssel“ (Voluntary Application Server Identification), um das Senden von Anfragen an unterstützte Web-Push-Dienste zu autorisieren. Wenn Sie Push-Benachrichtigungen für Ihre App abonnieren möchten, müssen Sie Ihrem Firebase-Projekt ein Schlüsselpaar zuordnen. Sie können entweder ein neues Schlüsselpaar generieren oder ein vorhandenes Schlüsselpaar über die Firebase Console importieren.

Neues Schlüsselpaar generieren

  1. Öffne in der Firebase-Konsole auf dem Bereich Einstellungen den Tab Cloud Messaging und scrolle zum Abschnitt Webkonfiguration.
  2. Klicken Sie auf dem Tab Web-Push-Zertifikate auf Schlüsselpaar generieren. In der Console wird eine Meldung angezeigt, dass das Schlüsselpaar generiert wurde. Außerdem werden der öffentliche Schlüsselstring und das Datum des Hinzufügens angezeigt.

Vorhandenes Schlüsselpaar importieren

Wenn Sie bereits ein Schlüsselpaar haben, das Sie für Ihre Webanwendung verwenden, können Sie es in FCM importieren, damit Sie Ihre vorhandenen Webanwendungsinstanzen über FCM APIs erreichen 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 im Base64-Format, das für URLs sicher ist:

  1. Öffne den Tab Cloud Messaging im Bereich Einstellungen der Firebase-Konsole und scrolle zum Abschnitt Webkonfiguration.
  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 Ihre öffentlichen und privaten Schlüssel in die entsprechenden Felder ein und klicken Sie auf Importieren. In der Console werden der öffentliche Schlüsselstring und das Datum des Hinzufügens 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 zur Generierung finden Sie unter Anwendungsserverschlüssel.

Web-Anmeldedaten in Ihrer App konfigurieren

Mit der Methode getToken(): Promise<string> kann FCM die VAPID-Schlüsselinformationen verwenden, wenn Nachrichtenanfragen an verschiedene Push-Dienste gesendet werden. Fügen Sie den Schlüssel, den Sie gemäß der Anleitung unter Web-Anmeldedaten mit FCM konfigurieren generiert oder importiert haben, in Ihren Code ein, nachdem das Nachrichtenobjekt 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öchten, müssen Sie zuerst die Berechtigung zum Senden von Benachrichtigungen vom Nutzer mit Notification.requestPermission() anfordern. Wenn die Funktion so aufgerufen wird, wird ein Token zurückgegeben, wenn die Berechtigung gewährt wird, oder das Versprechen wird abgelehnt, wenn sie abgelehnt 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 platzieren Sie sie im Stammverzeichnis Ihrer Domain, bevor Sie ein Token abrufen. Sie können der Datei später im Rahmen der Einrichtung des Clients 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 Ihren App-Server und speichern Sie es mit der gewünschten Methode.

Nächste Schritte

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