Premiers pas avec Firebase Cloud Messaging dans les applications Web

Sélectionnez une plate-forme : iOS+ Android Web Flutter Unity C++


Ce guide explique comment utiliser Firebase Cloud Messaging dans vos applications clientes Web pour envoyer des messages de manière fiable.

L'API JavaScript FCM vous permet de recevoir des messages de notification dans les applications Web exécutées dans des navigateurs compatibles avec l'API Push. Cela inclut les versions de navigateur listées dans cette matrice de compatibilité et les extensions Chrome utilisant l'API Push.

Le SDK FCM n'est compatible qu'avec les pages diffusées via HTTPS. Cela est dû à l'utilisation de service workers, qui ne sont disponibles que sur les sites HTTPS. Si vous avez besoin d'un fournisseur, nous vous recommandons Firebase App Hosting, qui propose un niveau sans frais pour l'hébergement HTTPS sur votre propre domaine.

Pour commencer à utiliser l'API JavaScript FCM, vous devez ajouter Firebase à votre application Web et ajouter une logique pour accéder aux ID d'installation Firebase, qui vous permettent de désigner le destinataire de vos notifications.

Ajouter et initialiser le SDK FCM

  1. Si ce n'est pas déjà fait, installez le SDK JS Firebase et initialisez Firebase.

  2. Ajoutez le SDK JS Firebase Cloud Messaging et initialisez Firebase Cloud Messaging :

Web 

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

Si vous utilisez FCM pour le Web et que vous souhaitez passer au SDK 6.7.0 ou version ultérieure, vous devez activer l'API FCM Registration pour votre projet dans la console Google Cloud. Lorsque vous activez l'API, assurez-vous d'être connecté à la console Google Cloud avec le même compte Google que celui que vous utilisez pour Firebase, et veillez à sélectionner le bon projet. Les nouveaux projets ajoutant le SDK FCM ont cette API activée par défaut.

Configurer les identifiants Web avec FCM

L'interface Web FCM utilise des identifiants Web appelés "Voluntary Application Server Identification" (VAPID) pour autoriser l'envoi de requêtes aux services Web Push compatibles. Pour abonner votre application aux notifications push, vous devez associer une paire de clés à votre projet Firebase. Vous pouvez générer une nouvelle paire de clés ou importer votre paire de clés existante via la console Firebase.

Générer une nouvelle paire de clés

  1. Dans la console Firebase, accédez à Paramètres > Général. Cliquez ensuite sur l'onglet Cloud Messaging.

  2. Accédez à la section Configuration Web.

  3. Dans l'onglet Certificats Web Push, cliquez sur Générer une paire de clés.

    La console affiche un message indiquant que la paire de clés a été générée, ainsi que la chaîne de la clé publique et la date d'ajout.

Importer une paire de clés existante

Si vous disposez d'une paire de clés que vous utilisez déjà avec votre application Web, vous pouvez l'importer dans FCM afin de pouvoir accéder à vos instances d'application Web existantes via les API FCM. Pour importer des clés, vous devez disposer d'un accès de niveau propriétaire au projet Firebase. Importez votre clé publique et votre clé privée existantes au format encodé en base64 URL-safe :

  1. Dans la console Firebase, accédez à Paramètres > Général. Cliquez ensuite sur l'onglet Cloud Messaging.

  2. Accédez à la section Configuration Web.

  3. Dans l'onglet Certificats Web Push, recherchez et sélectionnez le texte du lien : importer une paire de clés existante.

  4. Dans la boîte de dialogue Importer une paire de clés, indiquez vos clés publique et privée dans les champs correspondants, puis cliquez sur Importer.

    La console affiche la chaîne de la clé publique et la date d'ajout.

Pour savoir comment ajouter la clé à votre application, consultez Configurer les identifiants Web dans votre application. Pour en savoir plus sur le format des clés et sur la façon de les générer, consultez Clés de serveur d'application.

Configurer les identifiants Web dans votre application

La méthode register(): Promise<void> permet à FCM d'utiliser les identifiants de la clé VAPID lors de l'envoi de requêtes de message à différents services push. À l'aide de la clé que vous avez générée ou importée en suivant les instructions de la section Configurer les identifiants Web avec FCM, ajoutez-la dans votre code après la récupération de l'objet de messagerie :

import { getMessaging, register } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the Firebase console here.
register(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Demander une autorisation de notification et configurer le service worker

Lorsque vous devez cibler une instance d'application avec FCM, demandez d'abord à l'utilisateur l'autorisation de notification avec Notification.requestPermission(). Lorsqu'elle est appelée comme indiqué, elle renvoie l'état de l'autorisation si elle est accordée :

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');
    }
  });
}

FCM nécessite un fichier firebase-messaging-sw.js. Sauf si vous disposez déjà d'un fichier firebase-messaging-sw.js, créez un fichier vide portant ce nom et placez-le à la racine de votre domaine avant de l'enregistrer. Vous pourrez ajouter du contenu pertinent au fichier ultérieurement, lors de la configuration du client.

Accéder à l'ID d'installation Firebase

Pour enregistrer l'instance d'application et récupérer l'ID d'installation Firebase (FID) pour le ciblage des messages : 

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});

Le rappel onRegistered est déclenché dans trois scénarios :

  1. Chaque fois qu'un appel register() manuel se termine.
  2. Un changement d'ID d'installation Firebase est détecté.
  3. Un événement pushsubscriptionchange est déclenché.

Une fois que vous avez obtenu l'ID d'installation Firebase, envoyez-le à votre serveur d'applications et stockez-le à l'aide de la méthode de votre choix.

Accéder au jeton d'enregistrement (obsolète)

Pour récupérer le jeton actuel :

Web

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});

Web

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});

Une fois que vous avez obtenu le jeton, envoyez-le au serveur de votre application et stockez-le à l'aide de la méthode de votre choix.

Envoyer un message de notification de test

  1. Installez et exécutez l'application sur l'appareil cible. Sur les appareils Apple, vous devez accepter la demande d'autorisation pour recevoir des notifications à distance.

  2. Vérifiez que l'application s'exécute en arrière-plan sur l'appareil.

  3. Dans la console Firebase, accédez à DevOps et engagement > Messagerie.

  4. Créez une campagne.

    • S'il s'agit de votre premier message :

      1. Sélectionnez Créer votre première campagne.

      2. Sélectionnez Messages de notification Firebase, puis Créer.

    • Si vous avez déjà créé des campagnes :

      1. Dans l'onglet Campagnes, sélectionnez Nouvelle campagne.

      2. Cliquez sur Notifications.

  5. Saisissez le texte du message.

  6. Sélectionnez Envoyer un message test dans le volet de droite.

  7. Dans le champ Ajouter un jeton d'enregistrement FCM, saisissez votre jeton d'enregistrement.

  8. Sélectionnez Tester.

Une fois que vous avez sélectionné Test, l'appareil client ciblé, avec l'application en arrière-plan, doit recevoir la notification.

Étapes suivantes

Une fois la configuration terminée, voici quelques options pour continuer à utiliser FCM pour le Web (JavaScript) :