Erste Schritte mit Firebase Cloud Messaging in Web-Apps

Plattform auswählen:

iOS+ Android Web Flutter Unity C++

In diesem Leitfaden wird beschrieben, wie Sie Firebase Cloud Messaging in Ihren Webclient-Apps einrichten, um Nachrichten zuverlässig zu senden.

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 Supportmatrix 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, wird Firebase App Hosting empfohlen. Dort gibt es eine kostenlose Stufe für HTTPS-Hosting auf Ihrer eigenen Domain.

Wenn Sie die FCM JavaScript API verwenden möchten, müssen Sie Firebase zu Ihrer Web-App hinzufügen und Logik für den Zugriff auf Firebase-Installations-IDs hinzufügen, mit denen Sie den Empfänger für Ihre Benachrichtigungen festlegen können.

FCM SDK hinzufügen und initialisieren

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

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

Web

Weitere Informationen zur Tree-Shakeable Modular Web API und zum Upgrade von der API mit Namespace.

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

Weitere Informationen zur Tree-Shakeable Modular Web API und zum Upgrade von der API mit Namespace.

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 Console aktivieren. Wenn Sie die API aktivieren, müssen Sie in der Google Cloud Console mit demselben Google-Konto angemeldet sein, das Sie für Firebase verwenden. Achten Sie außerdem darauf, das richtige Projekt auszuwählen. Bei neuen Projekten, die das FCM SDK hinzufügen, ist diese API standardmäßig aktiviert.

Web-Anmeldedaten mit FCM konfigurieren

Die FCM-Weboberfläche verwendet Webanmeldedaten, die als Voluntary Application Server Identification (VAPID-Schlüssel) bezeichnet werden, um Sendeanfragen an unterstützte Web-Push-Dienste zu autorisieren. Wenn Sie Ihre App für Push-Benachrichtigungen abonnieren 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. Rufen Sie in der Firebase Console die Einstellungen > Allgemein auf. Klicken Sie dann auf den Tab Cloud Messaging.

2. Rufen Sie den Bereich Webkonfiguration auf.

3. Klicken Sie auf dem Tab Web-Push-Zertifikate auf Schlüsselpaar generieren.

   In der Console wird ein Hinweis angezeigt, dass das Schlüsselpaar generiert wurde. Außerdem werden der String des öffentlichen Schlüssels und das Datum des Hinzufügens angezeigt.

Vorhandenes Schlüsselpaar importieren

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

1. Rufen Sie in der Firebase Console die Einstellungen > Allgemein auf. Klicken Sie dann auf den Tab Cloud Messaging.

2. Rufen Sie den Bereich Webkonfiguration auf.

3. Suchen Sie auf dem Tab Web-Push-Zertifikate nach dem Linktext Vorhandenes Schlüsselpaar importieren und wählen Sie ihn aus.

4. Geben Sie im Dialogfeld Schlüsselpaar importieren den öffentlichen und den privaten Schlüssel in die entsprechenden Felder ein und klicken Sie auf Importieren.

   In der Console werden der String des öffentlichen Schlüssels und das Datum des Hinzufügens angezeigt.

Eine Anleitung zum Hinzufügen des Schlüssels zu Ihrer App finden Sie unter Web-Anmeldedaten in Ihrer App konfigurieren. Weitere Informationen zum Format der Schlüssel und zu ihrer Generierung finden Sie unter Anwendungsserverschlüssel.

Web-Anmeldedaten in Ihrer App konfigurieren

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

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

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

Hinweis: Wenn Sie die verworfenen Token-APIs verwenden, sollten Sie den VAPID-Schlüssel an getToken() statt an register() übergeben.

Berechtigung zum Senden von Benachrichtigungen anfordern und Service Worker konfigurieren

Wenn Sie eine App-Instanz mit FCM ansprechen möchten, müssen Sie zuerst mit Notification.requestPermission() die Berechtigung zum Senden von Benachrichtigungen vom Nutzer anfordern. Wenn der Aufruf wie gezeigt erfolgt, wird der Berechtigungsstatus zurückgegeben, wenn die Berechtigung gewährt wurde:

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. Wenn Sie noch keine firebase-messaging-sw.js-Datei haben, erstellen Sie eine leere Datei mit diesem Namen und platzieren Sie sie vor der Registrierung im Stammverzeichnis Ihrer Domain. Sie können der Datei später im Rahmen der Clienteinrichtung aussagekräftige Inhalte hinzufügen.

Auf die Firebase-Installations-ID zugreifen

Achtung: Verwenden Sie für die Registrierungsverwaltung nicht gleichzeitig die Firebase Installation ID APIs und die verworfenen Registration Token APIs. Wir empfehlen, Firebase-Installations-IDs (FIDs) zu verwenden, um Ihre App-Instanzen zu segmentieren oder als Ziel festzulegen.

Tipp: Weitere Informationen finden Sie unter Best Practices für die FCM-Registrierungsverwaltung.

So registrieren Sie die App-Instanz und rufen die Firebase-Installations-ID (FID) für das Nachrichten-Targeting ab:

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});
messaging_register.js

Der Callback onRegistered wird in drei Szenarien ausgelöst:

1. Jedes Mal, wenn ein manueller register()-Aufruf abgeschlossen wird.
2. Eine Änderung der Firebase-Installations-ID wurde erkannt.
3. Ein pushsubscriptionchange-Ereignis wird ausgelöst.

Nachdem Sie die Firebase-Installations-ID abgerufen haben, senden Sie sie an Ihren Anwendungsserver und speichern Sie sie mit der von Ihnen bevorzugten Methode.

Auf das Registrierungstoken zugreifen (verworfen)

Achtung: Diese Funktion wurde eingestellt. Verwenden Sie Firebase-Installations-IDs, da diese Methode in einer zukünftigen Version entfernt wird.

Tipp: Unter Best Practices für die FCM-Registrierungsverwaltung finden Sie Tipps zur Verwaltung von Registrierungen.

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 du das Token erhalten hast, sende es an deinen App-Server und speichere es mit der von dir bevorzugten 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 Berechtigungsanfrage zum Empfangen von Remote-Benachrichtigungen akzeptieren.

2. Prüfe, ob die App auf dem Gerät im Hintergrund ausgeführt wird.

3. Rufen Sie in der Firebase-Konsole DevOps & Engagement > Messaging auf.

4. Kampagne erstellen

   • Wenn dies Ihre erste Mitteilung ist:

     1. Wählen Sie Erste Kampagne erstellen aus.

     2. Wählen Sie Firebase-Benachrichtigungen und dann Erstellen aus.

   • Wenn Sie bereits Kampagnen erstellt haben:

     1. Wählen Sie auf dem Tab Kampagnen die Option Neue Kampagne aus.

     2. Klicken Sie auf Benachrichtigungen.

5. Geben Sie den Nachrichtentext ein.

6. Wählen Sie im rechten Bereich Testnachricht senden aus.

7. Geben Sie im Feld FCM-Registrierungstoken hinzufügen Ihr Registrierungstoken ein.

8. Wählen Sie Testen aus.

Nachdem Sie Test ausgewählt haben, sollte das Ziel-Clientgerä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 das Web (JavaScript) fortzufahren:

• Nachrichten an Geräte senden
• Nachrichten in einem JavaScript-Client empfangen
• Nachrichten an Themen senden