Comment intégrer les notifications push dans votre PWA
Publié: 2021-04-28Table des matières
Dans notre tutoriel d'aujourd'hui, nous allons intégrer les notifications push dans une PWA en utilisant Firebase, ou plus précisément, en utilisant la fonctionnalité Cloud Messaging qui permet l'envoi de messages à l'aide de requêtes HTTPS.
Applications Web progressives et notifications push
Étant donné que la Progressive Web App est celle d'un mouvement en constante évolution, il n'est pas surprenant de voir que la technologie elle-même est devenue à égalité (fonctionnellement) avec son homologue d'application native.
Lecture recommandée : PWA vs Native : qu'est-ce qui vous convient le mieux ?
Les déclencheurs de notification permettent aux développeurs de programmer des notifications, même si l'appareil de l'utilisateur est en mode avion.
Jon Krafcik, Sommet des développeurs Chrome 2019
Avec tous ces changements radicaux en place, ce serait un gaspillage de ne pas en profiter pour générer encore plus de revenus pour votre PWA. Et ce n'est même pas quelque chose de trop compliqué car vous pouvez facilement configurer votre propre fonction de notification push à l'aide de ce didacticiel.
Lecture recommandée : 9 fonctionnalités indispensables d'une application Web progressive (PWA) pour le commerce électronique
Comment intégrer les notifications push dans votre PWA
Dans notre tutoriel d'aujourd'hui, nous allons intégrer les notifications push dans une PWA à l'aide de Firebase , en particulier la fonctionnalité Cloud Messaging qui permet l'envoi de messages à l'aide de requêtes HTTPS.
Conditions préalables
- Un compte Firebase (puisque vous allez créer un projet dans Firebase)
- Une application Web progressive. Pour une démonstration simplifiée, nous utiliserons un create-react-app qui est un PWA de base qui peut être créé à l'aide d'une commande
Étape 1 : Créer une PWA de base
Puisque nous allons créer une PWA de base en utilisant create-react-app, téléchargeons d'abord NodeJS. Une fois l'installation de NodeJS terminée, ouvrez l'invite de commande NodeJS et exécutez les commandes suivantes.
Pour créer une application React simple dans votre répertoire spécifié :
npx create-react-app votre-répertoire-pwa
Remplacez le répertoire de travail actuel par votre application React nouvellement créée :
cd votre-répertoire-pwa
Ajoutez la bibliothèque JavaScript Firebase au projet :
npm install firebase --save
Étape 2 : Créez votre push-notification.js
L'étape suivante consiste à créer le module qui sera en charge de tous vos traitements de notification. Dans <your-pwa-directory>\src , créez un fichier nommé push-notification.js .
Commençons par créer une fonction qui initialise Firebase et transmet les clés de votre projet. Vous pouvez trouver les clés de votre projet en allant dans Firebase > Project Overview → Project Settings et cliquez sur cette icône :
Cela vous dirigera vers une autre page contenant le SDK Firebase pour votre PWA :
Maintenant que nous avons les clés de notre projet, ajoutons le code suivant dans votre push-notification.js .
importer la base de feu à partir de 'firebase' ;
export const initializeFirebase = () => {
firebase.initializeApp({
Clé API : "XXXXXXXXXXXXX",
authDomain : "XXXXXXXXXXXXX",
URL de la base de données : "XXXXXXXXXXXXX",
ID de projet : "XXXXXXXXXXXXX",
compartiment de stockage : "XXXXXXXXXXXXX",
messageSenderId : "XXXXXXXXXXXXX",
ID d'application : "XXXXXXXXXXXXX"
});
} Avec cela, vous avez créé la fonction en charge de tout le traitement de vos notifications, vous devez maintenant l'importer et l'appeler. Modifiez votre index.js comme suit :
importer React depuis 'react' ;
importer ReactDOM depuis 'react-dom' ;
importer './index.css' ;
importer l'application depuis './App' ;
importer * en tant que serviceWorkerRegistration depuis './serviceWorkerRegistration' ;
importer reportWebVitals depuis './reportWebVitals' ;
importer la base de feu à partir de 'firebase' ;
import { initializeFirebase } depuis './push-notification' ;
ReactDOM.render(<App />, document.getElementById('root'));
initializeFirebase();Étape 3 : Créer un agent de service
Service Workers est le nom de la technologie derrière une application Web progressive, qui alimente sa capacité hors ligne, les notifications push et la mise en cache des ressources.
SimiCart, tout ce que vous devez savoir sur les applications Web progressives
Un agent de service est requis pour la réception de l'événement onMessage et, par conséquent, pour permettre l'envoi de notifications à l'appareil de l'utilisateur. Par défaut, Firebase recherche automatiquement un fichier appelé firebase-messaging-sw.js .
Ajoutons firebase-messaging-sw.js au répertoire où vos fichiers sont servis. Puisque le nôtre est un projet create-react create-react-app , ce firebase-messaging-sw.js ira dans notre dossier public :
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
Clé API : "XXXXXXXXXXXXX",
authDomain : "XXXXXXXXXXXXX",
URL de la base de données : "XXXXXXXXXXXXX",
ID de projet : "XXXXXXXXXXXXX",
compartiment de stockage : "XXXXXXXXXXXXX",
messageSenderId : "XXXXXXXXXXXXX",
ID d'application : "XXXXXXXXXXXXX"
});
const messagerie = firebase.messaging();Si vous n'avez pas encore entendu parler de PWA Service Worker, nous vous proposons un article exclusif pour tout savoir sur cette technologie étonnante.
Étape 4 : demander les autorisations des utilisateurs pour envoyer des notifications
C'est l'ère de la vie privée, et vous ne voulez pas ennuyer vos utilisateurs en envoyant des notifications indésirables et non autorisées !
Pour demander la permission de votre utilisateur, ajoutez simplement ceci à votre push-notification.js :
importer la base de feu à partir de 'firebase' ;
export const initializeFirebase = () => {
firebase.initializeApp({
Clé API : "XXXXXXXXXXXXX",
authDomain : "XXXXXXXXXXXXX",
URL de la base de données : "XXXXXXXXXXXXX",
ID de projet : "XXXXXXXXXXXXX",
compartiment de stockage : "XXXXXXXXXXXXX",
messageSenderId : "XXXXXXXXXXXXX",
ID d'application : "XXXXXXXXXXXXX"
});
}
export const askForPermissionToReceiveNotifications = async () => {
essayer {
const messagerie = firebase.messaging();
attendre la messagerie.requestPermission();
jeton const = attendre la messagerie.getToken();
console.log('Votre jeton est :', jeton);
retourner le jeton ;
} capture (erreur) {
console.error(error);
}
} Et puisque cette fonction devra être appelée de quelque part, nous allons donc l'ajouter en un clic. Modifiez le fichier app.js dans votre répertoire /src/ comme suit :
importer le logo depuis './logo.svg' ;
importer './App.css' ;
import { askForPermissionToReceiveNotifications } depuis './push-notification' ;
fonction App() {
revenir (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Modifiez <code>src/App.js</code> et enregistrez pour recharger.
</p>
<a
className="App-link"
href="https://reactjs.org"
cible="_blank"
rel="noopener noreferrer"
>
Apprendre Réagir
</a>
<bouton onClick={askForPermissionToReceiveNotifications} >
Cliquez pour recevoir des notifications
</bouton>
</header>
</div>
);
}
exporter l'application par défaut ;Maintenant, lançons notre projet et vous devriez voir un bouton Cliquez pour recevoir des notifications comme ceci :
Cliquez sur le bouton et vous devriez voir une fenêtre vous demandant votre permission :
Cliquez sur Autoriser et vérifiez la console de votre navigateur. Vous devriez voir un message vous informant de votre jeton :
Maintenant, enregistrez ce jeton ailleurs car vous en aurez besoin à l'étape suivante.
Étape 5 : Envoyer des notifications push avec Postman
Dans les étapes suivantes, nous utiliserons Postman pour envoyer des notifications à l'aide du service Cloud Messaging de Firebase.
Dans Postman, créez une requête POST avec les informations suivantes :
- URL de demande : https://fcm.googleapis.com/fcm/send
- Headers : Dans les headers de votre requête POST, vous aurez besoin d'avoir les clés suivantes :
Autorisation : clé= SERVER_KEY
Type de contenu : application/json
Remarques : SERVER_KEY se trouve sous l'onglet Cloud Messaging dans vos paramètres Firebase
- Body : Remplissez le corps de votre requête POST avec le code suivant :
{
"notification": {
"title": "SimiCart",
"body": "Tester la notification push",
"click_action": "http://localhost:3000/",
"icon": "https://i.imgur.com/5zO5cce.png"
}
"à": "USER_TOKEN"
} Remplacez USER_TOKEN par le jeton que vous avez obtenu (en cliquant sur le bouton Cliquez pour recevoir des notifications ) à l'étape 4. N'oubliez pas de choisir Type de corps brut et JSON .
Cliquez maintenant sur Envoyer et vous devriez voir une notification apparaître dans votre coin inférieur droit :
Remarques : Ces notifications n'apparaissent que lorsque l'application est en arrière-plan ou réduite.
Toutes nos félicitations! Votre PWA peut désormais envoyer des notifications !
Conclusion
Nous espérons qu'après ce guide, vous pourrez désormais configurer en toute confiance votre propre fonction de notification push. Étant une nouvelle technologie, les applications Web progressives sont certainement une chose compliquée pour les utilisateurs non férus de technologie, c'est pourquoi il existe des fournisseurs de solutions facilement disponibles tels que SimiCart qui peuvent répondre à tous vos besoins grâce à nos années d'expérience dans les PWA.