Les notifications push de Firebase réagissent

Les notifications sont devenues une partie stable du Web de nos jours. Il n'est pas rare de rencontrer des sites demandant la permission d'envoyer des notifications à votre navigateur. La plupart des navigateurs Web modernes implémentent l'API push et sont capables de gérer les notifications push. Une vérification rapide de caniuse montre que l'API bénéficie d'un large support parmi les navigateurs modernes basés sur Chrome et le navigateur Firefox.

Il existe différents services pour implémenter des notifications sur le Web. Les plus remarquables sont Pusher et Firebase . Dans cet article, nous allons implémenter les notifications push avec le service Firebase Cloud Messaging (FCM), qui est "une solution de messagerie multiplateforme qui vous permet d'envoyer des messages de manière fiable et sans frais".

Je suppose que le lecteur en a familiarité avec l'écriture d'une application principale dans Express.js et / ou familiarité avec React. Si vous êtes à l'aise avec l'une de ces technologies, vous pouvez travailler avec le frontend ou le backend. Nous allons d'abord implémenter le backend, puis passer au frontend. De cette façon, vous pouvez utiliser la section qui vous convient le mieux.

Commençons donc.

Types de messages Firebase

La documentation Firebase spécifie qu'une implémentation FCM nécessite deux composants.

1. Un environnement de confiance tels que Cloud Functions for Firebase ou un serveur d'applications sur lequel créer, cibler et envoyer des messages.
2. Une application client iOS, Android ou Web (JavaScript) qui reçoit des messages via le service de transport spécifique à la plate-forme correspondante. [19659012] Nous nous occuperons de l'élément 1 dans notre application back-end express et de l'élément 2 dans notre application front-end react.

   Les documents indiquent également que FCM nous permet d'envoyer deux types de messages.

   1. Messages de notification ( parfois considérés comme des "messages d'affichage") sont gérés automatiquement par le SDK FCM.
   2. Les messages de données sont gérés par l'application cliente.

   Les messages de notification sont automatiquement traités par le navigateur sur le Web. Ils peuvent également prendre une charge utile de données facultative, qui doit être gérée par l'application cliente. Dans ce didacticiel, nous allons envoyer et recevoir des messages de données, qui doivent être gérés par l'application cliente. Cela nous donne plus de liberté pour décider comment gérer le message reçu.

   Configuration d'un projet Firebase

   La toute première chose que nous devons faire est de configurer un projet Firebase. FCM est un service et en tant que tel, nous aurons besoin de clés API. Cette étape nécessite que vous ayez un compte Google. Créez-en un si vous n'en avez pas déjà un. Vous pouvez cliquer sur ici pour commencer.

   Après avoir configuré votre compte Google, accédez à la console Firebase .

   Cliquez sur ajouter un projet . Entrez un nom pour votre projet et cliquez sur continuer . Sur l'écran suivant, vous pouvez choisir de désactiver l'analyse. Vous pouvez toujours l'activer ultérieurement dans le menu Analytics de la page de votre projet. Cliquez sur continuez et attendez quelques minutes que le projet soit créé. C’est généralement moins d’une minute. Cliquez ensuite sur continuez pour ouvrir la page de votre projet.

   Une fois que nous avons réussi à configurer un projet, l'étape suivante consiste à obtenir les clés nécessaires pour travailler avec notre projet. Lorsque vous travaillez avec Firebase, nous devons effectuer une étape de configuration pour le frontend et le backend séparément. Voyons comment obtenir les informations d'identification nécessaires pour travailler avec les deux.

   Frontend

   Sur la page du projet, cliquez sur l'icône pour ajouter Firebase à votre application Web.

   

   Donnez à votre application un surnom . Pas besoin de configurer l'hébergement Firebase. Cliquez sur Enregistrez l'application et donnez-lui quelques secondes pour terminer la configuration. Sur l'écran suivant, copiez les informations d'identification de l'application et stockez-les quelque part. Vous pouvez simplement laisser cette fenêtre ouverte et y revenir plus tard.

   

   Nous aurons besoin de l’objet de configuration plus tard. Cliquez sur continuer à la console pour revenir à votre console.

   Backend

   Nous avons besoin d'un identifiant de compte de service pour nous connecter à notre projet Firebase à partir du backend. Sur la page de votre projet, cliquez sur l'icône d'engrenage à côté de Présentation du projet pour créer un compte de service à utiliser avec notre backend Express. Reportez-vous à la capture d'écran ci-dessous. Suivez les étapes 1 à 4 pour télécharger un fichier JSON avec les informations d'identification de votre compte. Assurez-vous de conserver votre fichier de compte de service dans un endroit sûr.

   

   Je vous déconseille de le télécharger tant que vous n'êtes pas prêt à l'utiliser. N'oubliez pas de revenir à ces sections si vous avez besoin d'une mise à jour.

   Nous avons donc réussi à configurer un projet Firebase et à y ajouter une application Web. Nous avons également vu comment obtenir les informations d'identification dont nous avons besoin pour travailler avec le frontend et le backend. Travaillons maintenant à l'envoi de notifications push depuis notre backend express.

   Mise en route

   Pour vous faciliter la tâche dans ce didacticiel, j'ai mis en place un projet sur Github avec à la fois un serveur et un client. Habituellement, vous aurez respectivement un référentiel pour votre backend et votre frontend. Mais je les ai rassemblés ici pour faciliter le travail dans ce didacticiel.

   Créez un fork du dépôt, clonez-le sur votre ordinateur et commençons nos serveurs frontaux et principaux. [19659010] Forkez le dépôt et consultez la branche 01-get-started .

