Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Empfangen Sie Nachrichten in einem JavaScript-Client

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

Das Verhalten von Nachrichten unterscheidet sich je nachdem, ob die Seite im Vordergrund (Fokus) oder im Hintergrund, hinter anderen Registerkarten versteckt oder vollständig geschlossen ist. In allen Fällen muss die Seite den onMessage Rückruf verarbeiten, aber in Hintergrundfällen müssen Sie möglicherweise auch onBackgroundMessage verarbeiten oder die Anzeigebenachrichtigung konfigurieren, damit der Benutzer Ihre Web-App in den Vordergrund bringen kann.

App-Zustand Benachrichtigung Daten Beide
Vordergrund onMessage onMessage onMessage
Hintergrund (Servicemitarbeiter) onBackgroundMessage (Display-Benachrichtigung wird automatisch angezeigt) onBackgroundMessage onBackgroundMessage (Display-Benachrichtigung wird automatisch angezeigt)

Das JavaScript -Schnellstartbeispiel zeigt den gesamten Code, der zum Empfangen von Nachrichten erforderlich ist.

Behandeln Sie Nachrichten, wenn sich Ihre Web-App im Vordergrund befindet

Um das onMessage Ereignis zu empfangen, muss Ihre App den Firebase Messaging Service Worker in firebase-messaging-sw.js . Alternativ können Sie dem SDK über getToken(): Promise<string> einen vorhandenen Service Worker bereitstellen.

Web version 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);

Web version 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 betrachtet gerade Ihre Webseite), können Sie Daten und Benachrichtigungsnutzlasten direkt auf der Seite empfangen.

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

Web version 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 die App im Hintergrund läuft, 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.

Festlegen von Benachrichtigungsoptionen in der Sendeanforderung

Für Benachrichtigungen, die vom App-Server gesendet werden, unterstützt die FCM-JavaScript-API den Schlüssel fcm_options.link . Normalerweise ist dies auf einer 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"
      }
    }
  }
}

Wenn der Linkwert auf eine Seite zeigt, 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 fcm_options.link nicht unterstützen, wird empfohlen, allen Datennachrichten eine Benachrichtigungsnutzlast hinzuzufügen. Alternativ können Sie Benachrichtigungen auch über den Service Worker bearbeiten.

Eine Erläuterung des Unterschieds zwischen Benachrichtigungs- und Datennachrichten finden Sie unter Nachrichtentypen .

Benachrichtigungsoptionen im Service Worker einstellen

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

Web version 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);

Web version 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();

Um Optionen festzulegen, rufen onBackgroundMessage in firebase-messaging-sw.js . In diesem Beispiel erstellen wir eine Benachrichtigung mit Titel-, Text- und Symbolfeldern.

Web version 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);
});

Web version 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-Nachrichten für das Internet vertraut sind, haben Sie vielleicht bereits die allgemeinen Richtlinien dazu gelesen, was eine gute Benachrichtigung ausmacht . Für Entwickler, die Benachrichtigungen über FCM für das 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 Benutzer 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. Beispielsweise vermittelt „Jimmy hat geantwortet“ 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 Text der Benachrichtigung, um den Namen oder die Domäne Ihrer Website anzuzeigen. Benachrichtigungen enthalten bereits Ihren Domainnamen.
  • Fügen Sie fcm_options.link , normalerweise um den Benutzer zurück zu Ihrer Web-App zu verlinken und ihn im Browser in den Fokus zu 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.