Configurer une application cliente Firebase Cloud Messaging JavaScript

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 répertoriées support Matrix et les extensions Chrome via 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 Hosting, qui propose une version 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.

Ajoutez et initialisez 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 actuellement FCM pour le Web et souhaitez passer au SDK 6.7.0 ou version ultérieure, vous devez activer API FCM Registration pour votre projet dans la console Google Cloud. Lorsque vous activez l'API,assurez-vous vous êtes connecté à la console Cloud avec le compte Google que vous utilisez pour Firebase, et assurez-vous de sélectionner le bon projet. Les nouveaux projets Cette API est activée par défaut pour le SDK FCM.

Configurer les identifiants Web avec FCM

L'interface Web FCM utilise des identifiants Web appelés "Voluntary Application Server Identification" (VAPID) ou clés "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 soit générez une nouvelle paire de clés ou importez votre paire existante via le la console Cloud.

Générer une paire de clés

  1. Ouvrez l'onglet Cloud Messaging du volet Paramètres de la console Firebase, puis faites défiler la page jusqu'à la section Configuration Web.
  2. Dans l'onglet Certificats Web push, cliquez sur Générer une paire de clés. La console affiche une notification 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 utilisez déjà une paire de clés avec votre application Web, vous pouvez l'importer dans FCM pour accéder à votre application Web existante via les API FCM. Pour importer des clés, vous devez disposer d'un accès au niveau du propriétaire du projet Firebase. Importez vos clés publique et privée existantes au format base64 URL-safe :

  1. Ouvrez le Onglet "Cloud Messaging" de la section Paramètres de la console Firebase et faites défiler la page jusqu'à 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 Import a key pair (Importer une paire de clés), indiquez vos clés publiques et privées dans les champs correspondants, puis cliquez sur Importer. La console affiche la liste la chaîne de clé et la date d'ajout.

Pour savoir comment ajouter la clé à votre application, consultez Configurez 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'applications.

Configurer des identifiants Web dans votre application

La méthode getToken(): Promise<string> permet à FCM d'utiliser les identifiants de clé VAPID lors de l'envoi d'un message les requêtes à différents services push. À l'aide de la clé que vous avez générée ou importée conformément aux instructions fournies dans Configurer les identifiants Web avec FCM Ajoutez-le à votre code après la récupération de l'objet de messagerie:

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 à l'utilisateur les autorisations de notification avec Notification.requestPermission(). Lorsqu'elle est appelée comme indiqué, elle renvoie un jeton si l'autorisation est accordée ou refuse 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. Sauf si vous disposez déjà d'un fichier firebase-messaging-sw.js, créez un fichier vide portant ce nom et placez-le dans la racine de votre domaine avant de récupérer un jeton. Vous pourrez ajouter du contenu pertinent au fichier ultérieurement au cours 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 que vous avez obtenu le jeton, envoyez-le à votre serveur d'application et stockez-le à l'aide de la méthode de votre choix.

Étapes suivantes

Une fois la configuration terminée, voici quelques options pour déplacer avec FCM pour le Web (JavaScript):