Notifications Push
Presentation
Objectif principal : Un systeme de notifications push pour applications web. Les utilisateurs s'abonnent et recoivent des notifications meme quand le site est ferme. Comme une app native mais sur le web.
Technologies utilisees : Service Worker pour recevoir les notifications, Web Push API, VAPID pour l'authentification, backend Node.js avec web-push library.
Fonctionnalites cles : Abonnement/desabonnement, notifications avec titre, corps, icone et action au clic, segmentation des utilisateurs, programmation des envois.
Livrables attendus : Une library JS cote client facile a integrer, un backend pour envoyer les notifs, et une interface d'administration.
Calendrier previsionnel : Deux semaines. Le plus dur c'est de comprendre le flow entre le service worker, le navigateur et le serveur de push.
Parties prenantes & criteres de succes : Projet perso pour comprendre les PWA. Je voulais que mon portfolio envoie des notifs quand j'ajoute un nouveau projet.
Le Defi
Le flow d'abonnement est tordu. Le service worker genere une subscription avec une cle publique VAPID. Faut stocker cette subscription cote serveur. Et chaque navigateur a son propre endpoint de push. Fallait comprendre tout ca.
La Solution
J'ai dessine le flow sur papier : 1) generer les cles VAPID, 2) le client s'abonne via le service worker avec la cle publique, 3) stocker la subscription en BDD, 4) pour envoyer, POST vers l'endpoint avec la cle privee. Simple une fois qu'on a compris.
Architecture Technique
Service worker sw.js qui ecoute l'event push et affiche la notification. Module subscribe.js pour gerer l'abonnement cote client. Backend Express avec routes /subscribe, /unsubscribe, /send. Table subscriptions (endpoint, keys, user_agent). Library web-push pour l'envoi.
Points Cles
- Notifications meme site ferme
- VAPID pour la securite
- Interface admin pour envoyer
Apercu
Resultats & Apprentissages
Ca marche sur Chrome, Firefox et Edge. J'ai integre ca a mon portfolio. Les PWA c'est vraiment puissant, on peut faire des apps web qui rivalisent avec le natif. Le service worker c'est une technologie cle a maitriser.
Evolutions Futures
Segmentation avancee (par tags, par activite). Analytics des ouvertures. Rich notifications avec images. Support Safari (ils ont enfin ajoute Web Push en 2023).