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.

Krótkie wprowadzenie do JavaScriptu pokazuje cały kod wymagany do odbierania wiadomości.

Obsługuj wiadomości, gdy aplikacja internetowa działa 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 działa na pierwszym planie (użytkownik przegląda obecnie Twoją witrynę) stronę), możesz otrzymywać 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 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 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 wysłania

W przypadku powiadomień wysyłanych z serwera aplikacji 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, kliknięcie powiadomienia spowoduje otwarcie strony w nowym .

Wiadomości z danymi nie obsługują funkcji fcm_options.link, dlatego zalecamy dodaj ładunek powiadomień do wszystkich wiadomości. 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 o powiadomieniach przesyłanych przez FCM na potrzeby witryn. Najważniejsze kwestie, to precyzja i trafność. Oto kilka konkretnych zaleceń, jak zachować dokładne i trafne powiadomienia:

• Użyj pola ikony, aby przesłać odpowiedni obraz. W wielu przypadkach powinno być logo firmy lub aplikacji, które użytkownicy będą od razu rozpoznawać. lub aplikacji do obsługi czatu, może to być zdjęcie profilowe użytkownika wysyłającego wiadomość.
• W polu tytułu określ dokładny charakter wiadomości. Przykład: „Jimmy odpowiedział” przekazują dokładniejsze informacje niż „Nowy przekaz”. Nie używaj w tym miejscu na nazwę firmy lub aplikacji – użyj ikony tego celu.
• Nie używaj tytułu ani treści powiadomienia do wyświetlania nazwy witryny lub domena; 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.