Apprenez à utiliser la fonctionnalité Firebase Cloud Messaging (FCM) pour intégrer des notifications push dans une application React.

Les notifications push permettent aux applications d'envoyer des mises à jour, des alertes ou des messages personnalisés en temps opportun directement aux appareils des utilisateurs, quelle que soit leur utilisation active de l'application. Ces notifications garantissent un engagement continu des utilisateurs et une connectivité instantanée.

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

Configurer un projet Firebase

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

  1. Dirigez-vous vers Console développeur Firebase, connectez-vous à l'aide de votre adresse e-mail Google, puis cliquez sur le 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 Créer un projet bouton 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 la toile icône, 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 vers le Paramètres du projet page.
  2. Ensuite, cliquez sur le Messagerie en nuage onglet sur le Paramètres du projet page. Firebase Cloud Messaging utilise des paires de clés Application Identity pour se connecter à des services push externes. Pour cette raison, vous devez générer votre clé d'identité unique.
  3. Sur le Messagerie en nuage paramètres, accédez au Paramétrage Web section, et cliquez sur le Générer une paire de clés bouton pour générer votre clé unique.

Configurer l'application React

D'abord, créer une application React. Une fois installé, continuez et installez le base de feu et réagir-chaud-toast packages que vous utiliserez pour implémenter les notifications push dans l'application React.

npm installer firebase réagir-chaud-toast

Vous pouvez trouver le code source de ce projet dans ce Référentiel GitHub.

Configurer Firebase et le service de messagerie cloud

Dirigez-vous vers votre Paramètres du projet sur la console du développeur et copiez l'objet de configuration Firebase fourni. Dans le src répertoire, créez un nouveau firebase.js fichier et ajoutez le code suivant.

importer { initializeApp } depuis"base de feu/application";
importer { getMessage, getToken, onMessage } depuis'firebase/messagerie';
constante firebaseConfig = {
 clé API: "",
 authDomain: "",
 ID de projet: "",
 compartiment de stockage: "",
 messageSenderId: "",
 ID d'application: ""
};
constante app = initializeApp (firebaseConfig);
constante messagerie = getMessaging (application);

Remplacer ci-dessus firebaseConfig objet avec celui que vous avez copié à partir du Paramètres du projet page. Ce code configurera l'instance Firebase et initialisera l'objet de messagerie cloud pour activer la fonctionnalité FCM dans votre application.

Gérer les demandes d'autorisation d'utilisateur des notifications

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

Il s'agit de définir et d'appeler les demander la permission méthode fournie par l'objet de messagerie, que vous avez préalablement configuré. Il garantit que vous gérez correctement les réponses de l'utilisateur aux demandes d'autorisation des notifications.

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

