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 commencer à utiliser Firebase Cloud Messaging dans vos applications clientes Web afin de pouvoir 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 FCM SDK n'est compatible qu'avec les pages diffusées via HTTPS. En effet, il utilise des service workers, qui ne sont disponibles que sur les sites HTTPS. Si vous avez besoin d'un fournisseur, Firebase App Hosting est recommandé et 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 jetons d'enregistrement.

Ajouter et initialiser le FCM SDK

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

  2. Ajoutez le Firebase Cloud Messaging JS SDK 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 d'enregistrement FCM pour votre projet dans Google Cloud. Lorsque vous activez l'API, assurez-vous d'être connecté à la console Cloud avec le même compte Google que celui que vous utilisez pour Firebase et de sélectionner le bon projet. Cette API est activée par défaut dans les nouveaux projets qui ajoutent le FCM SDK.

Configurer les identifiants Web avec FCM

L'interface Web FCM utilise des identifiants Web appelés clés VAPID (Voluntary Application Server Identification) pour autoriser les requêtes d'envoi 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 soit générer une nouvelle paire de clés, soit importer votre paire de clés existante via la Firebase console.

Générer une paire de clés

  1. Ouvrez l'onglet Cloud Messaging de la console Firebase, puis accédez à la section Configuration Web.
  2. 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 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é base64 URL-safe :

  1. Ouvrez l'onglet Cloud Messaging de la console Firebase, puis accédez à la section Configuration Web.
  2. Dans l'onglet Certificats Web Push, recherchez et sélectionnez le texte du lien : Importer une paire de clés existante.
  3. Dans la boîte de dialogue Importer une paire de clés , fournissez vos clés publique et privée dans les champs correspondants, puis cliquez sur Importer. La console affiche la chaîne de 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 manière de les générer, consultez Clés du serveur d'application.

Configurer les identifiants Web dans votre application

La méthode getToken(): Promise<string> permet à FCM d'utiliser l'identifiant de 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 conformément aux instructions de la section Configurer les identifiants Web avec FCM, ajoutez-la à votre code une fois l'objet de messagerie récupéré :

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

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

Accéder au jeton d'enregistrement

Lorsque vous devez récupérer le jeton d'enregistrement actuel pour une instance d'application, demandez d'abord les autorisations de notification à l'utilisateur avec Notification.requestPermission(). Lorsqu'elle est appelée comme indiqué, cette méthode renvoie un jeton si l'autorisation est accordée ou rejette la promesse si elle est refusé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. Si vous ne disposez pas 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 récupérer un jeton. Vous pourrez ajouter du contenu significatif au fichier ultérieurement lors du processus de configuration du client.

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

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

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

Envoyer un message de notification test

  1. Installez et exécutez l'application sur l'appareil cible. Sur les appareils Apple, vous devez accepter la demande d'autorisation de 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, ouvrez la page Messaging.
  4. S'il s'agit de votre premier message, sélectionnez Créer votre première campagne.
    1. Sélectionnez Messages de notification Firebase , puis Créer.
  5. Sinon, dans l'onglet Campagnes , sélectionnez Nouvelle campagne , puis Notifications.
  6. Saisissez le texte du message.
  7. Sélectionnez Envoyer un message test dans le volet de droite.
  8. Dans le champ Ajouter un jeton d'enregistrement FCM, saisissez votre jeton d'enregistrement.
  9. Sélectionnez Tester.

Après avoir sélectionné Tester, l'appareil client cible, avec l'application en arrière-plan, devrait recevoir la notification.

Étapes suivantes

Une fois les étapes de configuration terminées, voici quelques options pour continuer à utiliser FCM pour le Web (JavaScript) :