Catch up on everthing we announced at this year's Firebase Summit. Learn more

Nachrichten in einem JavaScript-Client empfangen

Das Verhalten von Nachrichten unterscheidet sich je nachdem, ob die Seite im Vordergrund (mit Fokus) oder im Hintergrund, hinter anderen Registerkarten verborgen oder vollständig geschlossen ist. In allen Fällen muss die Seite mit dem Griff onMessage Rückrufs, aber im Hintergrund Fällen können Sie auch behandeln müssen onBackgroundMessage oder die Anzeige Benachrichtigung konfigurieren , dass der Benutzer zu bringen Sie Ihren Web - App in den Vordergrund zu ermöglichen.

App-Status Benachrichtigung Daten Beide
Vordergrund onMessage onMessage onMessage
Hintergrund (Servicemitarbeiter) onBackgroundMessage (display Benachrichtigung automatisch dargestellt) onBackgroundMessage onBackgroundMessage (display Benachrichtigung automatisch dargestellt)

Die JavaScript - quickstart Probe zeigt den gesamten Code erforderlich , um Nachrichten zu empfangen.

Behandeln Sie Nachrichten, wenn Ihre Web-App im Vordergrund ist

Um das zu erhalten onMessage Ereignis, Ihre Anwendung muss die Firebase - Messaging - Dienst Arbeiter in definieren firebase-messaging-sw.js . Alternativ können Sie einen vorhandenen Dienst Arbeitnehmer das SDK durch bieten getToken(): Promise<string> .

Webversion 9

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);

Webversion 8

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

Wenn sich Ihre App im Vordergrund befindet (der Benutzer sieht sich gerade Ihre Webseite an), können Sie Daten- und Benachrichtigungsnutzlasten direkt auf der Seite empfangen.

Webversion 9

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});

Webversion 8

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});

Behandeln Sie Nachrichten, wenn Ihre Web-App im Hintergrund läuft

Alle Nachrichten, die empfangen werden, während sich die App im Hintergrund befindet, lösen eine Anzeigebenachrichtigung im Browser aus. Sie können Optionen für diese Benachrichtigung angeben, z. B. Titel oder Klickaktion, entweder in der Sendeanforderung von Ihrem App-Server oder mithilfe der Service-Worker-Logik auf dem Client.

Benachrichtigungsoptionen in der Sendeanfrage einstellen

Für Benachrichtigungsmeldungen aus dem App - Server gesendet, unterstützt die FCM JavaScript API , um die fcm_options.link Schlüssel. Normalerweise ist dies auf eine Seite in Ihrer Web-App festgelegt:

https://fcm.googleapis.com//v1/projects/<YOUR-PROJECT-ID>/messages:send
Content-Type: application/json
Authorization: bearer <YOUR-ACCESS-TOKEN>

{
  "message": {
    "token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ...",
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://dummypage.com"
      }
    }
  }
}

Zeigt der Linkwert auf eine Seite, die bereits in einem Browser-Tab geöffnet ist, bringt ein Klick auf die Benachrichtigung diesen Tab in den Vordergrund. Wenn die Seite noch nicht geöffnet ist, öffnet ein Benachrichtigungsklick die Seite in einem neuen Tab.

Da Datennachrichten nicht unterstützen fcm_options.link , wird empfohlen , eine Benachrichtigung Nutzlast für alle Datennachricht hinzuzufügen. Alternativ können Sie Benachrichtigungen über den Servicemitarbeiter bearbeiten.

Eine Erläuterung der Differenz zwischen der Meldung und Datennachrichten finden Sie Nachrichtentypen .

Benachrichtigungsoptionen im Servicemitarbeiter einstellen

Für Datennachrichten können Sie im Servicemitarbeiter Benachrichtigungsoptionen festlegen. Initialisieren Sie zunächst Ihre App im Service Worker:

Webversion 9

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);

Webversion 8

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

So legen Sie Optionen, Call onBackgroundMessage in firebase-messaging-sw.js . In diesem Beispiel erstellen wir eine Benachrichtigung mit Titel-, Text- und Symbolfeldern.

Webversion 9

import { getMessaging } from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Webversion 8

messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Best Practices für Benachrichtigungen

Wenn Sie mit Push - Messaging für Web vertraut sind, können Sie haben bereits die Grundzüge lesen , was eine gute Meldung macht . Für Entwickler, die Benachrichtigungen über FCM for Web senden, sind Genauigkeit und Relevanz die wichtigsten Überlegungen. Hier sind einige spezifische Empfehlungen, um Ihre Benachrichtigungen präzise und relevant zu halten:

  • Verwenden Sie das Symbolfeld, um ein aussagekräftiges Bild zu senden. Für viele Anwendungsfälle sollte dies ein Firmen- oder App-Logo sein, das Ihre Nutzer sofort erkennen. Bei einer Chat-Anwendung kann es sich auch um das Profilbild des sendenden Benutzers handeln.
  • Verwenden Sie das Titelfeld, um die genaue Art der Nachricht auszudrücken. "Jimmy hat geantwortet" beispielsweise vermittelt genauere Informationen als "Neue Nachricht". Verwenden Sie diesen wertvollen Platz nicht für Ihren Firmen- oder App-Namen – verwenden Sie zu diesem Zweck das Symbol.
  • Verwenden Sie nicht den Titel oder den Text der Benachrichtigung, um Ihren Website-Namen oder Ihre Domain anzuzeigen. Benachrichtigungen enthalten bereits Ihren Domainnamen.
  • In fcm_options.link , in der Regel der Benutzer zurück zu Ihrem Web - App zu verknüpfen und sie in dem Fokus im Browser bringen. In seltenen Fällen, in denen alle Informationen, die Sie übermitteln müssen, in die Benachrichtigung passen, benötigen Sie möglicherweise keinen Link.