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 (ma fokus), czy w tle, ukryta za innymi kartami lub całkowicie zamknięta. W każdym przypadku strona musi obsługiwać wywołanie zwrotne onMessage , ale w przypadku działania w tle może być też konieczne obsłużenie 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
Tło (skrypt service worker) onBackgroundMessage (powiadomienie wyświetlane automatycznie) onBackgroundMessage onBackgroundMessage (powiadomienie wyświetlane automatycznie)

Przykładowy kod JavaScript szybkiego startu pokazuje cały kod wymagany do odbierania wiadomości.

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

Aby otrzymywać zdarzenie onMessage, aplikacja musi zdefiniować skrypt service worker Firebase Messaging w pliku firebase-messaging-sw.js. Możesz też przekazać do pakietu SDK istniejącego skryptu service worker za pomocą 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);
messaging_init_in_sw.js

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

Gdy aplikacja jest 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);
  // ...
});
messaging_receive_message.js

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);
  // ...
});
index.js

Obsługa wiadomości, gdy aplikacja internetowa jest w tle

Wszystkie wiadomości otrzymane, gdy aplikacja działa w tle, wywołują powiadomienie w przeglądarce. Opcje tego powiadomienia, takie jak tytuł czy działanie po kliknięciu, możesz określić w żądaniu wysyłanym z serwera aplikacji lub za pomocą logiki skryptu service worker na kliencie.

Ustawianie opcji powiadomień w żądaniu wysyłania

W przypadku wiadomości z powiadomieniami wysyłanych z serwera aplikacji interfejs FCM JavaScript API obsługuje fcm_options.link klucz. Zwykle jest on ustawiony na stronę 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 w karcie przeglądarki, kliknięcie powiadomienia spowoduje przeniesienie tej karty na pierwszy plan. Jeśli strona nie jest jeszcze otwarta, kliknięcie powiadomienia spowoduje otwarcie jej w nowej karcie.

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

Wyjaśnienie różnicy między wiadomościami z 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);
messaging_init_in_sw.js

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

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);
});
messaging_on_background_message.js

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);
});
service-worker.js

Sprawdzone metody dotyczące powiadomień

W przypadku deweloperów wysyłających powiadomienia za pomocą FCM dla internetu najważniejsze są precyzja i trafność. Oto kilka konkretnych zaleceń, które pomogą Ci zachować precyzję i trafność 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 od razu rozpoznają. W przypadku aplikacji do czatowania może to być zdjęcie profilowe użytkownika wysyłającego.
  • Użyj pola tytułu, aby wyrazić dokładny charakter wiadomości. Na przykład „Jimmy odpowiedział” przekazuje dokładniejsze informacje niż „Nowa wiadomość”. Nie używaj tego cennego miejsca na nazwę firmy ani aplikacji – w tym celu użyj ikony.
  • Nie używaj tytułu ani treści powiadomienia do wyświetlania nazwy lub domeny witryny. Powiadomienia już zawierają nazwę domeny.
  • Dodaj fcm_options.link, aby zwykle przekierować użytkownika z powrotem do aplikacji internetowej i przenieść ją na pierwszy plan w przeglądarce. W rzadkich przypadkach, gdy wszystkie informacje, które chcesz przekazać, mieszczą się w powiadomieniu, link może nie być potrzebny.