Comment implémenter des notifications push dans React à l'aide de Firebase

Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

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.

UTILISEZ LA VIDÉO DU JOUR FAITES DÉFILER POUR CONTINUER AVEC LE CONTENU

Configurer un projet Firebase

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

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.
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.
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.
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).

des applications qui vous rendent plus belle

Naviguez vers le Paramètres du projet page.
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.
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 install firebase react-hot-toast