3. Ouvrez le projet dans l'éditeur de code de votre choix et observez le contenu.
4. Dans la racine du projet, nous avons deux dossiers , client / et serveur / . Il existe également un fichier .editorconfig un .gitignore et un README.md .
5. Le dossier client contient une application React. C'est ici que nous écouterons les notifications.
6. Le dossier du serveur contient une application express. C'est de là que nous enverrons les notifications. L'application provient du projet que nous avons créé dans mon autre article Comment configurer un projet de backend API Express avec PostgreSQL .
7. Ouvrez un terminal et accédez au dossier client / . Exécutez la commande yarn install pour installer les dépendances du projet. Exécutez ensuite début de fil pour démarrer le projet. Visitez http: // localhost: 3000 pour voir l'application en direct.
8. Créez un fichier .env dans le dossier server / et ajoutez le ] CONNECTION_STRING variable d'environnement. Cette variable est une URL de connexion à une base de données pointant vers une base de données PostgreSQL. Si vous avez besoin d'aide, consultez la section Connexion de la base de données PostgreSQL et écriture d'un modèle de mon article lié. Vous devez également fournir la variable d'environnement PORT car React s'exécute déjà sur le port 3000 . J'ai défini PORT = 3001 dans mon fichier .env .
9. Ouvrez un terminal distinct et accédez au dossier server / . Exécutez la commande yarn install pour installer les dépendances du projet. Exécutez yarn runQuery pour créer la base de données du projet. Exécutez yarn startdev pour démarrer le projet. Visitez http: // localhost: 3001 / v1 / messages et vous devriez voir des messages au format JSON.

Maintenant que nos applications frontales et principales sont en cours d'exécution, implémentons les notifications dans le backend.

Configuration de la messagerie d'administration Firebase sur le backend

Envoi les notifications push avec FCM sur le backend nécessitent le SDK administrateur Firebase ou les protocoles de serveur FCM . Nous utiliserons le SDK d'administration dans ce didacticiel. Il y a aussi le compositeur de notifications qui est bon pour «tester et envoyer des messages de marketing et d'engagement avec un puissant ciblage et des analyses intégrés».

Dans votre terminal, accédez au serveur / dossier et installez le SDK Admin.

 # installez le SDK admin Firebase
yarn add firebase-admin 

Ouvrez votre fichier .env et ajoutez la variable d'environnement suivante.

 GOOGLE_APPLICATION_CREDENTIALS = "chemin d'accès à votre compte de service-fichier-json" 

Le La valeur de cette variable est le chemin d'accès aux informations d'identification de votre compte de service téléchargé. À ce stade, vous souhaiterez probablement revenir à la section où nous avons créé le compte de service pour notre projet. Vous devez copier le code d'initialisation administrateur à partir de là et également télécharger le fichier de clé de votre compte de service. Placez ce fichier dans votre dossier / et ajoutez-le à votre .gitignore .

