Odbieranie wiadomości w kliencie JavaScript

Działanie wiadomości różni się w zależności od czy strona znajduje się na pierwszym planie (jest aktywna) czy w tle i jest ukryta. która znajduje się za innymi kartami lub jest całkowicie zamknięta. We wszystkich przypadkach strona musi obsługiwać onMessage ale w innych przypadkach może być konieczne onBackgroundMessage lub skonfigurować powiadomienie tak, aby użytkownik mógł przynosić aplikacji internetowej na pierwszym planie.

Przykładowy kod JavaScript zawiera cały kod wymagany do odbierania wiadomości.

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

Aby odbierać zdarzenie onMessage, aplikacja musi zdefiniować Skrypt usługi przesyłania wiadomości Firebase w: firebase-messaging-sw.js. Możesz też przekazać do pakietu SDK istniejący skrypt service worker 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 aplikacja jest na pierwszym planie (użytkownik przegląda stronę internetową), możesz otrzymywać dane i dane ładunku powiadomień 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 aplikacja internetowa działa w tle

Wszystkie wiadomości otrzymane, gdy aplikacja działa w tle, powodują wyświetlenie powiadomienia w przeglądarce. Możesz określić opcje dla tego powiadomienia, takich jak tytuł lub działanie kliknięcia, w żądaniu wysłania z serwera aplikacji lub użycie mechanizmu Service Worker w kliencie.

Ustawianie opcji powiadomień w żądaniu wysyłania

W przypadku powiadomień wysyłanych z serwera aplikacji interfejs FCM JavaScript API obsługuje 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 powoduje wyświetlenie tej karty na pierwszym planie. Jeśli strona nie jest jeszcze otwarta, po kliknięciu powiadomienia otworzy się ona w nowej karcie.

Wiadomości danych nie obsługują fcm_options.link, dlatego zalecamy dodanie do wszystkich wiadomości danych treści powiadomienia. Możesz także zająć się powiadomienia za pomocą skryptu service worker.

Wyjaśnienie różnicy między powiadomieniami a komunikatami dotyczącymi danych znajdziesz w sekcji Typy wiadomości.

Ustawianie opcji powiadomień w mechanizmie Service Worker

W przypadku wiadomości dotyczących danych możesz ustawić opcje powiadomień w mechanizmie Service Worker. Najpierw zainicjuj aplikację w skrypcie 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, zadzwoń pod numer onBackgroundMessage w aplikacji firebase-messaging-sw.js. W tym przykładzie tworzymy powiadomienie z polami tytułu, treści i ikon.

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

Sprawdzone metody dotyczące powiadomień

Jeśli znasz już funkcję przesyłania wiadomości push w internecie, możesz już ogólnych wskazówek na temat tego, jakie są dobre powiadomienia. Dla deweloperów, którzy wysyłają wiadomości powiadomień przez FCM w wersji internetowej. Najważniejsze kwestie, które należy wziąć pod uwagę to precyzja i trafność. Oto kilka konkretnych zaleceń dotyczących tego, jak dbać o to, aby powiadomienia były precyzyjne i trafne:

• Aby przesłać obraz, użyj pola ikony. W wielu przypadkach powinno to być logo firmy lub aplikacji, które użytkownicy rozpoznają od razu. W przypadku aplikacji do czatu może to być zdjęcie profilowe użytkownika.
• W polu tytułu określ dokładny charakter wiadomości. Na przykład wiadomość „Jimmy odpowiedział” zawiera bardziej precyzyjne informacje niż „Nowa wiadomość”. Nie używaj w tym miejscu cennym na nazwę firmy lub aplikacji – użyj ikony tego celu.
• Nie używaj tytułu ani treści powiadomienia, aby wyświetlać nazwę witryny lub domenę. Powiadomienia zawierają już nazwę Twojej domeny.
• Dodaj rozszerzenie fcm_options.link, zwykle aby połączyć użytkownika z Twoją aplikacją internetową i przyciągnąć i ustawia go w fokus w przeglądarce. W rzadkich przypadkach, gdy wszystkie informacje, których potrzebujesz, do przekazania może pasować do powiadomienia, link może nie być potrzebny.