Odbieranie wiadomości w kliencie JavaScript

Zachowanie wiadomości różni się w zależności od tego, czy strona jest na pierwszym planie (jest aktywna), czy w tle, ukryta za innymi kartami lub całkowicie zamknięta. We wszystkich przypadkach strona musi obsługiwać wywołanie zwrotne onMessage , ale w przypadku działania w tle może być też konieczne obsłużenie onBackgroundMessage lub skonfigurowanie powiadomienia, aby umożliwić użytkownikowi przeniesienie aplikacji internetowej na pierwszy plan.

Stan aplikacji	Powiadomienie	Dane	Oba rodzaje
Pierwszy plan	onMessage	onMessage	onMessage
Tło (service worker)	onBackgroundMessage (powiadomienie wyświetlane automatycznie)	onBackgroundMessage	onBackgroundMessage (powiadomienie wyświetlane automatycznie)

Przykładowy kod krótkiego wprowadzenia w JavaScript pokazuje cały kod potrzebny do odbierania wiadomości.

Ważne: w tym przewodniku znajdziesz informacje o inicjowaniu Firebase w procesie roboczym usługi. Aby używać modułowego pakietu SDK w procesie roboczym usługi, musisz połączyć plik procesu roboczego usługi, ponieważ moduły ES są stosunkowo nowe i nie są powszechnie obsługiwane (patrz Moduły ES w procesach roboczych usługi). Jeśli nie chcesz łączyć pliku service worker, możesz użyć interfejsu API z przestrzenią nazw udostępnianego przez pakiety zgodności. Więcej informacji o tym, jak używać narzędzi do łączenia modułów z Firebase, znajdziesz w artykule Używanie narzędzi do łączenia modułów z Firebase.

Obsługa wiadomości, gdy aplikacja internetowa działa na pierwszym planie

Aby otrzymywać zdarzenie onMessage, aplikacja musi zdefiniować w pliku firebase-messaging-sw.js usługę Firebase Messaging Worker. Możesz też przekazać do pakietu SDK istniejący moduł service worker za pomocą funkcji getToken(): Promise<string>.

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

Gdy aplikacja jest na pierwszym planie (użytkownik aktualnie wyświetla Twoją stronę internetową), możesz otrzymywać dane i ładunki powiadomień bezpośrednio na stronie.

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

Obsługa wiadomości, gdy aplikacja internetowa działa w tle

Wszystkie wiadomości otrzymane, gdy aplikacja działa w tle, wywołują wyświetlenie powiadomienia w przeglądarce. Opcje tego powiadomienia, takie jak tytuł czy działanie po kliknięciu, możesz określić w żądaniu wysyłanym z serwera aplikacji lub za pomocą logiki service worker na kliencie.

Działania związane z kliknięciem obsługują tylko bezpieczne adresy URL HTTPS.

Ustawianie opcji powiadomień w prośbie o wysłanie

W przypadku wiadomości z powiadomieniami wysyłanych z serwera aplikacji interfejs FCMJavaScript API obsługuje klucz fcm_options.link. Zwykle jest to strona w aplikacji internetowej:

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"
      }
    }
  }
}

Jeśli wartość linku wskazuje stronę, która jest już otwarta w karcie przeglądarki, kliknięcie powiadomienia spowoduje przeniesienie tej karty na pierwszy plan. Jeśli strona nie jest jeszcze otwarta, kliknięcie powiadomienia spowoduje otwarcie jej w nowej karcie.

Wiadomości z danymi nie obsługują fcm_options.link, dlatego zalecamy dodawanie do nich ładunku powiadomienia. Możesz też obsługiwać powiadomienia za pomocą komponentu service worker.

Wyjaśnienie różnicy między powiadomieniami a wiadomościami z danymi znajdziesz w artykule Typy wiadomości.

Uwaga: aby wysyłać wiadomości do tematów, użyj pakietu Admin SDK do subskrybowania instancji aplikacji w tematach. Aby używać interfejsu Admin FCM API, musisz najpierw wykonać czynności opisane w sekcji Dodawanie pakietu Firebase Admin SDK do serwera, aby zainicjować pakiet SDK.

Ustawianie opcji powiadomień w usłudze Service Worker

W przypadku wiadomości z danymi możesz ustawić opcje powiadomień w usłudze Service Worker. Najpierw zainicjuj aplikację w usłudze 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

Aby ustawić opcje, zadzwoń pod numer onBackgroundMessage w firebase-messaging-sw.js. W tym przykładzie tworzymy powiadomienie z polami tytułu, treści i ikony.

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

Uwaga: jeśli chcesz zdefiniować niestandardowe działanie w usłudze Service Worker, gdy użytkownik kliknie powiadomienie, przed zaimportowaniem funkcji lub bibliotek obsłuż zdarzenie notificationclick.FCM W przeciwnym razie FCMmoże zastąpić zachowanie niestandardowe

.

Sprawdzone metody dotyczące powiadomień

Jeśli znasz powiadomienia push w internecie, być może znasz już ogólne wytyczne dotyczące dobrych powiadomień. W przypadku deweloperów wysyłających powiadomienia za pomocą FCM dla internetu najważniejsze są precyzja i trafność. Oto kilka konkretnych zaleceń, które pomogą Ci zachować precyzyjność i trafność powiadomień:

• Użyj pola ikony, aby wysłać obraz, który ma znaczenie. W wielu przypadkach powinno to być logo firmy lub aplikacji, które użytkownicy od razu rozpoznają. W przypadku aplikacji do czatowania może to być zdjęcie profilowe użytkownika, który wysłał wiadomość.
• W polu tytułu podaj dokładny charakter wiadomości. Na przykład „Jimmy odpowiedział” przekazuje bardziej precyzyjne informacje niż „Nowa wiadomość”. Nie używaj tej cennej przestrzeni na nazwę firmy lub aplikacji – w tym celu użyj ikony.
• Nie używaj tytułu ani treści powiadomienia do wyświetlania nazwy witryny lub domeny, ponieważ powiadomienia już zawierają nazwę domeny.
• Dodaj fcm_options.link, zwykle aby przekierować użytkownika z powrotem do aplikacji internetowej i wyświetlić ją w przeglądarce. W rzadkich przypadkach, gdy wszystkie informacje, które chcesz przekazać, mieszczą się w powiadomieniu, link może nie być potrzebny.