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.

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

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

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

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

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:

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

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.

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

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.