Catégories
Astuces et Design

Les notifications push de Firebase réagissent – Smashing Magazine

A propos de l'auteur

Développeur frontend génial qui aime tout le codage. Je suis un amoureux de la musique chorale et je travaille pour la rendre plus accessible au monde, un téléchargement à la…
Plus à propos
Chidi

Dans ce didacticiel, nous allons apprendre à utiliser les notifications push Firebase dans le backend et le frontend. Nous allons configurer le système de notifications avec un serveur principal Express. Ensuite, nous écouterons les notifications dans une application frontale React.

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 les notifications sur le Web. Les plus connus 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 a une certaine familiarité avec l'écriture d'une application principale dans Express.js et / ou une certaine 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.

Alors, commençons.

Types de messages Firebase

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

  1. Un environnement de confiance tel 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.

Nous nous occuperons de l'article 1 dans notre application back-end express et de l'article 2 dans notre application front-end React.

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

  1. Les 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 gérés par le navigateur sur le Web. Ils peuvent également prendre une option data charge utile, 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 mettre en place 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 ici pour commencer.

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

Cliquer 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 continuer et attendez quelques minutes que le projet soit créé. C’est généralement moins d’une minute. Cliquez ensuite sur continuer 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 nous pouvons obtenir les informations d'identification nécessaires pour travailler avec les deux.

L'extrémité avant

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

Ajouter Firebase à un projet Web
Ajoutez Firebase à un projet Web. (Grand aperçu)

Donnez à votre application un surnom. Pas besoin de configurer l'hébergement Firebase. Cliquer sur S'inscrire 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.

Informations d'identification de l'application Web Firebase
Informations d'identification de l'application Web Firebase. (Grand aperçu)

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 depuis le backend. Sur la page de votre projet, cliquez sur le équipement icône à 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 JSON fichier avec les informations d'identification de votre compte. Assurez-vous de conserver votre fichier de compte de service dans un endroit sûr.

Étapes pour créer des informations d'identification de compte de service
Étapes pour créer des informations d'identification de compte de service. (Grand aperçu)

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'un recyclage.

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.

Commencer

Pour vous faciliter la tâche dans ce didacticiel, j'ai configuré un projet sur Github avec un serveur et un client. Habituellement, vous aurez respectivement un référentiel pour votre backend et votre frontend. Mais je les ai regroupé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.

  1. Fork le repo et consultez le 01-get-started branche.
  2. Ouvrez le projet dans l'éditeur de code de votre choix et observez le contenu.
  3. À la racine du projet, nous avons deux dossiers, client/ et server/. Il y a aussi un .editorconfig déposer un .gitignore, et un README.md.
  4. Le dossier client contient une application React. C'est là que nous écouterons les notifications.
  5. 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 construit dans mon autre article Comment configurer un projet backend d'API express avec PostgreSQL.
  6. Ouvrez un terminal et accédez au client/ dossier. Exécutez le yarn install pour installer les dépendances du projet. Exécutez ensuite yarn start pour démarrer le projet. Visite http://localhost:3000 pour voir l'application en direct.
  7. Créer un .env fichier à l'intérieur du server/ dossier 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 le Connecting The PostgreSQL Database And Writing A Model section de mon article lié. Vous devez également fournir PORT variable d'environnement puisque React s'exécute déjà sur le port 3000. Je mets PORT=3001 dans mon .env fichier.
  8. Ouvrez un terminal séparé et accédez au server/ dossier. Exécutez le yarn install pour installer les dépendances du projet. Courir yarn runQuery pour créer la base de données du projet. Courir yarn startdev pour démarrer le projet. Visitez http: // localhost: 3001 / v1 / messages et vous devriez voir certains messages au format JSON.
Serveurs frontaux et principaux en cours d'exécution
Serveurs frontaux et principaux en cours d'exécution. (Grand aperçu)
Réaction de l'application frontale en cours d'exécution
Réaction de l'application frontale en cours d'exécution. (Grand aperçu)
Application backend express en cours d'exécution
Application backend express en cours d'exécution. (Grand aperçu)

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

L'envoi de notifications push avec FCM sur le backend nécessite 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 server/ dossier et installez le SDK Admin.

# install firebase admin SDK
yarn add firebase-admin

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

GOOGLE_APPLICATION_CREDENTIALS="path-to-your-service-account-json-file"

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 server/ dossier et ajoutez-le à votre .gitignore.

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

Ouvert server/src/settings.js et exporter le chemin d'accès au fichier des informations d'identification de l'application.

# export the service account key file path
export const googleApplicationCredentials = process.env.GOOGLE_APPLICATION_CREDENTIALS;

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