N'oubliez pas, dans un projet réel, vous devez stocker ce fichier dans un emplacement très sécurisé sur votre serveur. Ne le laissez pas entre de mauvaises mains.

Ouvrez server / src / settings.js et exportez le chemin du fichier des informations d'identification de l'application.

 # exportez le chemin du fichier de clé du compte de service
export const googleApplicationCredentials = process.env.GOOGLE_APPLICATION_CREDENTIALS; 

Créez un fichier server / src / firebaseInit.js et ajoutez le code ci-dessous.

 import admin depuis 'firebase-admin';

importer {googleApplicationCredentials} à partir de './settings'

const serviceAccount = require (googleApplicationCredentials);

admin.initializeApp ({
  informations d'identification: admin.credential.cert (serviceAccount),
  databaseURL: 'votre-base-de-données-URL-ici'
});

export const messaging = admin.messaging (); 

Nous importons le module d'administration depuis firebase-admin . Nous initialisons ensuite l'application d'administration avec notre fichier de compte de service. Enfin, nous créons et exportons la fonction de messagerie.

Notez que j'aurais pu transmettre directement le chemin d'accès au fichier de clé de mon compte de service, mais c'est l'option la moins sécurisée. Utilisez toujours des variables d'environnement lorsque vous traitez des informations sensibles.

Pour vérifier que vous avez terminé l'initialisation avec succès, ouvrez server / src / app.js et incluez les lignes suivantes.

 importez {messagerie} depuis './firebaseInit'
console.log (messagerie) 

Nous importons l'instance de messagerie et la connectons dans la console. Vous devriez voir quelque chose comme l'image ci-dessous. Vous devez les supprimer une fois que vous avez vérifié que votre administrateur est correctement configuré.

Si vous rencontrez des problèmes, vous pouvez consulter la branche 02-connect-firebase-admin de mon référentiel pour comparaison.

Maintenant que nous avons réussi à configurer la messagerie d'administration, écrivons maintenant le code pour envoyer les notifications.

Envoi de notifications push depuis le backend

La configuration des messages de données FCM est très simple. Il vous suffit de fournir une ou plusieurs cible (s) et un JSON du message que vous souhaitez envoyer au (x) client (s). Aucune clé n'est requise dans le JSON . Vous seul décidez quelles paires clé-valeur vous souhaitez inclure dans les données. Le formulaire de messages de données fonctionne sur toutes les plates-formes, donc notre notification peut également être traitée par des appareils mobiles.

Il existe des configurations supplémentaires pour d'autres plates-formes. Par exemple, il existe un paramètres Android qui ne fonctionnent qu'avec des appareils Android et apns des paramètres qui ne fonctionnent que sur des appareils iOS. Vous pouvez trouver le guide de configuration ici .

Créez un fichier server / src / notify.js et entrez le code ci-dessous.

 import {messaging} from './ firebaseInit ';

