Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Empfangen Sie Nachrichten in einem JavaScript-Client

Das Verhalten von Nachrichten hängt davon ab, ob sich die Seite im Vordergrund (mit Fokus) oder im Hintergrund befindet, hinter anderen Registerkarten versteckt oder vollständig geschlossen ist. In allen Fällen muss die Seite den onMessage Rückruf verarbeiten. In Hintergrundfällen müssen Sie möglicherweise auch onBackgroundMessage oder die Anzeigemeldung konfigurieren, damit der Benutzer Ihre Web-App in den Vordergrund stellen kann.

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

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

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

Um das Ereignis onMessage 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 Servicemitarbeiter zur Verfügung stellen getToken(): Promise<string> .

Web v8

// 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.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/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();

Web v9

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

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

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

Web v8

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

Web v9

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

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

Alle Nachrichten, die empfangen werden, während sich die App im Hintergrund befindet, lösen eine Anzeigemeldung 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 vom App-Server gesendete Benachrichtigungsnachrichten unterstützt die FCM-JavaScript-API den Schlüssel fcm_options.link . In der Regel wird 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"
      }
    }
  }
}

Wenn der Linkwert auf eine Seite verweist, die bereits in einer Browserregisterkarte geöffnet ist, wird diese Registerkarte durch Klicken auf die Benachrichtigung in den Vordergrund gerückt. Wenn die Seite noch nicht geöffnet ist, öffnet ein Benachrichtigungsklick die Seite in einer neuen Registerkarte.

Da fcm_options.link nicht unterstützen, wird empfohlen, allen fcm_options.link eine Benachrichtigungsnutzlast hinzuzufügen. Alternativ können Sie Benachrichtigungen mit dem Servicemitarbeiter bearbeiten.

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

Festlegen von Benachrichtigungsoptionen im Service Worker

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

Web v8

// 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.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/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();

Web v9

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

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

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

Web v8

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

Web v9

// TODO(snippet): This snippet is not yet translated to the @exp SDK

Best Practices für Benachrichtigungen

Wenn Sie mit Push-Messaging für das Web vertraut sind, haben Sie möglicherweise bereits die allgemeinen Richtlinien für eine gute Benachrichtigung gelesen. Für Entwickler, die Benachrichtigungen über FCM for Web senden, sind Präzision 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. In vielen Anwendungsfällen 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. Zum Beispiel vermittelt "Jimmy antwortete" genauere Informationen als "Neue Nachricht". Verwenden Sie diesen wertvollen Bereich nicht für Ihren Firmen- oder App-Namen - verwenden Sie dazu das Symbol.
  • Verwenden Sie den Titel oder Text der Benachrichtigung nicht, um den Namen oder die Domain Ihrer Website anzuzeigen. Benachrichtigungen enthalten bereits Ihren Domainnamen.
  • Fügen Sie fcm_options.link , um den Benutzer normalerweise wieder mit Ihrer Web-App zu verknüpfen und im Browser in den Fokus zu rücken. In seltenen Fällen, in denen alle Informationen, die Sie übermitteln müssen, in die Benachrichtigung passen, benötigen Sie möglicherweise keinen Link.