import admin from 'firebase-admin';

import { googleApplicationCredentials } from './settings'

const serviceAccount = require(googleApplicationCredentials);

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: 'your-database-url-here'
});

export const messaging = admin.messaging();

Nous importons le module d'administration de 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 le chemin d'accès au fichier de clé de mon compte de service directement, 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.

import { messaging } from './firebaseInit'
console.log(messaging)

Nous importons l'instance de messagerie et l'enregistrons 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é.

Journal de la console de la fonction de messagerie
Journal de la console de la fonction de messagerie. (Grand aperçu)

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 correctement configuré 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 plateformes, de sorte que notre notification pourrait également être traitée par des appareils mobiles.

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

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

import { messaging } from './firebaseInit';

export const sendNotificationToClient = (tokens, data) => {
  // Send a message to the devices corresponding to the provided
  // registration tokens.
  messaging
    .sendMulticast({ tokens, data })
    .then(response => {
      // Response is an object of the form { responses: () }
      const successes = response.responses.filter(r => r.success === true)
        .length;
      const failures = response.responses.filter(r => r.success === false)
        .length;
      console.log(
        'Notifications sent:',
        `${successes} successful, ${failures} failed`
      );
    })
    .catch(error => {
      console.log('Error sending message:', error);
    });
};

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.

L'instance de messagerie sendMulticast retourne 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.

Ouvert server/src/controllers/message.js et mettre à jour le addMessage fonction.

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

export const addMessage = async (req, res) => {
  const { name, message } = req.body;
  const columns = 'name, message';
  const values = `'${name}', '${message}'`;
  try {
    const data = await messagesModel.insertWithReturn(columns, values);
    const tokens = ();
    const notificationData = {
      title: 'New message',
      body: message,
    };
    sendNotificationToClient(tokens, 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 /messages point final. Une fois le message créé avec succès, une notification est envoyée par le sendNotificationToClient fonction suivie de la réponse au client. La seule pièce manquante dans ce code est la tokens auquel 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 back-end. 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

Jetons un coup d'œil aux principaux composants de notre application React frontale.

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

# library imports

import { Messaging } from './Messaging';

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

const App = () => {
  return (
    
      
      
        Firebase notifictations with React and Express
      
      
        
          
            
          
        
      
    
  );
};
export default App;

Il s'agit d'un composant React 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 le axios bibliothèque. Tout ce qui est important se passe à l'intérieur du composant. Voyons maintenant son contenu.

S'ouvrir client/src/Messaging.js et inspecter 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);
    });
  }, ());

  return (
    
      {/* form goes here */}
      

Messages

{requesting ? ( Loading... ) : ( <> {messages.map((m, index) => { const { name, message } = m; return (
{name}: {message}
); })} )}
); };

Nous avons deux variables d'état, messages et requesting. messages représenter la liste des messages de notre base de données et requesting sert à changer l'état de notre chargeur. Nous avons un React.useEffect bloquer où nous faisons notre appel API à la /messages point final et définir les données retournées dans notre messages Etat.

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

 {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      actions.setSubmitting(false);
      toast.success("Submitted succesfully");
    }, 1000);
  }}
>
  {(prop) => {
    const { handleSubmit, handleChange, isSubmitting } = prop;
    return (
      <>
        
          
            Name
          
          
        
        
          
            Message
          
          
        
        {isSubmitting ? (
          
        ) : (
          
        )}
      
    );
  }}

Nous utilisons le Formik bibliothèque pour gérer notre formulaire. Nous passons le composant un initialvalues accessoires, un onSubmit prop et le composant de formulaire que nous voulons rendre. En retour, nous récupérons quelques 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 boolean 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 le onSubmit méthode plus tard.

Implémentons maintenant la méthode qui demandera la permission d'un navigateur et affectons-lui un jeton.

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

# install firebase client library
yarn add firebase

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

import firebase from 'firebase/app';
import 'firebase/messaging';

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

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

// next block of code goes here

Les documents Firebase indiquent que:

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

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 le config objet. Nous initialisons ensuite Firebase et exportons la fonction de messagerie. Ajoutons le dernier bloc de code.

export const requestFirebaseNotificationPermission = () =>
  new Promise((resolve, reject) => {
    messaging
      .requestPermission()
      .then(() => messaging.getToken())
      .then((firebaseToken) => {
        resolve(firebaseToken);
      })
      .catch((err) => {
        reject(err);
      });
  });

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

le requestFirebaseNotificationPermission demande l'autorisation du navigateur pour envoyer des notifications et résout avec un jeton si la demande est accepté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.

