“Nous avons besoin d’une application pour pouvoir envoyer des notifications push.” Pendant une décennie, c’est la seule raison pour laquelle les marques ont dépensé 100 000 € pour créer des applications natives. Le Web était silencieux. Si l’utilisateur ferme l’onglet, vous le perdez.

Cette époque est révolue. Avec iOS 16.4 (2023), Apple a finalement activé Web Push pour les applications Web de l’écran d’accueil. L’écart entre « Native App » et « Website » s’est effectivement réduit.

Chez Maison Code Paris, nous considérons le Push non pas comme un canal marketing, mais comme une Extension de l’Interface Utilisateur. Il s’agit d’un moyen d’afficher l’état critique (« Votre taxi est ici », « Votre commande a été expédiée ») sur la surface de l’appareil le plus personnel de l’utilisateur : l’écran de verrouillage.

Pourquoi Maison Code en parle

Chez Maison Code Paris, nous agissons comme la conscience architecturale de nos clients. Nous héritons souvent de stacks “modernes” construites sans compréhension fondamentale de l’échelle.

Nous abordons ce sujet car il représente un point de pivot critique dans la maturité de l’ingénierie. Une mise en œuvre correcte différencie un MVP fragile d’une plateforme résiliente de niveau entreprise.

L’architecture : comment fonctionne le Web Push

Contrairement au Native Push (qui s’appuie sur des protocoles propriétaires APNs/FCM), Web Push est un standard ouvert (RFC 8291). Il implique trois acteurs :

L’agent utilisateur (navigateur) : génère un abonnement.
Le service Push : un serveur géré par le fournisseur du navigateur (Mozilla, Google, Apple) qui achemine les messages.
Le serveur d’applications (vous) : déclenche le message.

Clés VAPID (la couche de sécurité)

Comment Apple sait-il que vous êtes celui qui envoie la notification, et non un spammeur usurpant votre domaine ? VAPID (identification volontaire du serveur d’applications).

Vous générez une paire de clés publique/privée.

Clé publique : Envoyée au navigateur lors de l’abonnement.
Clé privée : utilisée pour signer chaque message push (JWT).

Si la signature ne correspond pas à la clé publique stockée sur l’appareil, le service Push supprime le message. Cela empêche le « Push Hijacking ».

Phase de mise en œuvre 1 : Le Service Worker

Le Service Worker est le cerveau de l’opération. Il vit en arrière-plan, même lorsque l’onglet est fermé. Vous ne pouvez pas gérer les événements push dans votre bundle React principal (app.js). Vous devez les gérer dans sw.js.

// public/sw.js

self.addEventListener('push', function(événement) {
  si (!event.data) retourne ;

  const payload = event.data.json();
  const { titre, corps, icône, url, actions } = charge utile ;

  options const = {
    corps,
    icône : icône || '/icône-192.png',
    badge : '/badge-monochrome.png', // Petite icône pour la barre d'état Android
    data : { url }, // Stocker le lien profond
    actions : actions || [], // Boutons interactifs
    tag : 'order-update', // Réduit plusieurs notifications en une seule
    renotifier : vrai,
  } ;

  event.waitUntil(
    self.registration.showNotification(titre, options)
  );
});

// Gestion du clic
self.addEventListener('notificationclick', function(event) {
  event.notification.close(); // Ferme l'alerte
  const urlToOpen = event.notification.data.url || '/';

  event.waitUntil(
    clients.matchAll({ type : 'window', includeUncontrollé : true }).then(windowClients => {
      // Si l'onglet est déjà ouvert, concentrez-le
      pour (laisser le client de windowClients) {
        if (client.url === urlToOpen && 'focus' dans le client) {
          retourner client.focus();
        }
      }
      // Sinon, ouvre un nouvel onglet
      si (clients.openWindow) {
        return clients.openWindow(urlToOpen);
      }
    })
  );
});

Phase de mise en œuvre 2 : l’abonnement frontend

L’invite du navigateur (“example.com veut vous envoyer des notifications”) est terrifiante. Les utilisateurs le bloquent par réflexe. N’appelez jamais Notification.requestPermission() lors du chargement de la page.

Nous utilisons le modèle de double autorisation.

contexte : l’utilisateur clique sur “M’avertir lorsqu’il est en stock”.
Soft Prompt : affichez un joli modal HTML. “Nous vous enverrons une alerte unique lorsque ce produit sera de retour. Autoriser ?”
Invite matérielle : s’ils cliquent sur “Oui”, puis déclenchez la vérification du navigateur natif.

// composants/PushToggle.tsx
importer { urlBase64ToUint8Array } depuis './utils' ;

const PUBLIC_VAPID_KEY = 'BM...'; // Votre clé publique

exporter const PushToggle = () => {
  const abonnement = async () => {
    enregistrement const = attendre navigator.serviceWorker.ready ;
    
    // 1. Demander l'autorisation
    résultat const = attendre Notification.requestPermission();
    if (result !== 'accordé') return;

// 2. Abonnez-vous au service Push
    const abonnement = attendre l'enregistrement.pushManager.subscribe({
      userVisibleOnly : vrai,
      applicationServerKey : urlBase64ToUint8Array (PUBLIC_VAPID_KEY)
    });

    // 3. Envoyer le point de terminaison d'abonnement à votre backend
    wait fetch('/api/push/subscribe', {
      méthode : 'POST',
      corps : JSON.stringify (abonnement),
      en-têtes : { 'Content-Type' : 'application/json' }
    });
  } ;

  return <button onClick={subscribe}>Activer les alertes</button> ;
} ;

Phase de mise en œuvre 3 : la répartition du backend

