Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Recevoir des messages dans un client JavaScript

Le comportement des messages diffère selon que la page est au premier plan (a le focus), ou en arrière-plan, cachée derrière d'autres onglets, ou complètement fermée. Dans tous les cas , la page doit gérer le onMessage rappel, mais dans les cas de fond vous pouvez aussi avoir besoin de gérer onBackgroundMessage ou configurer la notification d'affichage pour permettre à l'utilisateur d'apporter votre application web au premier plan.

État de l'application Notification Données Les deux
Premier plan onMessage onMessage onMessage
Expérience (employé de service) onBackgroundMessage (notification d'affichage affiche automatiquement) onBackgroundMessage onBackgroundMessage (notification d'affichage affiche automatiquement)

Le JavaScript exemple de démarrage rapide montre tout le code nécessaire pour recevoir des messages.

Gérer les messages lorsque votre application Web est au premier plan

Pour recevoir le onMessage événement, votre application doit définir le travailleur des services de messagerie Firebase dans firebase-messaging-sw.js . Vous pouvez fournir un agent de service existant au SDK par getToken(): Promise<string> .

Web version 9

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 version 8

// 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.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/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 au premier plan (l'utilisateur consulte actuellement votre page Web), vous pouvez recevoir des données et des charges utiles de notification directement dans la page.

Web version 9

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

// 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 en arrière-plan

Tous les messages reçus lorsque l'application est en arrière-plan déclenchent une notification d'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'applications, soit en utilisant la logique du service worker sur le client.

Définition des options de notification dans la demande d'envoi

Pour les messages de notification envoyés par le serveur d'applications, l'API JavaScript FCM soutient la fcm_options.link clé. Généralement, cela est défini sur 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 fait passer cet onglet au premier plan. Si la page n'est pas déjà ouverte, un clic de notification ouvre la page dans un nouvel onglet.

Étant donné que les messages de données ne prennent pas en charge fcm_options.link , nous vous recommandons d'ajouter une charge utile de notification à tous les messages de données. Vous pouvez également gérer les notifications à l'aide du service worker.

Pour une explication de la différence entre les messages de notification et de données, voir Types de messages .

Définition des options de notification dans le service worker

Pour les messages de données, vous pouvez définir des options de notification dans le service worker. Tout d'abord, initialisez votre application dans le service worker :

Web version 9

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 version 8

// 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.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/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 les options, appel onBackgroundMessage dans firebase-messaging-sw.js . Dans cet exemple, nous créons une notification avec les champs titre, corps et icône.

Web version 9

import { getMessaging } from "firebase/messaging";
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 version 8

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 pour les notifications

Si vous êtes familier avec la messagerie push pour le web, vous pouvez avoir déjà lu les grandes lignes directrices pour ce qui fait 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 pour que vos notifications restent précises et pertinentes :

  • Utilisez le champ d'icône pour envoyer une image significative. Pour de nombreux cas d'utilisation, il doit s'agir d'un logo d'entreprise ou d'application que vos utilisateurs reconnaissent immédiatement. Ou, pour une application de chat, il peut s'agir de l'image de profil de l'utilisateur expéditeur.
  • Utilisez le champ titre pour exprimer la nature précise du message. Par exemple, "Jimmy a répondu" transmet 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 l'icône à cette fin.
  • N'utilisez pas le titre ou 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.
  • Ajouter fcm_options.link , généralement pour relier le dos de l' utilisateur à votre application web et la mettre au point dans le navigateur. Dans de rares cas où toutes les informations que vous devez transmettre peuvent tenir dans la notification, vous n'aurez peut-être pas besoin d'un lien.