le onMessageListener La fonction 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.

S'ouvrir client/src/App.js et importez le requestFirebaseNotificationPermission fonction.

import { requestFirebaseNotificationPermission } from './firebaseInit'

Ensuite, à l'intérieur de la fonction App, ajoutez le code ci-dessous avant l'instruction return.

requestFirebaseNotificationPermission()
  .then((firebaseToken) => {
    // eslint-disable-next-line no-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, lancez 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 enregistré dans la console.

Demande d'application pour afficher les notifications
Demande d'application pour afficher les notifications. (Grand aperçu)

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.

S'ouvrir client/src/Messaging.js et remplacer le onSubmit fonction de notre formulaire avec le code ci-dessous.

onSubmit={(values, actions) => {
  axios
    .post("/messages", values)
    .then((resp) => {
      setMessages(resp.data.messages.concat(messages));
      actions.setSubmitting(false);
      toast.success("Submitted succesfully");
    })
    .catch((err) => {
      console.log(err);
      toast.error("There was an error saving the message");
    });
}}

Nous faisons un post demande au /messages point de terminaison pour créer un nouveau message. Si la demande aboutit, nous prenons les données retournées et les mettons en haut de la messages liste. Nous affichons également un toast de réussite.

Essayons de 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 sur laquelle nous envoyons la notification.

# this line will throw an error if tokens is an empty array comment it out temporarily
// 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',
    );

Ouvert client/src/Messaging.js, importez le onMessageListener et l'invoquer juste sous la useEffect bloquer. N'importe quelle position au sein de la fonction est correcte tant qu'elle est return déclaration.

import { onMessageListener } from './firebaseInit';

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

  onMessageListener()
    .then((payload) => {
      const { title, body } = payload.data;
      toast.info(`${title}; ${body}`);
    })
    .catch((err) => {
      toast.error(JSON.stringify(err));
    });

L'auditeur renvoie une promesse qui résout la 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.

Travaux? C'est génial.

Si vous rencontrez des problèmes, vous pouvez toujours comparer avec mon repo. La branche correspondante à ce stade est 05-listen-to-notification.

Il y a juste un é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 sur les 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 notification objet dans notre charge utile de notification, le navigateur s'en chargera de lui-même. 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 auprès de notre client frontal.

Créer 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-BUCKET",
  messagingSenderId: "MESSAGING-SENDER-ID",
  appId: "APP-ID"
};

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

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('(firebase-messaging-sw.js) Received background message ', payload);
  const notificationTitle = payload.data.title;
  const notificationOptions = {
    body: payload.data.body,
    icon: '/firebase-logo.png'
  };
  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

self.addEventListener('notificationclick', event => {
  console.log(event)
  return event;
});

En haut du fichier, nous importons le firebase-app et le firebase-messaging bibliothèques car nous avons seulement besoin 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 notificationclick gestionnaire d'événements.

Créer un fichier client/src/serviceWorker.js et entrez le contenu ci-dessous.

export const registerServiceWorker = () => {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('firebase-messaging-sw.js')
      .then(function (registration) {
        // eslint-disable-next-line no-console
        console.log('(SW): SCOPE: ', registration.scope);
        return registration.scope;
      })
      .catch(function (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 le navigator objet. 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.

Ouvert client/src/index.js, importez cette fonction et invoquez-la.

# other imports

import { registerServiceWorker } from './serviceWorker'

ReactDOM.render(
  ...
);

registerServiceWorker()

Si tout se passe bien, vous devriez voir la portée du technicien de service connectée à votre console.

Ouvrez http: // localhost: 3000 / messagerie dans un deuxième navigateur et créez un message. Vous devriez voir apparaître la notification de l'autre navigateur.

Notifications d'arrière-plan et de premier plan
Notifications en arrière-plan et au premier plan. (Grand aperçu)

Avec cela, nous sommes arrivés à la fin de ce tutoriel. 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 la 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 de la FCM pour en savoir plus.

  • Firebase, site officiel
  • Fireact, Orji Chidi Matthew, GitHub
  • «Firebase: le succès des applications simplifiées», le blog npm
  • Console Firebase
  • SDK Admin Node.js de Firebase, le blog de npm
  • WebpushConfig, Firebase Docs
  • sendMulticast, Firebase Docs
  • Service Cooker Cookbook, Mozilla
  • Notification, documents Firebase
  • Messagerie cloud Firebase, documentation Firebase
  • «Comment configurer un projet backend d'API Express avec PostgreSQL», Chidi Orji
Smashing Editorial(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *