Comment implémenter les notifications Web Push dans votre application Node / React

Les notifications push sont largement utilisées dans les applications de navigateur et les applications mobiles. Vous n'avez aucune chance de ne pas les affronter en tant qu'utilisateur. Le but de cet article est de fournir une base solide pour les notifications Web push utilisant des technologies courantes: Node.js & Express sur le backend et React.js (Create React App) sur le front-end.

Commençons par décrire le cycle de vie généralisé des notifications Web push:

  1. Une application client installe un agent de service. C'est un script fonctionnant de manière autonome sur votre navigateur qui prend de plus en plus de fonctions ces dernières années. Ainsi, même si l'onglet avec l'application n'est pas actuellement ouvert, le technicien de service acceptera et affichera une notification.
  2. Un utilisateur reçoit une demande pour afficher des notifications.
  3. Après avoir reçu l'autorisation d'afficher les notifications, le navigateur transmet des informations d'identification et d'autres informations de service à l'application. Ces données doivent être envoyées au serveur et stockées dans la base de données.
  4. À l'aide des informations d'identification précédemment reçues, le serveur effectue une demande au fournisseur de services, qui à son tour envoie une notification au prestataire de services.
  5. Le technicien reçoit une notification et la montre.

Nous allons maintenant implémenter tous les composants nécessaires. Vous pouvez reproduire les étapes décrites ci-dessous ou utiliser le passe-partout prêt, dont les liens se trouvent à la fin de l'article.

Le capitaine essayait de résoudre le problème pendant mon absence.

Étape 1: Démarrez l’application Node.js et obtenez les clés VAPID.

Nous initialisons notre application principale avec toutes les dépendances nécessaires avec la commande:
fils ajouter express dotenv analyseur de corps cors web
Afin de sécuriser un canal de transmission de notifications des interférences extérieures, des clés dites VAPID sont utilisées. La clé publique est envoyée à un service push au moment de l'abonnement. À l'avenir, votre application backend utilisera ces clés comme mesure d'authentification lors de l'envoi d'une notification via le service Push. Vous pouvez générer des clés VAPID à l'aide de la commande:
./node_modules/.bin/web-push generate-vapid-keys
Maintenant que nous avons quelques clés, nous allons passer à la création d'une application client et passer en revue le scénario complet: de l'abonnement à l'envoi d'une notification.

Étape 2: Création d'une application React et d'un service d'assistance.

En tant qu'interface, nous utiliserons une application React, à savoir, ce sera l'ARC. C'est un moyen assez populaire de créer des applications d'une seule page, alors à titre d'illustration, je l'ai préféré à JS vanilla. D'autre part, l'ARC a quelques pièges en termes d'utilisation d'un travailleur de service, qui seront discutés ci-dessous.

Nous initialisons donc notre application dans le nouveau dossier web-push-front avec la commande suivante:
fils créer react-app web-push-front
Vous pouvez vérifier le fonctionnement de l'application en exécutant la commande start start et en visitant http: // localhost: 3000 /

Par défaut, l'ARC fonctionne de manière à ce que le technicien de service soit absent en mode dev et que tout technicien de service précédemment installé soit remplacé par un mannequin.
Pour commencer, remplacez dans src / index.js la ligne serviceWorker.unregister (); par serviceWorker.register () ;.

Ensuite, nous modifions la fonction register () dans le fichier src / serviceWorker.js en supprimant la condition:
process.env.NODE_ENV === 'production'
de sorte que le technicien de service est chargé non seulement en mode prod.

Par défaut, un fichier factice généré à la volée est attribué au mode de développement à l'adresse http: // localhost: 3000 / service-worker.js. Pour contourner ce problème, changez le nom du fichier qui est donné dans dev-mode en custom-sw.js.

const swFileName = process.env.NODE_ENV === 'production'
  ? 'service-worker.js'
  : 'custom-sw.js'
const swUrl = `$ {process.env.PUBLIC_URL} / $ {swFileName}`;

Créons maintenant un agent de service dans le dossier public qui écoutera l’événement push et affichera les notifications.

Maintenant, ouvrez DevTools avec l'option Mise à jour lors du rechargement activée ou son équivalent dans votre navigateur préféré et rechargez la page. En conséquence, custom-sw.js devrait être installé.
Vous pouvez vérifier son fonctionnement en envoyant une notification locale de test avec un tel contenu:
{"Corps": "devbody", "titre": "devtest"}

Étape 3: abonnez-vous aux notifications.

Tout d'abord, nous créons un fichier .env, dans lequel nous complétons l'URL de notre backend et la clé publique VAPID générée précédemment.

Maintenant, implémentez tout le script pour vous abonner aux notifications dans le fichier src / subscription.js