Nous utilisons la bibliothèque Node.js web-push pour gérer le chiffrement et les en-têtes VAPID.

// api/push/send.ts
importer webpush depuis 'web-push' ;

webpush.setVapidDetails(
  'mailto:admin@maisoncode.paris',
  processus.env.VAPID_PUBLIC,
  processus.env.VAPID_PRIVATE
);

exporter la fonction asynchrone sendNotification (userSubscription, message) {
  essayez {
    wait webpush.sendNotification(userSubscription, JSON.stringify({
      titre : « Commande expédiée »,
      body: 'Votre colis est en route via DHL.',
      URL : '/commandes/TRX-123',
      actions : [
        { action : 'track', titre : 'Suivre le package' },
        { action : "fermer", titre : "Ignorer" }
      ]
    }));
  } attraper (erreur) {
    if (error.statusCode === 410) {
      // L'abonnement est mort (l'utilisateur nous a bloqué). Supprimer de la base de données.
      wait deleteSubscription(userSubscription.endpoint);
    }
  }
}

La mise en garde iOS 16.4 : l’exigence PWA

Apple a introduit un point de friction majeur. Sur Safari (iOS), Web Push est disponible UNIQUEMENT si l’utilisateur ajoute le site à son écran d’accueil. Un onglet standard ne peut pas recevoir de push.

Cela signifie que votre stratégie doit d’abord se concentrer sur l’installation PWA. Vous avez besoin d’une interface utilisateur « Invite d’installation » (similaire à l’invite Push Soft) qui guide l’utilisateur : “Appuyez sur Partager -> Ajouter à l’écran d’accueil pour recevoir les mises à jour des commandes.”

Une fois installée (fonctionnant généralement en mode d’affichage « autonome »), l’API Push est déverrouillée.

Notifications et actions riches

Les Actions de notification permettent aux utilisateurs d’interagir sans ouvrir l’application.

“Nouveau message reçu.”
Action 1 : « Répondre » (Ouvre la saisie de texte).
Action 2 : “Marquer comme lu” (l’API appelle-t-elle en arrière-plan).

Cela transforme la notification d’un « Panneau » en un « Panneau de configuration ».

Éthique : Le garçon qui criait au loup

Le Taux de clics (CTR) du push est élevé (8-12 %), mais le Taux de désabonnement est brutal. Si vous envoyez une notification non pertinente (« Il pleut ! Achetez des chaussures ! »), l’utilisateur désactivera les autorisations globalement. Contrairement au courrier électronique (dossier spam), il n’y a pas de juste milieu. C’est activé ou désactivé.

Notre règle : Push est destiné au Service. L’e-mail est destiné au Marketing.

✅ Order Shipped.
✅ Article de nouveau en stock (demandé par l’utilisateur).
✅ Vol retardé.
❌ Les soldes d’hiver ont commencé.
❌ Consultez notre nouvel article de blog.

10. Gérer la fatigue de poussée (plafonnement de fréquence)

Les notifications push ont des rendements strictement décroissants.

Message 1 : 10 % de CTR.
Message 2 : 5 % de CTR.
Message 3 : 0,5 % de CTR (et 2 % de désabonnements). Nous implémentons le Global Frequency Capping dans Redis. Utilisateur INCR : 123 :push:count (TTL 24 heures). Si le nombre est > 3, nous supprimons silencieusement les messages marketing (mais autorisons toujours les messages transactionnels). Nous implémentons également une logique « Heures calmes » (Ne réveillez pas l’utilisateur à 3 heures du matin sauf si sa maison est en feu).

11. La stratégie d’installation iOS PWA

Étant donné que les utilisateurs doivent installer la PWA pour obtenir du push sur iOS, vous avez besoin d’une stratégie. Vous ne pouvez pas simplement afficher une bannière « Ajouter à l’écran d’accueil ». Vous devez proposer Valeur derrière le mur d’installation.

“Installez l’application pour suivre votre colis en temps réel.”
“Installez l’application pour débloquer la réduction VIP de 10 %.” Nous créons des « instructions d’installation » personnalisées qui détectent la version du système d’exploitation de l’utilisateur et affichent la flèche exacte pointant vers le bouton Partager.

13. Rich Media : images et GIF

Le texte est ennuyeux. “Vos chaussures ont été expédiées”, c’est bien. “Vos chaussures ont été expédiées” + [Photo des chaussures réelles], c’est mieux. Web Push prend en charge la propriété « image ». Cependant, vous devez être prudent avec les proportions.

Android : Paysage (2:1).
Fenêtres : Carré (1:1). Nous construisons un lambda “Image Resizer” qui génère des vignettes spécifiques à l’appareil à la volée lors de l’envoi push.

14. Attribution des analyses

Comment savoir si Push génère des revenus ? Vous ne pouvez pas compter sur le « Direct Traffic ». Vous devez baliser vos URL. url : '/product/123?utm_source=web_push&utm_campaign=black_friday'. Mais écoutez également l’événement notificationclick pour déclencher un ping Analytics personnalisé avant d’ouvrir la fenêtre. Cela capture « Engagement » même si la page ne se charge pas.

15. Conclusion

Les notifications push sont l’arme la plus puissante de l’arsenal de rétention. Pour les détaillants à haute fréquence (Épicerie, Fashion drops), ils sont indispensables. Mais ils nécessitent une approche d’ingénierie disciplinée : une gestion solide des Service Worker, une sécurité VAPID et une stratégie UX respectueuse.

Maison Code aide les marques à naviguer dans cet espace, en transformant l’écran de verrouillage en un canal de conversion et non en une nuisance.

**[Engagez nos Architectes](/contact)**.