Comment fonctionnent les notifications push Web en interne
Vous voyez des notifications pour de nouveaux messages, des mises à jour de commandes ou des rappels de paiement.
Cela semble simple. Votre backend envoie un message et l'utilisateur le reçoit.
En réalité, le processus implique de nombreux éléments mobiles. Votre backend ne communique jamais directement avec le navigateur. À la place, il utilise un Push Service.
Google Chrome utilise Firebase Cloud Messaging. Firefox utilise le Mozilla Push Service.
Le flux de travail fonctionne de la manière suivante :
Backend → Push Service → Navigateur → Service Worker → Utilisateur
Voici comment construire ce système en utilisant React et Golang.
Les composants
- Frontend (React) : demande l'autorisation et enregistre un Service Worker.
- Service Worker : un script d'arrière-plan qui réside dans le navigateur. Il gère les événements même lorsque votre site web est fermé.
- Backend (Golang) : stocke les abonnements et envoie des messages chiffrés.
- Push Service : l'intermédiaire qui livre le message au navigateur.
Le flux d'abonnement
Pour envoyer un message, vous avez besoin d'un abonnement.
- L'utilisateur accorde l'autorisation.
- Le navigateur génère un objet d'abonnement contenant un endpoint et des clés de sécurité.
- Votre application React envoie cet objet à votre backend Golang.
- Votre backend l'enregistre dans une base de données.
Vous devez utiliser des clés VAPID pour identifier votre serveur. Utilisez une clé publique pour le frontend et une clé privée pour le backend. Ne partagez jamais votre clé privée.
L'implémentation
Dans React, vous enregistrez un Service Worker pour écouter les événements de push. Ce worker s'exécute en arrière-plan. Il reçoit les données et affiche la notification à l'utilisateur.
En Golang, vous utilisez une bibliothèque pour gérer le chiffrement et l'authentification VAPID. Votre serveur lit l'abonnement dans votre base de données, chiffre la charge utile (payload) et l'envoie au service de push du navigateur.
Passer à l'échelle pour la production
Une configuration simple convient aux petits projets. Un système de grande envergure nécessite davantage.
- Gérer plusieurs appareils : un utilisateur peut posséder un téléphone et un ordinateur portable. Stockez plusieurs abonnements par utilisateur.
- Nettoyer les données : les abonnements expirent. Si vous recevez une erreur 404 ou 410, supprimez cet abonnement de votre base de données.
- Utiliser des files d'attente (Queues) : pour des millions d'utilisateurs, utilisez Kafka ou un outil similaire. Cela permet à votre système de traiter les notifications de manière asynchrone.
- Implémenter des tentatives de réessai : utilisez l'attente exponentielle (exponential backoff) pour gérer les échecs réseau.
Les WebSockets sont idéaux pour les chats en direct lorsque l'utilisateur est actif. Le Web Push est préférable pour atteindre les utilisateurs lorsque l'onglet est fermé.