Comment implémenter des notifications push dans React en utilisant Firebase

Les notifications push permettent aux applications d’envoyer des mises à jour, des alertes ou des messages personnalisés directement sur les appareils des utilisateurs, indépendamment de leur utilisation active de l’application. Ces notifications garantissent un engagement continu de l’utilisateur et une connectivité instantanée.

Dans le cas des applications web, le navigateur capture initialement ces notifications et les transmet ensuite à l’application correspondante.

Mise en place d’un projet Firebase

Suivez les étapes ci-dessous pour démarrer et configurer un projet Firebase :

1. Rendez-vous sur Firebase Developer Console, connectez-vous à l’aide de votre adresse e-mail Google, puis cliquez sur le bouton Aller à la console pour accéder à la page de présentation de la console.
2. Sur la page de présentation de la console, cliquez sur le bouton Créer un projet pour créer un nouveau projet. Indiquez ensuite le nom du projet.

   

3. Une fois le projet créé avec succès, accédez à la page de présentation du projet. Vous devez enregistrer une application sur Firebase pour générer des clés API. Pour enregistrer une application, cliquez sur le bouton Web , indiquez le nom de l’application et cliquez sur l’icône Enregistrer l’application bouton.

   

4. Copiez le code de configuration Firebase après avoir enregistré votre application React.

Configurer le service Firebase Cloud Messaging (FCM)

Une fois que vous avez enregistré votre application sur Firebase, l’étape suivante consiste à configurer le service Firebase Cloud Messaging (FCM).

1. Naviguez jusqu’à la page Paramètres du projet page.

   

2. Ensuite, cliquez sur le bouton Messagerie en nuage dans l’onglet Paramètres du projet page. Firebase Cloud Messaging utilise des paires de clés d’identité d’application pour se connecter aux services push externes. Pour cette raison, vous devez générer votre clé d’identité unique.

   

3. Sur la page Messagerie en nuage , naviguez jusqu’à l’onglet Configuration Web et cliquez sur le bouton Générer une paire de clés pour générer votre clé unique.

   

Configurer l’application React

Tout d’abord, créez une application React. Une fois installée, allez de l’avant et installez le fichier firebase et react-hot-toast que vous utiliserez pour mettre en œuvre les notifications push dans l’application React.

 npm install firebase react-hot-toast 

Configurer Firebase et le Cloud Messaging Service

Rendez-vous dans votre Paramètres du projet dans la console du développeur, et copiez l’objet de configuration Firebase fourni. Dans la page src créer un nouveau répertoire firebase.js et ajoutez le code suivant.

 import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app); 

Remplacer le code firebaseConfig avec celui que vous avez copié à partir de l’objet Paramètres du projet page. Ce code va configurer l’instance Firebase et initialiser l’objet cloud messaging pour activer la fonctionnalité FCM dans votre application.

Gestion des demandes d’autorisation des utilisateurs de notifications

Pour permettre aux applications React de recevoir des notifications push du service Firebase Cloud Messaging, vous devez gérer les permissions des utilisateurs.

Cela implique de définir et d’appeler la fonction requestPermission fournie par l’objet de messagerie que vous avez préalablement configuré. Elle vous permet de gérer correctement les réponses de l’utilisateur aux demandes de permission des notifications.

Ajoutez le code suivant au fichier firebase.js après l’initialisation de l’objet de messagerie.

 export const requestPermission = () => {

    console.log("Requesting User Permission......");
    Notification.requestPermission().then((permission) => {

      if (permission === "granted") {

        console.log("Notification User Permission Granted."); 
        return getToken(messaging, { vapidKey: `Notification_key_pair` })
          .then((currentToken) => {

            if (currentToken) {

              console.log('Client Token: ', currentToken);
            } else {
              
              console.log('Failed to generate the app registration token.');
            }
          })
          .catch((err) => {

            console.log('An error occurred when requesting to receive the token.', err);
          });
      } else {

        console.log("User Permission Denied.");
      }
    });

  }

requestPermission(); 

Le code fourni demande l’autorisation de l’utilisateur pour les notifications et traite la réponse d’autorisation. Si l’autorisation est accordée, il procède à l’obtention d’un jeton d’enregistrement pour l’application à l’aide de la fonction getToken fonction.

Le jeton d’enregistrement sert d’identifiant pour l’appareil ou le navigateur recevant les notifications. Vous pouvez ensuite utiliser ce jeton pour configurer une campagne de notification dans la page des paramètres de Firebase Cloud Messaging.

Assurez-vous que vous remplacez l’espace réservé Paire de clés de notification avec la paire de clés que vous avez générée plus tôt dans la section Configuration Web section.

Définir les auditeurs de notification

