Odbieraj wiadomości w kliencie JavaScript

Zachowanie wiadomości różni się w zależności od tego, czy strona jest na pierwszym planie (ma fokus), czy w tle, ukryta za innymi zakładkami lub całkowicie zamknięta. We wszystkich przypadkach strona musi obsługiwać wywołanie zwrotne onMessage , ale w przypadkach w tle może zajść potrzeba obsługi onBackgroundMessage lub skonfigurowania powiadomienia wyświetlania, aby umożliwić użytkownikowi przeniesienie aplikacji internetowej na pierwszy plan.

Stan aplikacji Powiadomienie Dane Obie
Pierwszoplanowy onMessage onMessage onMessage
Tło (pracownik usług) onBackgroundMessage (powiadomienie wyświetlane automatycznie) onBackgroundMessage onBackgroundMessage (powiadomienie wyświetlane automatycznie)

Przykład szybkiego startu JavaScript pokazuje cały kod wymagany do odbierania wiadomości.

Obsługa wiadomości, gdy Twoja aplikacja internetowa jest na pierwszym planie

Aby odbierać zdarzenie onMessage , Twoja aplikacja musi zdefiniować pracownika usługi wiadomości Firebase w firebase-messaging-sw.js . Alternatywnie możesz podać istniejący proces roboczy usługi do zestawu SDK za pomocą getToken(): Promise<string> .

Web version 9

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

Web version 8

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

Gdy Twoja aplikacja jest na pierwszym planie (użytkownik aktualnie przegląda Twoją stronę internetową), możesz otrzymywać dane i powiadomienia bezpośrednio na stronie.

Web version 9

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

Web version 8

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

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

Wszystkie wiadomości odebrane, gdy aplikacja działa w tle, powodują wyświetlenie powiadomienia w przeglądarce. Możesz określić opcje tego powiadomienia, takie jak tytuł lub akcja kliknięcia, w żądaniu wysyłania z serwera aplikacji lub przy użyciu logiki procesu roboczego usługi na kliencie.

Ustawianie opcji powiadomień w żądaniu wysłania

W przypadku komunikatów powiadomień wysyłanych z serwera aplikacji interfejs API JavaScript FCM obsługuje klucz fcm_options.link . Zazwyczaj jest to strona w Twojej 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 na stronę, która jest już otwarta na karcie przeglądarki, kliknięcie powiadomienia przenosi tę kartę na pierwszy plan. Jeśli strona nie jest jeszcze otwarta, kliknięcie powiadomienia otwiera stronę w nowej karcie.

Ponieważ komunikaty danych nie obsługują fcm_options.link , zaleca się dodanie ładunku powiadomienia do wszystkich komunikatów danych. Alternatywnie możesz obsługiwać powiadomienia za pomocą pracownika serwisu.

Aby uzyskać wyjaśnienie różnicy między powiadomieniami a wiadomościami dotyczącymi danych, zobacz Typy wiadomości .

Ustawianie opcji powiadomień w serwisie pracownika

W przypadku wiadomości z danymi można ustawić opcje powiadomień w pracowniku serwisu. Najpierw zainicjuj swoją aplikację w Service Worker:

Web version 9

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

Web version 8

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

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

Web version 9

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

Web version 8

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

Najlepsze praktyki dotyczące powiadomień

Jeśli znasz się na wiadomościach push w internecie, być może znasz już ogólne wytyczne dotyczące tego, co stanowi dobre powiadomienie . Dla programistów wysyłających powiadomienia za pośrednictwem FCM for Web najważniejszymi kwestiami są precyzja i trafność. Oto kilka konkretnych zaleceń dotyczących dokładności i trafności powiadomień:

  • Użyj pola ikony, aby wysłać znaczący obraz. W wielu przypadkach powinno to być logo firmy lub aplikacji, które użytkownicy natychmiast rozpoznają. Lub, w przypadku aplikacji do czatu, może to być obraz profilu wysyłającego użytkownika.
  • Użyj pola tytułu, aby dokładnie określić charakter wiadomości. Na przykład „Jimmy odpowiedział” zawiera dokładniejsze informacje niż „Nowa wiadomość”. Nie używaj tego cennego miejsca na nazwę firmy lub aplikacji — użyj w tym celu ikony.
  • Nie używaj tytułu ani treści powiadomienia do wyświetlania nazwy lub domeny witryny; powiadomienia zawierają już nazwę Twojej domeny.
  • Dodaj fcm_options.link , zwykle po to, aby połączyć użytkownika z powrotem do Twojej aplikacji internetowej i skupić się na niej w przeglądarce. W rzadkich przypadkach, gdy wszystkie informacje, które chcesz przekazać, mogą zmieścić się w powiadomieniu, łącze może nie być potrzebne.