exporterconstante demandePermission = () => {
console.enregistrer("Demande d'autorisation utilisateur...");
 Notification.requestPermission().then((autorisation) => {


si (autorisation "accordé") {


console.enregistrer("Autorisation de l'utilisateur de notification accordée."); 
retour getToken (messagerie, { vapidKey: `Notification_key_pair` })
 .alors((jetonactuel) => {


si (jetonactuel) {


console.enregistrer('Jeton client: ', jetonactuel);
 } autre {

console.enregistrer('Échec de la génération du jeton d'enregistrement de l'application.');
 }
 })
 .attraper((se tromper) => {


console.enregistrer('Une erreur s'est produite lors de la demande de réception du jeton.', erreur);
 });
 } autre {


console.enregistrer("Autorisation utilisateur refusée.");
 }
 });


 }
demander la permission();

Le code fourni demande l'autorisation de l'utilisateur pour les notifications et gère 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 du getToken fonction.

Le jeton d'enregistrement sert d'identifiant pour l'appareil ou le navigateur qui reçoit 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 de remplacer l'espace réservé Notification_key_pair avec la paire de clés réelle que vous avez générée précédemment dans le Paramétrage Web section.

Définir les écouteurs de notification

Pour gérer tout type de notifications entrantes, il est nécessaire de configurer des écouteurs de message pour suivre les notifications entrantes et les fonctions de rappel pour déclencher tout événement de messagerie.

Dans ton firebase.js fichier, ajoutez le code suivant.

exporterconstante onMessageListener = () =>
nouveauPromesse((résoudre) => {
 onMessage (messagerie, (charge utile) => {
 résoudre (charge utile);
 });
});

Cette fonction configure un écouteur de message spécifiquement pour les notifications push. Le surMessage fonctionner au sein onMessageListener est déclenché chaque fois que l'application reçoit une notification push et est au point.

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

Définir un agent de service de messagerie Firebase

FCM nécessite une messagerie Firebase travailleur de service 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 au Web app pour recevoir et afficher des notifications, même si l'utilisateur a fermé l'application ou est passé à un autre onglet ou fenêtre.

Dans le /public répertoire, créez un nouveau firebase-messagerie-sw.js fichier et incluez 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");
//l'objet de configuration Firebase 
constante firebaseConfig = {
"informations de configuration"
 };


firebase.initializeApp (firebaseConfig);
constante messagerie = firebase.messagerie();


messagerie.onBackgroundMessage(fonction(charge utile) {
console.enregistrer('Message reçu en arrière-plan', charge utile);
constante notificationTitle = charge utile.notification.titre ;
constante notificationOptions = {
 corps: charge utile.notification.corps,
 };
 self.registration.showNotification (notificationTitle,
 notificationOptions );
});

Ce code configure un service worker pour Firebase Cloud Messaging dans l'application React, permettant la gestion et l'affichage des notifications.

Créer un composant de notification

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

importer Réagir, { useState, useEffect } depuis'réagir';
importer { Grille-pain, pain grillé } depuis'réagir-chaud-toast';
importer { requestPermission, onMessageListener } depuis'../base de feu';
fonctionNotification() {
constante [notification, setNotification] = useState({ titre: '', corps: '' });
 useEffet(() => {
 demander la permission();
constante se désinscrire = onMessageListener().then((charge utile) => {
 setNotification({
 titre: charge utile?.notification?.titre,
 corps: charge utile ?.notification ?.corps,
 });
 toast.succès(`${charge utile?.notification?.titre}: ${payload?.notification?.body}`, {
 durée: 60000, 
 position: 'en haut à droite', section de la page du navigateur
 });
});
retour() => {
 unsubscribe.catch((se tromper) =>console.enregistrer('échoué: ', euh) );
 };
 }, []);
retour (



 </div>
 );
}
exporterdéfaut Notification;

Ce code définit un composant qui gère les notifications push. Il utilise le réagir-chaud-toast bibliothèque pour afficher les notifications à l'utilisateur.

Le composant demande l'autorisation de l'utilisateur, écoute les messages entrants à l'aide onMessageListener fonction, et affiche par défaut une notification toast avec le titre et le corps reçus pendant une durée d'une minute dans la section supérieure droite de la page du navigateur. Vous pouvez personnaliser davantage la notification à l'aide de l'officiel réagir-chaud-toast documents et la propriété position CSS.

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

importer'./App.css';
importer Notification depuis'./composants/Notification';
fonctionApplication() {
retour (
"Application">
"App-header"> 

 </header> 
 </div>
 );
}
exporterdéfaut application ;

Testez la fonctionnalité de notification push

Allez-y et lancez le serveur de développement et ouvrez http://locahlhost: 3000 sur votre navigateur pour accéder à l'application. Vous devriez obtenir la fenêtre contextuelle suivante pour permettre à l'application de recevoir des notifications.

Cliquez sur Permettre. Le jeton client doit être généré et enregistré dans le console du navigateur. Vous utiliserez le jeton pour envoyer des campagnes de notification à votre application React.

Copiez le jeton client et rendez-vous sur la console développeur de Firebase Aperçu du projet page. Clique le Messagerie en nuage carte sous le Développez et engagez votre audience section.

Cliquez sur Créez votre première campagne, sélectionner Messages de notification Firebase, et indiquez un titre et un message pour votre notification. Sous le Aperçu de l'appareil section, cliquez sur Envoyer un message test.

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

Si vous êtes sur l'application, vous recevrez une notification push. Si ce n'est pas le cas, vous recevrez une notification en arrière-plan.

Envoi de notifications push à l'aide du service Firebase Cloud Messaging

Les notifications push sont une fonctionnalité précieuse pour améliorer l'expérience utilisateur pour les applications Web et mobiles. Ce guide a mis en évidence les étapes d'intégration des notifications push à l'aide de Firebase, y compris la gestion des autorisations des utilisateurs et la configuration des auditeurs de messages.

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