Envoyer un message de test à une application en arrière-plan

Pour commencer avec FCM, créez le cas d'utilisation le plus simple : envoyer un message de notification à un utilisateur spécifique lorsque l'application est en arrière-plan sur l'appareil. Cette page répertorie toutes les étapes pour y parvenir, de la configuration à la vérification. Elle peut couvrir les étapes que vous avez déjà effectuées si vous avez configuré une application client JavaScript pour FCM.

Configurer le SDK

Si vous ne l'avez pas déjà fait, ajoutez Firebase à votre projet JavaScript .

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 firebase-messaging-sw.js . À moins que vous n'ayez déjà un 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 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.

Envoyer un message de notification de test

  1. Installez et exécutez l'application sur l'appareil cible.

  2. Assurez-vous que l'application est en arrière-plan sur l'appareil.

  3. Ouvrez l'éditeur de notifications et sélectionnez Nouvelle notification .

  4. Entrez le texte du message.

  5. Sélectionnez Envoyer un message test .

  6. Dans le champ intitulé Ajouter un jeton d'enregistrement FCM , saisissez le jeton d'enregistrement que vous avez obtenu dans une section précédente de ce guide.

  7. Cliquez sur Tester

Après avoir cliqué sur Test , l'appareil client ciblé (avec l'application en arrière-plan) doit recevoir la notification dans le navigateur.

Prochaines étapes

Envoyer des messages aux applications au premier plan

Une fois que vous avez réussi à envoyer des messages de notification alors que votre application est en arrière-plan, consultez Recevoir des messages dans un client JavaScript pour commencer à envoyer des messages aux applications au premier plan.

Allez au-delà des messages de notification

Pour aller au-delà des messages de notification et ajouter d'autres comportements plus avancés à votre application, consultez :