Configurer une application client JavaScript Firebase Cloud Messaging

L'API JavaScript FCM vous permet de recevoir des messages de notification dans les applications Web exécutées dans des navigateurs prenant en charge l' API Push . Cela inclut les versions de navigateur répertoriées dans cette matrice de support et les extensions Chrome via l'API Push.

Le SDK FCM est pris en charge uniquement dans les pages diffusées via HTTPS. Cela est dû à son utilisation de service workers, qui ne sont disponibles que sur les sites HTTPS. Si vous avez besoin d'un fournisseur, Firebase Hosting est recommandé et fournit un niveau gratuit pour l'hébergement HTTPS sur votre propre domaine.

Pour démarrer avec l'API JavaScript FCM, vous devez ajouter Firebase à votre application Web et ajouter une logique pour accéder aux jetons d'inscription.

Ajouter et initialiser le SDK FCM

  1. Si vous ne l'avez pas déjà fait, installez le SDK Firebase JS et initialisez Firebase .

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

API Web modulaire

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);

API d'espace de noms 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 actuellement FCM pour le Web et que vous souhaitez effectuer une mise à niveau vers le SDK 6.7.0 ou une version ultérieure, vous devez activer l' API d'enregistrement FCM pour votre projet dans Google Cloud Console. Lorsque vous activez l'API, assurez-vous d'être connecté à Cloud Console avec le même compte Google que celui que vous utilisez pour Firebase, et assurez-vous de sélectionner le bon projet. Les nouveaux projets ajoutant le SDK FCM ont cette API activée par défaut.

Configurer les informations d'identification Web avec FCM

L'interface Web FCM utilise des informations d'identification Web appelées "Identification volontaire du serveur d'applications" ou des clés "VAPID" pour autoriser l'envoi de demandes aux services push Web pris en charge. 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 console Firebase.

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

  1. Ouvrez l'onglet Cloud Messaging du volet Paramètres de la console Firebase et faites défiler jusqu'à la section de configuration Web .
  2. Dans l'onglet Certificats Web Push , cliquez sur Générer une paire de clés . La console affiche un avis indiquant que la paire de clés a été générée et affiche la chaîne de clé publique et la date d'ajout.

Importer une paire de clés existante

Si vous utilisez déjà une paire de clés 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 privée existante sous une forme encodée sécurisée d'URL en base64 :

  1. Ouvrez l'onglet Cloud Messaging du volet Paramètres de la console Firebase et faites défiler jusqu'à la section de 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 , indiquez vos clés publique et privée dans les champs correspondants et 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 informations d'identification Web dans votre application . Pour plus d'informations sur le format des clés et la manière de les générer, voir Clés du serveur d'applications .

Configurer les informations d'identification Web dans votre application

La méthode getToken(): Promise<string> permet à FCM d'utiliser les informations d'identification de la clé VAPID lors de l'envoi de demandes 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 Configure Web Credentials with FCM , ajoutez-la dans 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'il est appelé comme indiqué, cela 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 . À moins que vous n'ayez déjà 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 pouvez ajouter du contenu significatif au fichier plus tard dans le processus de configuration du client.

Pour récupérer le jeton actuel :

Web modular API

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 namespaced API

// 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 que vous avez obtenu le jeton, envoyez-le à votre serveur d'applications et stockez-le en utilisant votre méthode préférée.

Prochaines étapes

Après avoir terminé les étapes de configuration, voici quelques options pour aller de l'avant avec FCM pour le Web (JavaScript) :