Analysons-le en détail. La fonction principale subscribeUser () est conçue pour gérer le maximum de situations possibles: absence de prise en charge des notifications push par un navigateur, interdiction d'afficher les notifications par un utilisateur, etc. L'abonnement lui-même est créé en appelant registration.pushManager.subscribe () où passer notre clé publique VAPID. Avant qu'il ait besoin d'être converti, nous allons donc utiliser l'implémentation de la fonction urlBase64ToUint8Array () du tutoriel de Google. En cas d'abonnement réussi ou s'il existe un abonnement existant, nous recevons des informations d'identification. Chaque navigateur implémente l'envoi de notifications push via son service. En utilisant Google Chrome à titre d'exemple, les informations d'identification résultantes se présenteront comme suit:

{
  point final: 'https://fcm.googleapis.com/fcm/send/chhjHsBv3DU:APA91bGJCZnXCfkGeAa2nlo5n3fkP4aNw1J7Y34s9neghg0KowAKJcUqIbm97TuuASOD8VD4CpWNpVrKaX3E1f-rwLaINlKOCwGUFCUtZG9qpYNBT3edlEF0mznLK3gJN3rp7XwJAc2y',
  expirationTime: null,
  clés: {
    p256dh: 'BBe1YEEq3YuUwYxekAYug5xdjTg18IUkvdTLjRjshN4lnbytK-b7_3iAbYEpgjsFRvboIPsc3h_3wWM8TCRisSc',
    auth: 'uQq5Eyjzvwv66ddqwXa1PA'
  }
}

Ensuite, envoyez cet objet au serveur avec une demande POST typique avec l'appel de sendSubscription ().
Enfin, importez la fonction subscribeUser () de subscription.js dans index.js et ajoutez son appel à la toute fin du fichier.

Étape 4: Obtenir les informations d'identification du côté serveur et envoyer une notification.

Il est temps d'insuffler de la vie dans le modèle Node-application.
Pour commencer, nous créons un fichier .env dans lequel nous spécifions une paire de clés VAPID ainsi que votre adresse de contact en tant qu’expéditeur des notifications.

Ensuite, pour plus de simplicité, implémentons toute la logique de l’application dorsale dans un seul fichier index.js.

Les choses qui se passent là-bas:

  1. Initialisez le cadre Express.
  2. Utilisez env-config.
  3. Désactiver la politique de sécurité CORS. Soyez prudent et accordez-le consciemment à la production.
  4. Appliquer un analyseur de corps.
  5. Le module Web Push est initialisé avec des clés VAPID et une adresse de contact.
  6. Testez un point de terminaison GET pour vérifier que le serveur fonctionne.
  7. Un point de terminaison acceptant une demande avec des informations d'identification. Dans une application réelle, ils doivent être enregistrés dans une base de données. Dans notre exemple, nous les utilisons pour envoyer immédiatement une notification.

Donc, nous démarrons le serveur avec la commande node index.js et allons à http: // localhost: 9000 pour nous assurer que cela fonctionne.
Les deux applications sont maintenant prêtes et vous pouvez rouvrir la partie client et afficher une fenêtre contextuelle vous demandant la permission de notifier. Si vous acceptez, vous pouvez voir comment une demande avec des informations d'identification est envoyée au serveur et après qu'une notification push arrive. Toutes nos félicitations!

Étape supplémentaire: attendez, qu'en est-il du mode de production?

Dans ce cas, Create React App compile les fichiers du dossier de construction et un agent de service par défaut qui y est placé contient des informations utiles pour les applications modernes. Si nous décidons de les conserver et d'ajouter simplement notre fonctionnalité push, il est nécessaire de modifier le processus de construction. Il existe une boîte de travail utilisée pour la construction de personnel de service dans l'ARC. Et il n’existe pas de méthode intégrée pour le modifier, même si votre objectif est simplement d’ajouter du code personnalisé. Je considère ce paquet comme le moyen le plus pratique de le faire si vous n'êtes pas prêt à vous plonger activement dans la recherche sur la configuration de Workbox dans le contexte de l'ARC.

Au début, ajoutez une nouvelle dépendance:
fils ajouter cra-append-sw
Ensuite, nous devons étendre le script de construction de package.json en y ajoutant une nouvelle commande qui est exécutée après le processus principal afin que la ligne complète ressemble à ceci:
react-scripts build && cra-append-sw --skip-compile ./public/custom-sw.js

En conséquence, le contenu de custom-sw.js sera ajouté à la toute fin du fichier build / service-worker.js.

Et enfin, des conseils généraux sur la stratégie d'affichage d'une demande d'abonnement. Si un utilisateur refuse une telle demande, vous ne disposerez pas d'une seconde chance pour proposer un abonnement tant qu'il n'aura pas annulé l'interdiction dans les paramètres du navigateur (et il est peu probable qu'il veuille le faire). Utilisez donc cette occasion judicieusement pour choisir le bon moment: ce n'est certainement pas le cas lorsque l'internaute accède à votre site pour la première fois. Si vous souhaitez pouvoir ennuyer un utilisateur plusieurs fois, affichez d'abord un dialogue personnalisé avec l'offre de souscription. Et seulement si un utilisateur accepte, montrez le vrai.

Si quelque chose ne va pas, vous pouvez vérifier avec le passe-partout:
Application de nœud: https://github.com/seladir/demo-webpush-node
React app: https://github.com/seladir/demo-webpush-react