Dans le passé, vous avez peut-être utilisé des notifications dans votre programme en utilisant quelque chose comme PubNub ou pusher ou un autre service tiers.
Mais ce module, web-push, nous permet de le faire sans l’aide de l’un de ces services tiers.

Avez-vous déjà entendu parler de service worker? Si vous ne connaissez pas ce qu’est une progressive web apps, il y a peu de chance que le terme de service worker vous parle

Définition d’un service worker

Les service workers jouent essentiellement le rôle de serveurs proxy placés entre une application web, et le navigateur ou le réseau (lorsque disponible.) Ils sont destinés (entre autres choses) à permettre la création d’expériences de navigation déconnectée efficaces, en interceptant les requêtes réseau et en effectuant des actions appropriées selon que le réseau est disponible et que des ressources mises à jour sont à disposition sur le serveur. Ils permettront aussi d’accéder aux APIs de notifications du serveur (push) et de synchronisation en arrière-plan.

service worker

Plus d’information sur son fonctionnement sur :

Le service worker fonctionne avec les dernières versions de Chrome et Firefox, je ne crois pas que Edge le support encore. Mais ce n’est pas grave puisque Edge va bientôt changer son moteur pour Chromium.

Module web-push

Commençons un nouveau projet en installant les dépendances

Terminal
1npm init -y
2npm i web-push express body-parser

Créons un fichier index.js

index.js
1const express = require("express");
2const webpush = require("web-push");
3const bodyParser = require("body-parser");
4const path = require("path");
5const app = express();
6app.use(bodyParser.json());

Nous avons besoin de générer des clés, pour se faire:

Terminal
1./node_modules/.bin/web-push generate-vapid-keys

ou

Terminal
1npm install web-push -g
2web-push generate-vapid-keys

Vous obtenez une paire de clés privées/public comme ceux-ci:

=======================================
Public Key:
BCaNVf9IEdCkrBvkwk5P48lnc8LlbFlW1VlmEB3D3BjDll1jTIZ6wCMPDF_360Veqe_lhasd7PmhBUKrSGsEOpQ
Private Key:
CdYF_enPzI0y9n1bHdy2NQqmtdvaEhJkKpI6IpPHaAQ
=======================================

On va les utiliser tout de suite

index.js
 1/* index.js */
 2...
 3const publicVapidKey =
 4  "BCaNVf9IEdCkrBvkwk5P48lnc8LlbFlW1VlmEB3D3BjDll1jTIZ6wCMPDF_360Veqe_lhasd7PmhBUKrSGsEOpQ";
 5const privateVapidKey = "CdYF_enPzI0y9n1bHdy2NQqmtdvaEhJkKpI6IpPHaAQ";
 6webpush.setVapidDetails(
 7  "mailto:test@test.com",
 8  publicVapidKey,
 9  privateVapidKey
10);
11// Subscribe Route
12app.post("/subscribe", (req, res) => {
13  // Get pushSubscription object
14  const subscription = req.body;
15  // Send 201 - resource created
16  res.status(201).json({});
17  // Create payload
18  const payload = JSON.stringify({ title: "Push Test" });
19  // Pass object into sendNotification
20  webpush
21    .sendNotification(subscription, payload)
22    .catch(err => console.error(err));
23});
24const port = 5000;
25app.listen(port, () => console.log(`Server started on port ${port}`));

Il nous reste a configurer un dossier statique, en ajoutant la ligne suivante dans notre fichier index.js

index.js
1// Set static path
2app.use(express.static(path.join(__dirname, "client")));

Redémarrer le serveur.

Créer le dossier client

client/index.html
 1<!DOCTYPE html>
 2<html lang="en">
 3
 4<head>
 5  <meta charset="UTF-8">
 6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8  <title>Push Notifications Using Node</title>
 9</head>
10
11<body>
12  <h1>Push Notifications Using Node</h1>
13
14  <script src="client.js"></script>
15</body>
16
17</html>

client/client.js
 1const publicVapidKey =
 2  "BCaNVf9IEdCkrBvkwk5P48lnc8LlbFlW1VlmEB3D3BjDll1jTIZ6wCMPDF_360Veqe_lhasd7PmhBUKrSGsEOpQ";
 3// Check for service worker
 4if ("serviceWorker" in navigator) {
 5  send().catch(err => console.error(err));
 6}
 7// Register Service Worker, Register Push, Send Push
 8async function send() {
 9  // Register Service Worker
10  console.log("Registering service worker...");
11  const register = await navigator.serviceWorker.register("/worker.js", {
12    scope: "/"
13  });
14  console.log("Service Worker Registered...");
15  // Register Push
16  console.log("Registering Push...");
17  const subscription = await register.pushManager.subscribe({
18    userVisibleOnly: true,
19    applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
20  });
21  console.log("Push Registered...");
22  // Send Push Notification
23  console.log("Sending Push...");
24  await fetch("/subscribe", {
25    method: "POST",
26    body: JSON.stringify(subscription),
27    headers: {
28      "content-type": "application/json"
29    }
30  });
31  console.log("Push Sent...");
32}
33function urlBase64ToUint8Array(base64String) {
34  const padding = "=".repeat((4 - base64String.length % 4) % 4);
35  const base64 = (base64String + padding)
36    .replace(/\-/g, "+")
37    .replace(/_/g, "/");
38  const rawData = window.atob(base64);
39  const outputArray = new Uint8Array(rawData.length);
40  for (let i = 0; i < rawData.length; ++i) {
41    outputArray[i] = rawData.charCodeAt(i);
42  }
43  return outputArray;
44}

Dans le service Worker, nous allons juste écouter les événements push

client/worker.js
1console.log("Service Worker Loaded...");
2self.addEventListener("push", e => {
3  const data = e.data.json();
4  console.log("Push Recieved...");
5  self.registration.showNotification(data.title, {
6    body: "Notified by my app :)",
7    icon: "https://design.firefox.com/photon/images/product-identity-assets/firefox.png"
8  });
9});

Ouvrer dans votre navigateur Chrome/Firefox, l’URL localhost:5000, vous devriez avoir une popup vous demandant d’autoriser ou non les notifications