Le comportement des messages diffère selon
que la page soit au premier plan (avec l'élément actif) ou en arrière-plan, masquée
derrière d'autres onglets, ou entièrement fermé. Dans tous les cas, la page doit gérer le rappel onMessage
, mais en arrière-plan, vous devrez peut-être également gérer onBackgroundMessage
ou configurer la notification d'affichage pour permettre à l'utilisateur de mettre votre application Web au premier plan.
État de l'application | Notification | Données | Les deux |
---|---|---|---|
Premier plan | onMessage |
onMessage |
onMessage |
Arrière-plan (service worker) | onBackgroundMessage (la notification s'affiche automatiquement) |
onBackgroundMessage |
onBackgroundMessage (la notification s'affiche automatiquement) |
L'exemple de démarrage rapide JavaScript présente tout le code nécessaire pour recevoir des messages.
Gérer les messages lorsque votre application Web est au premier plan
Pour recevoir l'événement onMessage
, votre application doit définir le
Service worker de messagerie Firebase dans firebase-messaging-sw.js
.
Vous pouvez également fournir un service worker existant au SDK via
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. 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();
Lorsque votre application est exécutée au premier plan (l'utilisateur consulte actuellement votre page ), vous pouvez recevoir des données et des notifications directement sur la page.
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); // ... });
Gérer les messages lorsque votre application Web est exécutée en arrière-plan
Tous les messages reçus lorsque l'application est exécutée en arrière-plan déclenchent un affichage dans le navigateur. Vous pouvez spécifier des options pour cette notification, telles que le titre ou l'action de clic, soit dans la demande d'envoi de votre serveur d'application, soit à l'aide de la logique du service worker sur le client.
Définir des options de notification dans la requête d'envoi
Pour les messages de notification envoyés depuis le serveur d'applications, le FCM
L'API JavaScript est compatible avec
fcm_options.link
. Il s'agit généralement d'une page de votre application Web :
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"
}
}
}
}
Si la valeur du lien pointe vers une page déjà ouverte dans un onglet du navigateur, un clic sur la notification met cet onglet au premier plan. Si la page n'est pas déjà ouverte, un clic sur la notification l'ouvre dans une nouvelle .
Étant donné que les messages de données ne sont pas compatibles avec fcm_options.link
, nous vous recommandons d'ajouter une charge utile de notification à tous les messages de données. Vous pouvez également gérer
via le service worker.
Pour obtenir une explication de la différence entre les messages de notification et les messages de données, voir Types de messages
Définir les options de notification dans le service worker
Pour les messages de données, vous pouvez définir les options de notification dans le service worker. Commencez par initialiser votre application dans le 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. 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();
Pour définir des options, appelez onBackgroundMessage
dans firebase-messaging-sw.js
.
Dans cet exemple, nous créons une notification avec les champs de titre, de corps et d'icône.
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); });
Bonnes pratiques concernant les notifications
Si vous connaissez les messages push pour le Web, vous avez peut-être déjà lu les consignes générales sur les caractéristiques d'une bonne notification. Pour les développeurs qui envoient des notifications via FCM pour le Web, les considérations les plus importantes sont la précision et la pertinence. Voici quelques recommandations spécifiques vos notifications précises et pertinentes:
- Utilisez le champ d'icône pour envoyer une image pertinente. Dans de nombreux cas d'utilisation, doit correspondre au logo d'une entreprise ou d'une application, que vos utilisateurs reconnaissent immédiatement. Pour une application de chat, il peut s'agir de la photo de profil de l'utilisateur qui envoie le message.
- Utilisez le champ de titre pour indiquer la nature précise du message. Par exemple, "Jimmy a répondu" fournit des informations plus précises que "Nouveau message". N'utilisez pas cet espace précieux pour le nom de votre entreprise ou de votre application. Utilisez plutôt l'icône à cette fin.
- N'utilisez pas le titre ni le corps de la notification pour afficher le nom ou le domaine de votre site Web. Les notifications contiennent déjà votre nom de domaine.
- Ajoutez
fcm_options.link
, généralement pour rediriger l'utilisateur vers votre application Web et la mettre au premier plan dans le navigateur. Dans de rares cas où toutes les informations dont vous avez besoin à transmettre peuvent être adaptées à la notification, vous n'aurez peut-être pas besoin d'un lien.