export const sendNotificationToClient = (jetons, données) => {
  // Envoie un message aux appareils correspondant au fourni
  // jetons d'enregistrement.
  Messagerie
    .sendMulticast ({jetons, données})
    .then (response => {
      // La réponse est un objet de la forme {réponses: []}
      const successes = response.responses.filter (r => r.success === true)
        .longueur;
      const failures = response.responses.filter (r => r.success === false)
        .longueur;
      console.log (
        'Notifications envoyées:',
        `$ {succès} réussi, $ {échecs} a échoué`
      );
    })
    .catch (erreur => {
      console.log ('Erreur lors de l'envoi du message:', erreur);
    });
}; 

Nous avons créé une fonction qui accepte un tableau de chaînes de jetons et un objet de données. Chaque chaîne de jeton représente un appareil qui a accepté de recevoir des notifications de notre application principale. La notification sera envoyée à chaque client du tableau de jetons. Nous verrons comment générer le jeton dans la section front-end du didacticiel.

La méthode sendMulticast de l'instance de messagerie renvoie une promesse. En cas de succès, nous obtenons un tableau à partir duquel nous comptons le nombre de succès ainsi que les notifications ayant échoué. Vous pouvez certainement gérer cette réponse comme vous le souhaitez.

Utilisons cette fonction pour envoyer une notification chaque fois qu'un nouveau message est ajouté à la base de données.

Ouvrez server / src / controllers / message.js et mettre à jour la fonction addMessage .

 import {sendNotificationToClient} de '../notify';

export const addMessage = async (req, res) => {
  const {nom, message} = req.body;
  const colonnes = 'nom, message';
  const values ​​= `` $ {name} ',' $ {message} '';
  essayez {
    const data = attente messagesModel.insertWithReturn (colonnes, valeurs);
    jetons const = [];
    const notificationData = {
      titre: «Nouveau message»,
      corps: message,
    };
    sendNotificationToClient (jetons, notificationData);
    res.status (200) .json ({messages: data.rows});
  } catch (err) {
    res.status (200) .json ({messages: err.stack});
  }
}; 

Cette fonction gère une demande de publication au point de terminaison / messages . Une fois le message créé avec succès, une notification est envoyée par la fonction sendNotificationToClient suivie de la réponse au client. La seule pièce manquante dans ce code est les jetons auxquels envoyer les notifications.

Lorsque nous connectons l'application cliente, nous copions le jeton généré et le collons dans ce fichier. Dans une application de production, vous stockerez les jetons quelque part dans votre base de données.

Avec ce dernier morceau de code, nous avons terminé l'implémentation principale. Passons maintenant au frontend.

La branche correspondante dans mon référentiel à ce stade est 03-send-notification .

Configuration des notifications de messagerie Firebase sur le client

Prenons un examinez les principaux composants de notre application React frontale.

Ouvrez client / src / App.js et inspectez le contenu. Je laisse de côté la plupart des instructions d'importation et je regarde la logique du programme.

 # bibliothèque importe

importer {Messaging} depuis './Messaging';

axios.defaults.baseURL = 'http: // localhost: 3001 / v1';

const App = () => {
  revenir (
    
      
      
         Notifictations Firebase avec React et Express 
      
      
        
          
            
          
        
      
    
  );
};
exportation par défaut de l'application; 

Il s'agit d'un composant de réaction classique de style react-bootstrap . Il y a un composant toast en haut de notre application, que nous utiliserons pour afficher les notifications. Notez que nous avons également défini la baseURL pour la bibliothèque axios . Tout ce qui est important se produit à l'intérieur du composant . Voyons maintenant son contenu.

Ouvrez client / src / Messaging.js et inspectez le contenu.

 export const Messaging = () => {
  const [messages, setMessages] = React.useState ([]);
  const [requesting, setRequesting] = React.useState (false);

  React.useEffect (() => {
    setRequesting (true);
    axios.get ("/ messages"). then ((resp) => {
      setMessages (resp.data.messages);
      setRequesting (false);
    });
  }, []);

  revenir (
    
      {/ * le formulaire va ici * /}
      

        
 Messages 
        {demande? (
          
             Chargement ... 
          
        ): (
          <>
            {messages.map ((m, index) => {
              const {nom, message} = m;
              revenir (
                

                  {nom}: {message}
                
              );
            })}
          >
        )}
      
    
  );
}; 

Nous avons deux variables d'état, messages et demandant . messages représentent la liste des messages de notre base de données et demandant est pour basculer notre état de chargeur. Nous avons un bloc React.useEffect où nous effectuons notre appel API au point de terminaison / messages et définissons les données renvoyées dans l'état de nos messages .

Dans l'instruction return, nous mappons les messages et affichons les champs name et message . Sur la même page, nous incluons un formulaire pour créer de nouveaux messages.

  {
    setTimeout (() => {
      alert (JSON.stringify (valeurs, null, 2));
      actions.setSubmitting (false);
      toast.success ("Soumis avec succès");
    }, 1000);
  }}
>
  {(prop) => {
    const {handleSubmit, handleChange, isSubmitting} = prop;
    revenir (
      <>
        
          
             Nom 
          
          
        
        
          
             Message 
          
          
        
         {isSubmitting? (
          
            
             Chargement ...
          
        ): (
           handleSubmit ()}>
            Soumettre
          
        )}
      >
    );
  }}
 

Nous utilisons la bibliothèque Formik pour gérer notre formulaire. Nous passons le composant un accessoire initialvalues ​​un accessoire onSubmit et le composant de formulaire que nous voulons rendre. En retour, nous récupérons certaines fonctions pratiques telles que handleChange que nous pouvons utiliser pour manipuler nos entrées de formulaire et handleSubmit que nous utilisons pour soumettre le formulaire. isSubmitting est un booléen que nous utilisons pour basculer l'état du bouton de soumission.

