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ć onMessage zwrotnego, jednak w przypadkach, w tle może trzeba obsłużyć onBackgroundMessage lub skonfigurować powiadomienie wyświetlacza, aby umożliwić użytkownikowi przynieść swoją aplikację na pierwszym planie.

Stan aplikacji Notyfikacja Dane Obie
Pierwszoplanowy onMessage onMessage onMessage
Tło (pracownik serwisu) onBackgroundMessage (zgłoszenie wyświetlacz automatycznie pokazany) onBackgroundMessage onBackgroundMessage (zgłoszenie wyświetlacz automatycznie pokazany)

Kod JavaScript próbka quickstart pokazuje cały kod wymagany do odbierania wiadomości.

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

W celu otrzymania onMessage zdarzenie, Twoja aplikacja musi zdefiniować Messaging service worker Firebase w firebase-messaging-sw.js . Alternatywnie, można podać istniejący pracownikowi serwisu do SDK poprzez getToken(): Promise<string> .

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

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

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

Wersja internetowa 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

Dla powiadomień wysyłanych z serwera aplikacji, API FCM JavaScript obsługuje fcm_options.link klucz. 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 właściwe powiadomienia do wszystkich wiadomości danych. Alternatywnie możesz obsługiwać powiadomienia za pomocą pracownika serwisu.

O wyjaśnienie różnicy między powiadomień i 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:

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

Wersja internetowa 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/9.0.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.2/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, call onBackgroundMessage w firebase-messaging-sw.js . W tym przykładzie tworzymy powiadomienie z polami tytułu, treści i ikony.

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

Wersja internetowa 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 jesteś zaznajomiony z komunikatorów naciskać na internecie, można już przeczytać ogólne wytyczne dotyczące tego, co sprawia, że zgłoszenie dobre . 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 bardziej precyzyjne 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 , zazwyczaj połączyć plecy użytkownika do aplikacji internetowych i dostosowania go do skupienia 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.