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)

Das JavaScript-Kurzanleitungs beispiel enthält den gesamten Code, der zum Empfangen von Nachrichten erforderlich ist.

Wichtig: In dieser Anleitung wird die Initialisierung von Firebase in einem Service Worker erwähnt. Wenn Sie das modulare SDK in einem Service Worker verwenden möchten, müssen Sie die Service Worker-Datei bündeln, da ES-Module relativ neu sind und nicht weit verbreitet sind (siehe ES-Module in Service Workern). Wenn Sie die Service Worker-Datei nicht bündeln möchten, können Sie die Namespaces-API verwenden, die von den Compat-Paketen bereitgestellt wird. Informationen zur Verwendung von Modulbündlern mit Firebase finden Sie unter Modulbündler mit Firebase verwenden.

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.

**Achtung**: Klickaktionen unterstützen nur sichere HTTPS-URLs.

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 Benachrichtigungen und Datennachrichten finden Sie unter Nachrichtentypen.

Hinweis: Wenn Sie Nachrichten an Themen senden möchten, verwenden Sie das Admin SDK, um App-Instanzen für Themen zu abonnieren. Wenn Sie die Admin FCM API verwenden möchten, müssen Sie zuerst die Schritte unter Das Firebase Admin SDK zum Server hinzufügen ausführen, um das SDK zu initialisieren.

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

Hinweis: Wenn Sie im Service Worker ein benutzerdefiniertes Verhalten definieren möchten, das ausgeführt wird, wenn auf die Benachrichtigung geklickt wird, müssen Sie notificationclick verarbeiten, bevor Sie FCM Funktionen oder ‑Bibliotheken importieren. Andernfalls überschreibt FCM möglicherweise das benutzerdefinierte Verhalten.

Best Practices für Benachrichtigungen

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

• Verwenden Sie das Feld „Symbol“, um ein aussagekräftiges Bild zu senden. In vielen Anwendungsfällen sollte dies ein Unternehmens- oder App-Logo sein, das Ihre Nutzer sofort erkennen. Bei einer Chat-Anwendung kann es sich auch um das Profilbild des sendenden Nutzers handeln.
• Verwenden Sie das Feld „Titel“, um den genauen Inhalt der Nachricht auszudrücken. „Jimmy hat geantwortet“ vermittelt beispielsweise genauere Informationen als „Neue Nachricht“. Verwenden Sie diesen wertvollen Platz nicht für den Namen Ihres Unternehmens oder Ihrer App, sondern 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öchten, in die Benachrichtigung passen, ist möglicherweise kein Link erforderlich.