Je vous encourage à essayer Formik. Cela simplifie vraiment le travail avec les formulaires. Nous remplacerons le code dans la méthode onSubmit plus tard.

Implémentons maintenant la méthode qui demandera l'autorisation d'un navigateur et lui attribuons un jeton.

Pour commencer à utiliser Firebase dans le frontend, nous avons pour installer la bibliothèque du client JavaScript Firebase . Notez qu'il s'agit d'un package différent du SDK admin firebase .

 # install bibliothèque cliente firebase
yarn add firebase 

Créez un fichier client / src / firebaseInit.js et ajoutez le contenu suivant:

 importez firebase depuis 'firebase / app';
importer 'firebase / messaging';

const config = {
  apiKey: "API-KEY",
  authDomain: "AUTH-DOMAIN",
  databaseURL: "DATABASE-URL",
  projectId: "PROJECT-ID",
  storageBucket: "STORAGE-GUCKET",
  messagingSenderId: "MESSAGING-SENDER-ID",
  appId: "APP-ID"
};

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

// le bloc de code suivant va ici 

Les documents Firebase indiquent que:

«Le client complet Firebase JavaScript inclut la prise en charge de l'authentification Firebase, la base de données en temps réel Firebase, le stockage Firebase et la messagerie Firebase Cloud . »

Donc ici, nous importons uniquement la fonction de messagerie. À ce stade, vous pouvez vous référer à la section sur la création d'un projet Firebase pour obtenir l'objet config . Nous initialisons ensuite Firebase et exportons la fonction de messagerie. Ajoutons le dernier bloc de code.

 export const requestFirebaseNotificationPermission = () =>
  nouvelle promesse ((résoudre, rejeter) => {
    Messagerie
      .demander la permission()
      .then (() => messaging.getToken ())
      .then ((firebaseToken) => {
        résoudre (firebaseToken);
      })
      .catch ((err) => {
        rejeter (err);
      });
  });

export const onMessageListener = () =>
  nouvelle promesse ((résoudre) => {
    messaging.onMessage ((payload) => {
      résoudre (charge utile);
    });
  }); 

La fonction requestFirebaseNotificationPermission demande l'autorisation du navigateur pour envoyer des notifications et se résout avec un jeton si la demande est accordée. Il s'agit du jeton utilisé par FCM pour envoyer une notification au navigateur. C'est ce qui déclenche l'invite que vous voyez sur les navigateurs demandant l'autorisation d'envoyer une notification.

La fonction onMessageListener n'est invoquée que lorsque le navigateur est au premier plan. Plus tard, nous écrirons une fonction distincte pour gérer la notification lorsque le navigateur est en arrière-plan.

