Firebase is back at Google I/O on May 10! Register now

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

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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 liegt an der Verwendung von Service Workern, 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 Registrierungstoken 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:

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
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. Stellen Sie beim Aktivieren der API sicher, dass Sie mit demselben Google-Konto, das Sie für Firebase verwenden, bei der Cloud Console angemeldet sind, 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 Webanmeldeinformationen, 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.

Generieren 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, und zeigt die öffentliche Schlüsselzeichenfolge und das Datum an, an dem sie hinzugefügt wurde.

Importieren Sie ein vorhandenes Schlüsselpaar

Wenn Sie ein vorhandenes Schlüsselpaar haben, das Sie bereits mit Ihrer Webanwendung verwenden, können Sie es in FCM importieren, sodass Sie Ihre vorhandenen Webanwendungsinstanzen über FCM-APIs erreichen 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-sicherer 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 nach dem Linktext „importieren Sie ein vorhandenes Schlüsselpaar“ 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 Datum an, an dem sie hinzugefügt wurde.

Anweisungen zum Hinzufügen des Schlüssels zu Ihrer App finden Sie unter Web-Anmeldeinformationen in Ihrer App konfigurieren . Weitere Informationen zum Format der Schlüssel und wie sie generiert werden, finden Sie unter Anwendungsserverschlüssel .

Konfigurieren Sie Webanmeldeinformationen 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. Verwenden Sie den Schlüssel, den Sie gemäß den Anweisungen in Konfigurieren von Webanmeldeinformationen mit FCM generiert oder importiert haben, und fügen Sie ihn Ihrem Code hinzu, 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.');

FCM erfordert eine firebase-messaging-sw.js -Datei. Sofern Sie nicht bereits über eine firebase-messaging-sw.js Datei verfügen, erstellen Sie eine leere Datei mit diesem Namen und platzieren Sie sie im Stammverzeichnis Ihrer Domäne, bevor Sie ein Token abrufen. Sie können der Datei später während des Client-Setup-Prozesses aussagekräftigen Inhalt hinzufügen.

So rufen Sie das aktuelle Token ab:

Web version 9

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 version 8

// 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, sind hier einige Optionen, um mit FCM für Web (JavaScript) fortzufahren: