Comment ajouter des notifications push à une application Web avec Firebase? +?

À mesure que les applications Web évoluent, il est de plus en plus courant de trouver des fonctionnalités que vous associeriez normalement à une application native dans une application Web. De nombreux sites envoient des notifications à leurs utilisateurs via le navigateur pour divers événements qui se produisent dans l'application Web.

Aujourd'hui, je vais vous montrer les étapes nécessaires, en détail, pour obtenir une telle fonctionnalité dans votre application Web à l'aide de Firebase .

Notifications avec Firebase

Firebase est une plate-forme qui offre divers services pour les applications mobiles et Web et aide les développeurs à créer rapidement des applications avec de nombreuses fonctionnalités.

Pour envoyer les notifications, nous utiliserons le service appelé Cloud Messaging, qui nous permet d'envoyer des messages à n'importe quel appareil à l'aide de requêtes HTTP.

Configuration du projet

Tout d'abord, vous devez avoir un compte Firebase et vous devrez créer un nouveau projet en son sein.

Pour cette configuration de démonstration, j'utiliserai un projet simple créé avec l'application create-react-app , mais vous pouvez utiliser le même code partout ailleurs qui utilise JavaScript.

En plus de cela, nous devons ajouter la bibliothèque Firebase au projet.

npm install firebase --save

Alors passons au codage!

Maintenant que nous avons fait notre configuration, nous pouvons commencer à coder le module qui sera en charge des notifications.

Créons un fichier dans le répertoire du projet appelé push-notification.js.

À l'intérieur du fichier, créons une fonction qui initialise Firebase et passe les clés de votre projet.

import firebase from 'firebase'; export const initializeFirebase = () => { firebase.initializeApp({ messagingSenderId: "your messagingSenderId" }); }

Eh bien, maintenant que nous avons la fonction, nous devons l'appeler.

À l'intérieur du point d'entrée de votre projet, importez la fonction et appelez-la.

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { initializeFirebase } from './push-notification'; ReactDOM.render(, document.getElementById('root')); initializeFirebase();
Vous pouvez trouver les clés de votre projet dans la console Firebase.

Travailleurs des services

Un service worker est un script que votre navigateur exécute en arrière-plan, distinct de la page Web, activant des fonctionnalités qui ne nécessitent pas de page Web ou d'interaction de l'utilisateur.

Pour recevoir l' événement onMessage , votre application a besoin d'un service worker. Par défaut, lorsque vous démarrez Firebase, il recherche un fichier appelé firebase-messaging-sw.js.

Mais si vous en avez déjà un et que vous souhaitez en profiter pour recevoir des notifications, vous pouvez spécifier lors du démarrage de Firebase quel service worker il utilisera. Par exemple:

export const inicializarFirebase = () => { firebase.initializeApp({ messagingSenderId: 'your messagingSenderId' }); navigator.serviceWorker .register('/my-sw.js') .then((registration) => { firebase.messaging().useServiceWorker(registration); }); }

Ce service worker importera essentiellement le script nécessaire pour afficher les notifications lorsque votre application est en arrière-plan.

Nous devons ajouter firebase-messaging-sw.jsà l'emplacement où vos fichiers sont servis. Comme j'utilise l'application create-react-app, je vais l'ajouter dans le dossier public avec le contenu suivant:

importScripts('//www.gstatic.com/firebasejs/4.8.1/firebase-app.js'); importScripts('//www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js'); firebase.initializeApp({ messagingSenderId: "your messagingSenderId again" }); const messaging = firebase.messaging();

Demander l'autorisation d'envoyer des notifications

Eh bien, tout le monde sait à quel point il est ennuyeux d'entrer sur le site et de demander l'autorisation d'envoyer des notifications. Alors faisons les choses d'une autre manière!

Laissez l'utilisateur choisir de recevoir ou non des notifications.

Tout d'abord, créons la fonction qui fera la demande et retournera le jeton de l'utilisateur.

Dans notre fichier push-notification.js, ajoutez la fonction:

export const askForPermissioToReceiveNotifications = async () => { try { const messaging = firebase.messaging(); await messaging.requestPermission(); const token = await messaging.getToken(); console.log('token do usuário:', token); return token; } catch (error) { console.error(error); } }

Nous devons appeler cette fonction de quelque part, donc je vais l'ajouter en un clic.

import React from 'react'; import { askForPermissioToReceiveNotifications } from './push-notification'; const NotificationButton = () => (  Clique aqui para receber notificações  ); export default NotificationButton;

D'accord, voyons cela fonctionner:

Envoi de notifications

Pour envoyer la notification, nous devons faire une demande à l'API Firebase l'informant du jeton que l'utilisateur recevra.

Dans les exemples ci-dessous, j'utilise Postman, mais vous pouvez le faire à partir de n'importe quel autre client REST.

Fondamentalement, nous devons faire une requête POST à ​​//fcm.googleapis.com/fcm/send en envoyant un JSON dans le corps de la requête.

Voici la structure du JSON qui sera envoyé:

{ "notification": { "title": "Firebase", "body": "Firebase is awesome", "click_action": "//localhost:3000/", "icon": "//url-to-an-icon/icon.png" }, "to": "USER TOKEN" }

Dans l'en-tête de la requête, nous devons passer la clé du serveur de notre projet dans Firebase et le type de contenu:

Content-Type: application/json Authorization: key=SERVER_KEY
La clé du serveur se trouve dans les paramètres du projet dans la console Firebase sous l'onglet Cloud Messaging.

Notifications en action

N'oubliez pas que les notifications n'apparaissent que lorsque votre application est réduite ou en arrière-plan.

C'est ainsi que nous envoyons une notification directe à un appareil.

Envoyer des notifications à un groupe d'utilisateurs

Eh bien, maintenant que nous avons vu comment envoyer une notification à un utilisateur, comment envoyer une notification à plusieurs utilisateurs à la fois?

To do this, Firebase has a feature called topic, where you insert multiple tokens for a specific topic, and you can send the same notification to all of them from a single request.

How to do this

We will basically send a POST request to the address //iid.googleapis.com/iid/v1/TOKEN/rel/topics/TOPIC_NAME,passing the topic name and the token in the URL.

Do not forget to pass in the header the same authorization that we used to send the notification.

Sending the notification to users subscribed to any topic is very similar to sending a notification to a single user. The difference is that we need to pass the topic name in the “to” attribute instead of the token.

See the example below:

{ "notification": { "title": "Firebase", "body": "Firebase topic message", "click_action": "//localhost:3000/", "icon": "//localhost:3000/icon.png" }, "to": "/topics/TOPIC_NAME" }

Conclusion

Thanks for reading this! I hope you now understand how to make use of push notifications. The repository with the demo code can be found here.

To get notified of my future posts, follow me on GitHub or Twitter.