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

Configurer une application cliente JavaScript Firebase Cloud Messaging

L'API JavaScript FCM vous permet de recevoir des messages de notification dans les applications Web en cours d' exécution dans les navigateurs qui prennent en charge l' API Push . Cela inclut les versions de navigateur répertoriées dans cette matrice de support et des 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, hébergement Firebase est recommandé pour l' hébergement gratuit HTTPS sur votre propre domaine.

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

Ajouter Firebase à votre projet JavaScript

Si vous avez pas déjà, ajoutez Firebase à votre projet JavaScript .

Si vous utilisez actuellement la FCM pour le Web et que vous voulez mettre à niveau vers SDK 6.7.0 ou version ultérieure, vous devez activer l' API d'enregistrement de la FCM pour votre projet dans le 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 « VAPID » pour autoriser l'envoi de demandes aux services Web Push 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 le nuage de messagerie onglet de la fenêtre Paramètres de la console et Firebase faites défiler jusqu'à la section de configuration Web.
  2. Dans l'onglet certificats de Push Web, 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 existante 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 forme d'URL sécurisée en base64 :

  1. Ouvrez le nuage de messagerie onglet de la fenêtre Paramètres de la console et Firebase faites défiler jusqu'à la section de configuration Web.
  2. Dans le Web push onglet certificats, 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, fournir vos clés publiques et privées dans les champs correspondants et cliquez sur Importer. La console affiche la chaîne de clé publique et la date d'ajout.

Pour obtenir des instructions sur la façon d'ajouter la clé de votre application, consultez Configurer les informations d' identification sur le Web dans votre application . Pour plus d' informations sur le format des clés et comment les générer, voir les clés de serveur d' application .

Récupérer un objet de messagerie

Web version 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Web version 8

const messaging = firebase.messaging();

Configurer les informations d'identification Web dans votre application

La méthode getToken(): Promise<string> permet FCM d'utiliser les informations d' identification de clé Vapid lors de l' envoi des demandes de messages à différents services push. En utilisant la clé que vous avez généré ou importé selon les instructions de Configuration Web avec vérification des pouvoirs de la FCM , ajoutez - le dans votre code après que l'objet de messagerie est récupéré:

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

Accéder au jeton d'inscription

Lorsque vous devez récupérer l'enregistrement en cours jeton pour une instance d'application, appelez getToken . Si l'autorisation de notification n'a pas été accordée, cette méthode demandera à l'utilisateur des autorisations de notification. Sinon, il renvoie un jeton ou rejette la promesse en raison d'une erreur.

Le service de messagerie nécessite une firebase-messaging-sw.js fichier. Sauf si vous avez déjà un firebase-messaging-sw.js fichier, créez un fichier vide avec ce nom et le placer dans la racine de votre domaine avant de récupérer un jeton. Vous pouvez ajouter un contenu significatif au fichier ultérieurement au cours du processus de configuration du client.

Pour récupérer le jeton actuel :

Web version 9

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

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

Prochaines étapes

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