Einrichten einer JavaScript Firebase Cloud Messaging-Client-App

Der FCM JavaScript - API können Sie Benachrichtigungsmeldungen in Web - Anwendungen laufen in Browsern angezeigt werden , die Unterstützung Push - API . Dazu gehört auch die Browser - Versionen aufgeführt in dieser Support - Matrix und Chrome - Erweiterungen über den 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, Firebase Hosting ist kostenlos HTTPS empfohlen auf Ihrer eigenen Domain - Hosting.

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

Firebase zu Ihrem JavaScript-Projekt hinzufügen

Wenn Sie nicht bereits haben, fügen Sie Firebase zu Ihrem JavaScript - Projekt .

Wenn Sie derzeit FCM für Web verwenden und wollen SDK 6.7.0 oder höher aktualisieren, müssen Sie das ermöglichen FCM Registrierung API für Ihr Projekt in der Google Cloud Console. Stellen Sie beim Aktivieren der API sicher, dass Sie bei der Cloud Console mit demselben Google-Konto angemeldet sind, das Sie für Firebase verwenden, und wählen Sie das richtige Projekt aus. Bei neuen Projekten, die das FCM SDK hinzufügen, ist diese API standardmäßig aktiviert.

Konfigurieren von 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 Push-Benachrichtigungen für Ihre App 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 Console importieren.

Generieren Sie ein neues Schlüsselpaar

  1. Öffnen Sie den Cloud - Messaging - Registerkarte der Firebase Konsole Einstellungen Scheibe und navigieren Sie zu dem Web - Konfigurationsabschnitt.
  2. In dem Web - Push - Zertifikaten Registerkarte klicken Schlüsselpaar generieren. Die Konsole zeigt einen Hinweis an, dass das Schlüsselpaar generiert wurde, und zeigt die Zeichenfolge des öffentlichen Schlüssels und das hinzugefügte Datum an.

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, damit Sie Ihre vorhandenen Web-App-Instanzen über FCM-APIs erreichen können. 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-sicher codierter Form:

  1. Öffnen Sie den Cloud - Messaging - Registerkarte der Firebase Konsole Einstellungen Scheibe und navigieren Sie zu dem Web - Konfigurationsabschnitt.
  2. Auf der Registerkarte Push - Zertifikate Web finden und den Link - Text auswählen „ ein vorhandenes Schlüsselpaar importieren.“
  3. Im Import ein Schlüsselpaar Dialog, geben Sie 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.

Eine Anleitung, wie Sie den Schlüssel zu Ihren App hinzufügen, finden Sie Configure Web - Anmeldeinformationen in Ihrer Anwendung . Weitere Informationen über das Format der Tasten und wie sie zu erzeugen, siehe Anwendungsserver Schlüssel .

Abrufen eines Messaging-Objekts

Web v8

const messaging = firebase.messaging();

Web v9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Konfigurieren Sie Web-Anmeldeinformationen in Ihrer App

Das Verfahren getToken(): Promise<string> erlaubt FCM das vapid Schlüssel Credential zu verwenden , wenn Nachrichtenanforderungen an verschiedenen Push - Dienste zu senden. Mit der Taste Sie entsprechend den Anweisungen erzeugt oder importiert Configure Web Credentials mit FCM , fügen Sie ihn in Ihrem Code nach dem Messaging - Objekt abgerufen wird:

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

Greifen Sie auf das Registrierungstoken zu

Wenn Sie die aktuelle Registrierung für eine App - Instanz Token abrufen müssen, rufen getToken . Wenn keine Benachrichtigungsberechtigung erteilt wurde, fragt diese Methode den Benutzer nach Benachrichtigungsberechtigungen. Andernfalls wird ein Token zurückgegeben oder die Zusage aufgrund eines Fehlers abgelehnt.

Der Messaging - Dienst erfordert eine firebase-messaging-sw.js Datei. Sofern Sie nicht bereits eine haben firebase-messaging-sw.js Datei, eine leere Datei mit diesem Namen erstellen und sie in der Wurzel Ihrer Domain platzieren , bevor ein Token abruft. Sie können der Datei später im Client-Setup-Prozess sinnvolle Inhalte hinzufügen.

So rufen Sie das aktuelle Token ab:

Web v8

// 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);
  // ...
});

Web v9

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);
  // ...
});

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