Odbieraj 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 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 być również konieczna obsługa onBackgroundMessage lub skonfigurowanie powiadomienia o wyświetlaniu, aby umożliwić użytkownikowi przeniesienie aplikacji internetowej na pierwszy plan.

Stan aplikacji Powiadomienie Dane Obydwa
Pierwszoplanowy onMessage onMessage onMessage
Tło (pracownik serwisu) onBackgroundMessage (powiadomienie wyświetla się automatycznie) onBackgroundMessage onBackgroundMessage (powiadomienie wyświetla się automatycznie)

Przykładowy przewodnik szybkiego startu w języku JavaScript przedstawia cały kod wymagany do odbierania wiadomości.

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

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

Web modular API

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 namespaced API

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

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

Web modular API

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

// 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 akcja tytułu lub kliknięcia, w żądaniu wysłania z serwera aplikacji lub przy użyciu logiki Service Worker na kliencie.

Ustawianie opcji powiadomień w żądaniu wysłania

W przypadku powiadomień wysyłanych z serwera aplikacji interfejs API FCM JavaScript obsługuje klucz fcm_options.link . Zwykle jest to ustawione na stronę 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 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 komunikatami z danymi, zobacz Typy komunikatów .

Ustawianie opcji powiadomień w service worker

W przypadku komunikatów danych można ustawić opcje powiadomień w usłudze Service Worker. Najpierw zainicjuj aplikację w Service Worker:

Web modular API

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 namespaced API

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

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 modular API

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

Web namespaced API

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 jesteś zaznajomiony z wiadomościami push w Internecie, być może przeczytałeś 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żniejsze kwestie to precyzja i trafność. Oto kilka konkretnych zaleceń dotyczących precyzji 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 czatu, może to być zdjęcie profilowe użytkownika wysyłającego.
  • 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ę swojej firmy lub aplikacji — użyj do tego celu ikony.
  • Nie używaj tytułu ani treści powiadomienia do wyświetlania nazwy witryny lub domeny; powiadomienia zawierają już nazwę Twojej domeny.
  • Dodaj fcm_options.link , zwykle aby połączyć użytkownika z powrotem do Twojej aplikacji internetowej i ustawić ją w centrum uwagi w przeglądarce. W rzadkich przypadkach, gdy wszystkie informacje, które chcesz przekazać, mieszczą się w powiadomieniu, link może nie być potrzebny.