Catch up on highlights from Firebase at Google I/O 2023. Learn more

Richten Sie eine JavaScript Firebase Cloud Messaging-Client-App ein

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 Support-Matrix aufgeführten Browserversionen und Chrome-Erweiterungen über die Push-API.

Das FCM SDK wird nur auf Seiten unterstützt, die über HTTPS bereitgestellt werden. Dies ist auf den Einsatz von Servicemitarbeitern zurückzuführen, die nur auf HTTPS-Sites verfügbar sind. Wenn Sie einen Anbieter benötigen, wird Firebase Hosting empfohlen und bietet eine kostenlose Stufe für HTTPS-Hosting auf Ihrer eigenen Domain.

Um mit der FCM-JavaScript-API zu beginnen, müssen Sie Firebase zu Ihrer Web-App hinzufügen und Logik für den Zugriff auf Registrierungstokens hinzufügen.

Fügen Sie das FCM SDK hinzu und initialisieren Sie es

  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:

Modulare Web-API

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-Namespace-API

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 SDK 6.7.0 oder höher aktualisieren möchten, müssen Sie die FCM-Registrierungs-API für Ihr Projekt in der Google Cloud Console aktivieren. Wenn Sie die API aktivieren, stellen Sie sicher, dass Sie bei der Cloud Console mit demselben Google-Konto angemeldet sind, das Sie für Firebase verwenden, und stellen Sie sicher, dass Sie das richtige Projekt auswählen. Bei neuen Projekten, die das FCM SDK hinzufügen, ist diese API standardmäßig aktiviert.

Konfigurieren Sie Web-Anmeldeinformationen mit FCM

Die FCM-Webschnittstelle verwendet Web-Anmeldeinformationen, die als „Voluntary Application Server Identification“ oder „VAPID“-Schlüssel bezeichnet werden, um Sendeanforderungen an unterstützte Web-Push-Dienste zu autorisieren. Um Ihre App für Push-Benachrichtigungen zu abonnieren, müssen Sie Ihrem Firebase-Projekt ein Schlüsselpaar zuordnen. Sie können entweder ein neues Schlüsselpaar generieren oder Ihr vorhandenes Schlüsselpaar über die Firebase-Konsole importieren.

Erzeugen Sie ein neues Schlüsselpaar

  1. Öffnen Sie die Registerkarte „Cloud Messaging“ im Bereich „Einstellungen“ der Firebase-Konsole und scrollen Sie zum Abschnitt „Webkonfiguration“ .
  2. Klicken Sie auf der Registerkarte „Web-Push-Zertifikate“ auf „Schlüsselpaar generieren“ . Die Konsole zeigt einen Hinweis an, dass das Schlüsselpaar generiert wurde, sowie die Zeichenfolge des öffentlichen Schlüssels und das Datum, an dem es hinzugefügt wurde.

Importieren Sie ein vorhandenes Schlüsselpaar

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

  1. Öffnen Sie die Registerkarte „Cloud Messaging“ im Bereich „Einstellungen“ der Firebase-Konsole und scrollen Sie zum Abschnitt „Webkonfiguration“ .
  2. Suchen Sie auf der Registerkarte „Web-Push-Zertifikate“ den 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“ . Die Konsole zeigt die Zeichenfolge des öffentlichen Schlüssels und das hinzugefügte Datum an.

Anweisungen zum Hinzufügen des Schlüssels zu Ihrer App finden Sie unter Webanmeldeinformationen in Ihrer App konfigurieren . Weitere Informationen zum Format der Schlüssel und deren Generierung finden Sie unter Anwendungsserverschlüssel .

Konfigurieren Sie Web-Anmeldeinformationen in Ihrer App

Die Methode getToken(): Promise<string> ermöglicht es FCM, die VAPID-Schlüsselanmeldeinformationen zu verwenden, wenn Nachrichtenanforderungen an verschiedene Push-Dienste gesendet werden. Fügen Sie den Schlüssel, den Sie gemäß den Anweisungen unter Konfigurieren von Web-Anmeldeinformationen mit FCM 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"});

Greifen Sie auf das Registrierungstoken zu

Wenn Sie das aktuelle Registrierungstoken für eine App-Instanz abrufen müssen, fordern Sie zunächst mit Notification.requestPermission() Benachrichtigungsberechtigungen vom Benutzer an. Wenn es wie gezeigt aufgerufen wird, gibt es ein Token zurück, wenn die Erlaubnis erteilt wird, oder lehnt das Versprechen ab, wenn es 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 Datei firebase-messaging-sw.js erforderlich. Sofern Sie nicht bereits über eine Datei firebase-messaging-sw.js verfügen, 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 Client-Setup-Prozess aussagekräftige Inhalte hinzufügen.

So rufen Sie das aktuelle Token ab:

Web modular API

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 namespaced API

// 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 Ihrer bevorzugten Methode.

Nächste Schritte

Nachdem Sie die Einrichtungsschritte abgeschlossen haben, finden Sie hier einige Optionen, um mit FCM für Web (JavaScript) fortzufahren: