Nachrichten in einem JavaScript-Client empfangen

Das Verhalten von Benachrichtigungen unterscheidet sich je nachdem, ob die Seite im Vordergrund (im Fokus) oder im Hintergrund ist, hinter anderen Tabs verborgen oder vollständig geschlossen ist. In allen Fällen muss die Seite den onMessage-Callback verarbeiten. Bei Hintergrundfällen müssen Sie möglicherweise auch onBackgroundMessage verarbeiten oder die Anzeigebenachrichtigung so konfigurieren, dass der Nutzer Ihre Webanwendung in den Vordergrund bringen kann.

Im JavaScript-Beispiel für die Kurzanleitung wird der gesamte Code zum Empfangen von Nachrichten veranschaulicht.

Nachrichten verarbeiten, wenn die Web-App im Vordergrund ausgeführt wird

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

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

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

Ihre App wird im Vordergrund ausgeführt, d. h. der Nutzer sieht sich gerade Ihr Web an. können Sie Daten und Benachrichtigungen der Nutzlasten direkt auf der Seite.

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

// 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, während Ihre Webanwendung im Hintergrund ausgeführt wird

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

Benachrichtigungsoptionen in der Sendeanfrage festlegen

Für Benachrichtigungsnachrichten, die vom App-Server gesendet werden, unterstützt die FCM-JavaScript API den Schlüssel fcm_options.link. Normalerweise wird dies auf eine Seite in Ihrer Webanwendung 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 einem Browsertab geöffnet ist, Wenn Sie auf die Benachrichtigung klicken, wird der Tab in den Vordergrund geleitet. Wenn die Seite noch nicht geöffnet ist, wird sie bei einem Klick auf eine Benachrichtigung in einem neuen .

Da Datennachrichten fcm_options.link nicht unterstützen, empfehlen wir, allen Datennachrichten eine Benachrichtigungsnutzlast hinzuzufügen. Alternativ können Sie mithilfe des Service Workers erhalten.

Eine Erklärung des Unterschieds zwischen Benachrichtigungen und Datennachrichten finden Sie unter Nachrichtentypen:

Benachrichtigungsoptionen im Service Worker festlegen

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

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

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

Zum Festlegen von Optionen rufen Sie onBackgroundMessage auf in firebase-messaging-sw.js In diesem Beispiel erstellen wir eine Benachrichtigung mit den Feldern „Titel“, „Text“ und „Symbol“.

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

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

Wenn Sie mit Push-Benachrichtigungen für das Web vertraut sind, haben Sie möglicherweise bereits die allgemeinen Richtlinien dazu, was eine gute Benachrichtigung ausmacht. Für Entwickler, die Benachrichtigungen über FCM für das Web senden, sind Präzision und Relevanz die wichtigsten Aspekte. Hier sind einige konkrete Empfehlungen, wie Sie Ihre Benachrichtigungen präzise und relevant halten können:

• Über das Symbolfeld können Sie ein aussagekräftiges Bild senden. In vielen Anwendungsfällen Das Logo sollte ein Firmen- 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 Titelfeld, um den genauen Inhalt der Nachricht anzugeben. Beispiel: „Jimmy hat geantwortet“ enthält genauere Informationen als „Neue Botschaft“. Nicht verwenden für den Namen Ihres Unternehmens oder Ihrer App. Verwenden Sie das Symbol für zu erreichen.
• Verwenden Sie zum Anzeigen des Namens Ihrer Website oder Domain; Benachrichtigungen enthalten bereits Ihren Domainnamen.
• Fügen Sie fcm_options.link hinzu, um Nutzer normalerweise wieder mit Ihrer Webanwendung zu verknüpfen und sie im Browser in den Fokus zu rücken. In seltenen Fällen, in denen alle erforderlichen Informationen in die Benachrichtigung passen, ist möglicherweise kein Link erforderlich.