Pour gérer tout type de notification entrante, il est nécessaire de mettre en place des récepteurs de messages pour suivre les notifications entrantes et des fonctions de rappel pour déclencher les événements de messagerie.

Dans votre firebase.js ajoutez le code suivant.

 export const onMessageListener = () =>
  new Promise((resolve) => {
    onMessage(messaging, (payload) => {
      resolve(payload);
    });
}); 

Cette fonction met en place un récepteur de messages spécifique pour les notifications push. La fonction onMessage fonction dans onMessageListener est déclenché chaque fois que l’application reçoit une notification push et qu’elle est au centre de l’attention.

Lorsqu’une notification est reçue, la charge utile du message contient des données pertinentes associées à la notification, telles que le titre et le corps du message.

Définir un Firebase Messaging Service Worker

FCM a besoin d’un Firebase Messaging service worker pour gérer les notifications push entrantes.

Le service worker est un fichier JavaScript qui s’exécute en arrière-plan et gère les notifications push. Il permet à l’application web de recevoir et d’afficher les notifications, même si l’utilisateur a fermé l’application ou est passé à un autre onglet ou à une autre fenêtre.

Dans le /public créer un nouveau répertoire firebase-messaging-sw.js et inclure le code suivant.

 importScripts("https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");

 //the Firebase config object 
const firebaseConfig = {
    "configuration information"
  };

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();


messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
}); 

Ce code met en place un service worker pour Firebase Cloud Messaging dans l’application React, permettant le traitement et l’affichage des notifications.

Créer un composant de notification

Créer un nouveau composants/Notification.js dans le fichier /src et ajoutez le code suivant.

 import React, { useState, useEffect } from 'react';
import { Toaster, toast } from 'react-hot-toast';
import { requestPermission, onMessageListener } from '../firebase';

function Notification() {
  const [notification, setNotification] = useState({ title: '', body: '' });
  useEffect(() => {
    requestPermission();
    const unsubscribe = onMessageListener().then((payload) => {
      setNotification({
        title: payload?.notification?.title,
        body: payload?.notification?.body,
      });
      toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
        duration: 60000, 
        position: 'top-right', section of the browser page
      });
});
    return () => {
      unsubscribe.catch((err) => console.log('failed: ', err));
    };
  }, []);
  return (
    <div>
      <Toaster />
    </div>
  );
}
export default Notification; 

Ce code définit un composant qui gère les notifications push. Il utilise le composant react-hot-toast bibliothèque pour afficher les notifications à l’utilisateur.

Le composant demande l’autorisation de l’utilisateur, écoute les messages entrants à l’aide de la fonction onMessageListener et affiche par défaut une notification de toast avec le titre et le corps du message reçu pendant une minute dans la partie supérieure droite de la page du navigateur. Vous pouvez personnaliser davantage la notification à l’aide de la documentation officielle react-hot-toast et de la propriété CSS position.

Enfin, mettez à jour le fichier App.js pour importer le fichier Notification composant.

 import './App.css';
import Notification from './components/Notification';
function App() {
  return (
    <div className="App">
      <header className="App-header"> 
      <Notification />
      </header> 
    </div>
  );
}
export default App; 

Tester la fonctionnalité de notification push

Allez-y, démarrez le serveur de développement et ouvrez http://locahlhost:3000 sur votre navigateur pour accéder à l’application. Vous devriez obtenir le pop-up suivant pour autoriser l’application à recevoir des notifications.

Cliquez Autoriser. Les jeton client doit être généré et enregistré dans la base de données console du navigateur. Vous utiliserez le jeton pour envoyer des campagnes de notification à votre application React.

Copiez le fichier jeton client et rendez-vous sur la console développeur de Firebase Aperçu du projet page. Cliquez sur l’icône Messagerie en nuage sous la carte Développez &amp ; engagez votre public section.

Cliquez Créez votre première campagne, sélectionnez Messages de notification Firebaseet donnez un titre et un message à votre notification. Sous l’onglet Aperçu de l’appareil cliquez sur Envoyer un message de test.

Collez et ajoutez le jeton client dans la fenêtre pop-up qui suit et cliquez sur Test pour envoyer la notification push.

Si vous êtes sur l’application, vous recevrez une notification push. Sinon, vous recevrez une notification en arrière-plan.

Envoi de notifications push à l’aide de Firebase Cloud Messaging Service

Les notifications push sont une fonctionnalité précieuse pour améliorer l’expérience utilisateur des applications web et mobiles. Ce guide présente les étapes de l’intégration des notifications push à l’aide de Firebase, y compris la gestion des autorisations des utilisateurs et la configuration des récepteurs de messages.

En exploitant les API Firebase Cloud Messaging, vous pouvez efficacement fournir des mises à jour opportunes et des messages personnalisés à vos applications React.