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 zakładkami lub całkowicie zamknięta. We wszystkich przypadkach strona musi obsługiwać wywołanie zwrotne onMessage
, ale w przypadkach w tle może być również konieczna obsługa onBackgroundMessage
lub skonfigurowanie powiadomienia o wyświetlaniu, aby umożliwić użytkownikowi przeniesienie aplikacji internetowej na pierwszy plan.
Stan aplikacji | Powiadomienie | Dane | Obydwa |
---|---|---|---|
Pierwszoplanowy | onMessage | onMessage | onMessage |
Tło (pracownik serwisu) | onBackgroundMessage (powiadomienie wyświetla się automatycznie) | onBackgroundMessage | onBackgroundMessage (powiadomienie wyświetla się automatycznie) |
Przykładowy przewodnik szybkiego startu w języku JavaScript przedstawia cały kod wymagany do odbierania wiadomości.
Obsługuj wiadomości, gdy Twoja aplikacja internetowa jest na pierwszym planie
Aby otrzymać zdarzenie onMessage
, Twoja aplikacja musi zdefiniować pracownika usługi przesyłania wiadomości Firebase w firebase-messaging-sw.js
. Alternatywnie możesz udostępnić istniejący proces Service Worker do zestawu SDK za pomocą getToken(): Promise<string>
.
Web modular API
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 namespaced API
// 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();
Gdy Twoja aplikacja jest na pierwszym planie (użytkownik aktualnie przegląda Twoją stronę internetową), możesz odbierać dane i powiadomienia bezpośrednio na stronie.
Web modular API
// 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 namespaced API
// 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 akcja tytułu lub kliknięcia, w żądaniu wysłania z serwera aplikacji lub przy użyciu logiki Service Worker na kliencie.
Ustawianie opcji powiadomień w żądaniu wysłania
W przypadku powiadomień wysyłanych z serwera aplikacji interfejs API FCM JavaScript obsługuje klucz fcm_options.link
. Zwykle jest to ustawione na stronę 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 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 ładunku powiadomienia do wszystkich komunikatów danych. Alternatywnie możesz obsługiwać powiadomienia za pomocą pracownika serwisu.
Aby uzyskać wyjaśnienie różnicy między powiadomieniami a komunikatami z danymi, zobacz Typy komunikatów .
Ustawianie opcji powiadomień w service worker
W przypadku komunikatów danych można ustawić opcje powiadomień w usłudze Service Worker. Najpierw zainicjuj aplikację w Service Worker:
Web modular API
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 namespaced API
// 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();
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 modular API
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 namespaced API
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 wiadomościami push w Internecie, być może przeczytałeś już ogólne wytyczne dotyczące tego , co stanowi dobre powiadomienie . Dla programistów wysyłających powiadomienia za pośrednictwem FCM for Web najważniejsze kwestie to precyzja i trafność. Oto kilka konkretnych zaleceń dotyczących precyzji 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 czatu, może to być zdjęcie profilowe użytkownika wysyłającego.
- Użyj pola tytułu, aby dokładnie określić charakter wiadomości. Na przykład „Jimmy odpowiedział” zawiera dokładniejsze informacje niż „Nowa wiadomość”. Nie używaj tego cennego miejsca na nazwę swojej firmy lub aplikacji — użyj do tego celu ikony.
- Nie używaj tytułu ani treści powiadomienia do wyświetlania nazwy witryny lub domeny; powiadomienia zawierają już nazwę Twojej domeny.
- Dodaj
fcm_options.link
, zwykle aby połączyć użytkownika z powrotem do Twojej aplikacji internetowej i ustawić ją w centrum uwagi w przeglądarce. W rzadkich przypadkach, gdy wszystkie informacje, które chcesz przekazać, mieszczą się w powiadomieniu, link może nie być potrzebny.