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 wird empfohlen und bietet ein nicht-Cost - Tier für HTTPS auf Ihrem eigenen Domain - Hosting.

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 Ihrem JavaScript-Projekt Firebase hinzu

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 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 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 ö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 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 Datum an, an dem sie hinzugefügt wurde.

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 .

Rufen Sie ein Messaging-Objekt ab

Webversion 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Webversion 8

const messaging = firebase.messaging();

Konfigurieren Sie Webanmeldeinformationen 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 gibt es ein Token zurück oder lehnt das Promise aufgrund eines Fehlers ab.

FCM 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 während des Client-Setup-Prozesses aussagekräftigen Inhalt hinzufügen.

So rufen Sie das aktuelle Token ab:

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

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

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: