Odbieranie wiadomości w aplikacjach internetowych

Wybierz platformę: iOS+ Android Web Flutter Unity C++


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 kartami lub całkowicie zamknięta. We wszystkich przypadkach strona musi obsługiwać wywołanie zwrotne onMessage, ale w przypadku działania w tle może być konieczne obsłużenie wywołania onBackgroundMessage lub skonfigurowanie powiadomienia, aby umożliwić użytkownikowi przeniesienie aplikacji internetowej na pierwszy plan.

Stan aplikacji Powiadomienie Dane Oba rodzaje
Pierwszy plan onMessage onMessage onMessage
W tle (skrypt service worker) onBackgroundMessage (powiadomienie wyświetlane automatycznie) onBackgroundMessage onBackgroundMessage (powiadomienie wyświetlane automatycznie)

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

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

Aby otrzymywać zdarzenie onMessage, aplikacja musi definiować skrypt service worker do obsługi wiadomości Firebase w pliku firebase-messaging-sw.js. Możesz też przekazać do pakietu SDK istniejący skrypt service worker za pomocą metody getToken(): Promise<string>.

Web

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

// 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.
// Replace 13.0.0 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/13.0.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/13.0.0/firebase-messaging-compat.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 aplikacja działa na pierwszym planie (użytkownik wyświetla Twoją stronę internetową), możesz otrzymywać dane i ładunki powiadomień bezpośrednio na stronie.

Web

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

// 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ługa 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 tego powiadomienia, takie jak tytuł lub działanie po kliknięciu, w żądaniu wysłania z serwera aplikacji lub za pomocą logiki skryptu service worker na kliencie.

Ustawianie opcji powiadomień w żądaniu wysłania

W przypadku powiadomień wysyłanych z serwera aplikacji interfejs JavaScript API obsługuje klucz fcm_options.link FCM. 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": {
        ,
        "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 spowoduje wyświetlenie tej karty na pierwszym planie. Jeśli strona nie jest jeszcze otwarta, kliknięcie powiadomienia otworzy ją w nowej karcie.

Ponieważ wiadomości z danymi nie obsługują fcm_options.link, zalecamy dodanie do wszystkich wiadomości z danymi ładunku powiadomienia. Możesz też obsługiwać powiadomienia za pomocą skryptu service worker.

Wyjaśnienie różnic między powiadomieniami a wiadomościami z danymi znajdziesz w artykule Typy wiadomości.

Ustawianie opcji powiadomień w skrypcie service worker

W przypadku wiadomości z danymi możesz ustawić opcje powiadomień w skrypcie service worker. Najpierw zainicjuj aplikację w skrypcie service worker:

Web

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

// 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.
// Replace 13.0.0 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/13.0.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/13.0.0/firebase-messaging-compat.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

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

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

Sprawdzone metody dotyczące powiadomień

Dla deweloperów wysyłających powiadomienia przez FCM w internecie najważniejsze są precyzja i trafność. Oto kilka konkretnych zaleceń, które pomogą Ci zadbać o to, aby powiadomienia były precyzyjne i trafne:

  • Użyj pola ikony, aby wysłać odpowiedni obraz. W wielu przypadkach powinno to być logo firmy lub aplikacji, które użytkownicy natychmiast rozpoznają. W przypadku aplikacji do czatu może to być zdjęcie profilowe użytkownika, który wysyła wiadomość.
  • Użyj pola tytułu, aby dokładnie określić charakter wiadomości. Na przykład „Jimmy odpowiedział” przekazuje bardziej precyzyjne informacje niż „Nowa wiadomość”. Nie używaj tego cennego miejsca na nazwę firmy lub aplikacji – do tego celu służy ikona.
  • Nie używaj tytułu ani treści powiadomienia do wyświetlania nazwy lub domeny witryny. Powiadomienia zawierają już nazwę domeny.
  • Dodaj fcm_options.link, zwykle po to, aby przekierować użytkownika z powrotem do aplikacji internetowej i wyświetlić ją w przeglądarce. W rzadkich przypadkach, gdy wszystkie informacje, które chcesz przekazać, mieszczą się w powiadomieniu, link może nie być potrzebny.