Nachrichten in Web-Apps empfangen

Plattform auswählen :

iOS+ Android Web Flutter Unity C++

Das Verhalten von Nachrichten hängt davon ab, ob sich die Seite im Vordergrund befindet (fokussiert ist) oder im Hintergrund, hinter anderen Tabs verborgen oder vollständig geschlossen ist. In allen Fällen muss die Seite den onMessage -Callback verarbeiten. Im Hintergrund müssen Sie möglicherweise auch onBackgroundMessage verarbeiten oder die Benachrichtigungsanzeige so konfigurieren, dass der Nutzer Ihre Web-App in den Vordergrund holen kann.

App-Status	Benachrichtigung	Daten	Beides
Vordergrund	`onMessage`	`onMessage`	`onMessage`
Hintergrund (Service Worker)	`onBackgroundMessage` (Benachrichtigung wird automatisch angezeigt)	`onBackgroundMessage`	`onBackgroundMessage` (Benachrichtigung wird automatisch angezeigt)

Im JavaScript-Schnellstart beispiel wird der gesamte Code gezeigt, der zum Empfangen von Nachrichten erforderlich ist.

Nachrichten verarbeiten, wenn sich Ihre Web-App im Vordergrund befindet

Damit das onMessage-Ereignis empfangen werden kann, muss Ihre App den Firebase-Messaging-Service Worker in firebase-messaging-sw.js definieren. Alternativ können Sie dem SDK über getToken(): Promise<string> einen vorhandenen Service Worker zur Verfügung stellen.

Web

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);messaging_init_in_sw.js

Web

// 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.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.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();service-worker.js

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

Web

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

Web

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

Nachrichten verarbeiten, wenn sich Ihre Web-App im Hintergrund befindet

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

Benachrichtigungsoptionen in der Sendeanfrage festlegen

Für Benachrichtigungen, die vom App-Server gesendet werden, unterstützt die FCM JavaScript API den fcm_options.link Schlüssel. In der Regel ist dieser 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": {
        ,
        "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 einem Browsertab geöffnet ist, wird dieser Tab durch Klicken auf die Benachrichtigung in den Vordergrund geholt. Wenn die Seite noch nicht geöffnet ist, wird sie durch Klicken auf die Benachrichtigung in einem neuen Tab geöffnet.

Da Datennachrichten fcm_options.link nicht unterstützen, sollten Sie allen Datennachrichten eine Benachrichtigungsnutzlast hinzufügen. Alternativ können Sie Benachrichtigungen mit dem Service Worker verarbeiten.

Eine Erklärung des Unterschieds zwischen Benachrichtigungs- und Datennachrichten finden Sie unter Nachrichtentypen.

Benachrichtigungsoptionen im Service Worker festlegen

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

Web

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);messaging_init_in_sw.js

Web

// 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.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.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();service-worker.js

Wenn Sie Optionen festlegen möchten, rufen Sie onBackgroundMessage in firebase-messaging-sw.js auf. In diesem Beispiel erstellen wir eine Benachrichtigung mit den Feldern „Titel“, „Text“ und „Symbol“.

Web

import { getMessaging } from "firebase/messaging/sw";
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);
});messaging_on_background_message.js

Web

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);
});service-worker.js

Best Practices für Benachrichtigungen

Für Entwickler, die Benachrichtigungen über FCM für das Web senden, sind Genauigkeit und Relevanz die wichtigsten Aspekte. Hier sind einige konkrete Empfehlungen, wie Sie Ihre Benachrichtigungen präzise und relevant gestalten können:

Verwenden Sie das Feld „Symbol“, um ein aussagekräftiges Bild zu senden. In vielen Fällen sollte dies ein Unternehmens- oder App-Logo sein, das Ihre Nutzer sofort erkennen. Bei einer Chat-App kann es sich auch um das Profilbild des sendenden Nutzers handeln.
Verwenden Sie das Feld „Titel“, um die genaue Art der Nachricht anzugeben. Beispielsweise vermittelt „Jimmy hat geantwortet“ genauere Informationen als „Neue Nachricht“. Verwenden Sie diesen wertvollen Platz nicht für den Namen Ihres Unternehmens oder Ihrer App, sondern verwenden Sie das Symbol.
Verwenden Sie den Benachrichtigungstitel oder ‑text nicht, um den Namen oder die Domain Ihrer Website anzuzeigen. Benachrichtigungen enthalten bereits Ihren Domainnamen.
Fügen Sie fcm_options.link hinzu, um den Nutzer in der Regel zurück zu Ihrer Web-App zu leiten und sie im Browser in den Vordergrund zu holen. In seltenen Fällen, in denen alle Informationen, die Sie vermitteln müssen, in die Benachrichtigung passen, ist möglicherweise kein Link erforderlich.