Ouvrez client / src / App.js et importez la fonction requestFirebaseNotificationPermission .

 import {requestFirebaseNotificationPermission} à partir de './firebaseInit'[19659062[Ensuiteàl'intérieurdelafonctionAppajoutezlecodeci-dessousavantl'instructionreturn
 requestFirebaseNotificationPermission ()
  .then ((firebaseToken) => {
    // eslint-disable-next-line sans console
    console.log (firebaseToken);
  })
  .catch ((err) => {
    return err;
  }); 
 Une fois l'application chargée, cette fonction s'exécute et demande l'autorisation du navigateur pour afficher les notifications. Si l'autorisation est accordée, nous enregistrons le jeton. Dans une application de production, vous devez enregistrer le jeton quelque part auquel votre backend peut accéder. Mais pour ce didacticiel, nous allons simplement copier et coller le jeton dans l'application principale.
 Maintenant, exécutez votre application et vous devriez voir le message de demande de notification. Cliquez sur Autoriser et attendez que le jeton soit connecté à la console. Puisque vous avez accordé l'autorisation du navigateur, si nous actualisons la page, vous ne verrez plus la bannière, mais le jeton sera toujours connecté à la console.
 Vous devez savoir que le navigateur Firefox (v75) ne demande pas d'autorisation de notification par défaut. La demande d'autorisation doit être déclenchée par une action générée par l'utilisateur comme un clic.
 C'est un bon point pour moi de valider mes modifications. La branche correspondante est  04-request-permission .
 Complétons maintenant le code pour enregistrer un message dans notre base de données.
 Ouvrez  client / src / Messaging.js  et remplacez la fonction  onSubmit  de notre formulaire par le code ci-dessous.
 onSubmit = {(valeurs, actions) => {
  axios
    .post ("/ messages", valeurs)
    .then ((resp) => {
      setMessages (resp.data.messages.concat (messages));
      actions.setSubmitting (false);
      toast.success ("Soumis avec succès");
    })
    .catch ((err) => {
      console.log (err);
      toast.error ("Une erreur s'est produite lors de l'enregistrement du message");
    });
}} 
 Nous faisons une demande  après  au point d'extrémité  / messages  pour créer un nouveau message. Si la demande aboutit, nous prenons les données retournées et les plaçons en tête de la liste des messages  . Nous affichons également un toast réussi.
 Essayons pour voir si cela fonctionne. Démarrez les serveurs frontaux et principaux. Avant d'essayer la demande de publication, ouvrez  server / src / controllers / messages.js  et commentez la ligne où nous envoyons la notification.
 # cette ligne générera une erreur si les jetons sont un tableau vide commenter temporairement
// sendNotificationToClient (tokens, notificationData); 
 Essayez d'ajouter des messages à la base de données. Travaux? C'est génial. Décommentez maintenant cette ligne avant de continuer.
 Copiez le jeton de notification à partir de la console du développeur et collez-le dans le tableau des jetons. Le jeton est une chaîne très longue, comme illustré ci-dessous.

    const tokens = [
      'eEa1Yr4Hknqzjxu3P1G3Ox:APA91bF_DF5aSneGdvxXeyL6BIQy8wd1f600oKE100lzqYq2zROn50wuRe9nB-wWryyJeBmiPVutYogKDV2m36PoEbKK9MOpJPyI-UXqMdYiWLEae8MiuXB4mVz9bXD0IwP7bappnLqg',
    ]; 
 Ouvrez  client / src / Messaging.js importez le  onMessageListener  et invoquez-le juste sous le bloc  useEffect . Toute position au sein de la fonction est correcte tant qu'elle est antérieure à l'instruction  return .
 import {onMessageListener} from './firebaseInit';

  React.useEffect (() => {
    ...
  }, []);

  onMessageListener ()
    .then ((charge utile) => {
      const {title, body} = payload.data;
      toast.info (`$ {title}; $ {body}`);
    })
    .catch ((err) => {
      toast.error (JSON.stringify (err));
    }); 
 L'auditeur renvoie une promesse qui se résout en charge utile de notification en cas de succès. Nous affichons ensuite le titre et le corps dans un toast. Notez que nous aurions pu prendre toute autre mesure une fois que nous aurions reçu cette notification, mais je reste simple ici. Avec les deux serveurs en cours d'exécution, essayez-le et voyez si cela fonctionne.
 Ça marche? C'est super.
 Si vous rencontrez des problèmes, vous pouvez toujours comparer avec mon dépôt. La branche correspondante à ce stade est  05-listen-to-notification .
 Il n'y a qu'un seul élément dont nous devons nous occuper. À l'heure actuelle, nous ne pouvons voir les notifications que lorsque le navigateur est au premier plan. Le point au sujet des notifications est qu'il devrait apparaître si le navigateur est au premier plan ou non.
 Si nous devions envoyer un message d'affichage, c'est-à-dire que nous avons inclus un objet de notification   dans notre charge utile de notification, le le navigateur s'en chargera tout seul. Mais puisque nous envoyons un message de données, nous devons indiquer au navigateur comment se comporter en réponse à une notification lorsque notre navigateur est en arrière-plan.
 Pour gérer la notification en arrière-plan, nous devons enregistrer un  technicien de service  avec notre client frontal.
 Créez un fichier  client / public / firebase-messaging-sw.js  et entrez le contenu suivant:
 importScripts ('https: // www .gstatic.com / firebasejs / 7.14.2 / firebase-app.js ');
importScripts ('https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js');

const config = {
  apiKey: "API-KEY",
  authDomain: "AUTH-DOMAIN",
  databaseURL: "DATABASE-URL",
  projectId: "PROJECT-ID",
  storageBucket: "STORAGE-GUCKET",
  messagingSenderId: "MESSAGING-SENDER-ID",
  appId: "APP-ID"
};

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

messaging.setBackgroundMessageHandler (fonction (charge utile) {
  console.log ('[firebase-messaging-sw.js] Message d'arrière-plan reçu', charge utile);
  const notificationTitle = payload.data.title;
  const notificationOptions = {
    corps: payload.data.body,
    icône: '/firebase-logo.png'
  };
  return self.registration.showNotification (notificationTitle,
    notificationOptions);
});

self.addEventListener ('notificationclick', event => {
  console.log (événement)
  événement de retour;
}); 
 En haut du fichier, nous importons les bibliothèques  firebase-app  et  firebase-messaging  car nous n'avons besoin que de la fonction de messagerie. Ne vous inquiétez pas si la syntaxe d'importation est nouvelle. Il s'agit d'une syntaxe pour importer des scripts externes dans des fichiers de service worker. Assurez-vous que la version importée est la même que celle de votre  package.json . J'ai rencontré des problèmes que j'ai résolus en harmonisant les versions.
 Comme d'habitude, nous initialisons Firebase, puis nous invoquons le  setBackgroundMessageHandler en lui passant un rappel, qui reçoit la charge utile du message de notification. La partie restante du code spécifie comment le navigateur doit afficher la notification. Notez que nous pouvons également inclure une icône à afficher également.
 Nous pouvons également contrôler ce qui se passe lorsque nous cliquons sur la notification avec le gestionnaire d'événements  notificationclick .
 Créer un fichier  client /src/serviceWorker.js et entrez le contenu ci-dessous.
 export const registerServiceWorker = () => {
  if ('serviceWorker' dans le navigateur) {
    navigator.serviceWorker
      .register ('firebase-messaging-sw.js')
      .then (fonction (enregistrement) {
        // eslint-disable-next-line sans console
        console.log ('[SW]: SCOPE:', registration.scope);
        return registration.scope;
      })
      .catch (fonction (err) {
        return err;
      });
  }
}; 
 Cette fonction enregistre nos fichiers de service worker. Notez que nous avons remplacé la version plus détaillée générée par React. Nous vérifions d'abord si le  serviceWorker  est présent dans l'objet navigateur  . Il s'agit d'une simple prise en charge du navigateur. Si le navigateur prend en charge les travailleurs de service, nous enregistrons le fichier de travailleur de service que nous avons créé précédemment.
 Maintenant, ouvrez  client / src / index.js importez cette fonction et invoquez-la.
 # autres importations

importer {registerServiceWorker} à partir de './serviceWorker'

ReactDOM.render (
  ...
);

registerServiceWorker () 
 Si tout se passe bien, vous devriez voir l'étendue de l'agent de service connecté à votre console.
 Ouvrez  http: // localhost: 3000 / messaging  dans un deuxième navigateur et créez un message . Vous devriez voir apparaître la notification de l'autre navigateur.
 Avec cela, nous sommes arrivés à la fin de ce didacticiel. La branche correspondante dans mon référentiel est  06-handle-background-notification .
 Conclusion
 Dans cet article, nous avons découvert les différents types de messages de notification que nous pouvons envoyer avec Firebase Cloud Messaging ( FCM). API. Nous avons ensuite implémenté le type «message de données» sur le backend. Enfin, nous avons généré un jeton sur l'application cliente que nous avons utilisé pour recevoir des messages de notification déclenchés par l'application principale. Enfin, nous avons appris à écouter et à afficher les messages de notification lorsque le navigateur est en arrière-plan ou au premier plan.
 Je vous encourage à consulter les documents FCM pour en savoir plus.
 Ressources connexes
 Firebase site officiel
  Fireact Orji Chidi Matthew, GitHub
 « Firebase: App Success Made Simple », le blog npm
  Firebase Console 
  Firebase Admin Node.js SDK le blog npm
  WebpushConfig Firebase Docs
   sendMulticast  , Firebase Docs
  Service Worker Cookbook Mozilla
  Notification Firebase Docs
  Firebase Cloud Messaging Firebase Documentation
 “[ Comment configurer un projet de backend API Express avec PostgreSQL  », Chidi Orji
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)