Notifications push web : comment les configurer sans déranger

Qu'est-ce que le web push et comment ça fonctionne

Les notifications push web sont de courts messages d'un site qui atteignent le navigateur même lorsque l'onglet est fermé. L'utilisateur accorde une fois la permission, le navigateur renvoie un abonnement avec un point de terminaison et des clés, et votre serveur envoie des messages via un service de push en utilisant un protocole signé VAPID. La règle d'or est de demander la permission au bon moment et de ne jamais inonder les gens.

UX d'opt-in : comment bien demander

Déclencher l'invite native du navigateur dans la première seconde entraîne presque toujours un « Blocage ». Un modèle en deux étapes fonctionne : d'abord votre propre invite douce expliquant le bénéfice, et seulement après accord, la demande du système.

• Pas instantanément. Montrez l'invite après une première action utile, pas à l'arrivée.
• Expliquez pourquoi. « Vous notifier lorsque le prix baisse ? » est plus efficace qu'une invite silencieuse.
• Respectez un non. S'ils refusent, ne redemandez pas pendant des semaines.
• Contexte. Demandez sur une page produit, pas sur la page d'accueil.

Clés VAPID

VAPID (Identification de Serveur d'Application Volontaire) identifie votre serveur au service de push. Vous avez besoin d'une paire de clés : la clé publique va au navigateur lors de l'abonnement, la clé privée reste sur le serveur et signe les demandes.

# Générer une paire de clés VAPID
npx web-push generate-vapid-keys

Clé publique :  BQ8...prqZk
Clé privée : 3Kf...9dQ
Sujet :     mailto:push@yourtrend.online

La clé publique est transmise lors de l'abonnement dans le navigateur :

registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: 'BQ8...prqZk'
});

Fréquence : comment ne pas déranger

Le push dérange plus vite que l'email car il apparaît par-dessus tout. Conseils de fréquence :

Offrez toujours des heures de tranquillité et une option de désinscription facile. Un push nocturne est un chemin direct vers le désabonnement.

Segmentation du web push

Comme avec l'email, ne pas envoyer à tout le monde. Segmentez par catégories vues, ville, langue et comportement. Panier abandonné, baisse de prix sur un favori, retour en stock — les scénarios ciblés sont cliqués beaucoup plus que les envois de masse. Dans YourTrend, le web push vit aux côtés de l'email, du SMS, segments et automatisations, donc le canal est choisi pour s'adapter à l'audience — aperçu sur la page des caractéristiques.

Cas d'utilisation utiles

1. Panier abandonné après 1 à 2 heures.
2. Baisse de prix sur un article favori.
3. De retour en stock pour ceux qui ont attendu.
4. Statut de la commande : expédiée, livrée.
5. Contenu : un nouvel article sur un sujet qu'ils suivent.

À quoi ressemblent l'envoi et la réception

Le serveur envoie un message chiffré à l'endpoint d'abonnement, et le service worker dans le navigateur intercepte l'événement push et affiche une notification même avec l'onglet fermé. La charge utile est un court JSON :

{
  "title": "Le prix a baissé de 20%",
  "body": "Les baskets dans vos favoris sont moins chères maintenant",
  "icon": "/icons/push-192.png",
  "url": "/catalog/sneakers/42"
}

// service-worker.js
self.addEventListener('push', function(event) {
  const d = event.data.json();
  event.waitUntil(
    self.registration.showNotification(d.title, {
      body: d.body, icon: d.icon, data: { url: d.url }
    })
  );
});

Au clic, envoyez l'utilisateur vers le produit spécifique à partir du champ url, pas vers la page d'accueil — cela augmente nettement la conversion.

Support des navigateurs et iOS

Les notifications web fonctionnent sur Chrome, Firefox, Edge et Opera sur desktop et Android. La principale mise en garde concerne Safari : sur iPhone et iPad, les notifications n'arrivent que si l'utilisateur a ajouté le site à l'écran d'accueil en tant que PWA (disponible depuis iOS 16.4+). Ainsi, les notifications web complètent l'email mais ne le remplacent pas : une partie de votre audience ne l'aura techniquement pas. Combinez les canaux — email, SMS et notifications — par segment.

Erreurs courantes

• Demande de permission dans la première seconde sans contexte.
• Uniquement des promotions, zéro notifications utiles.
• Pas de segmentation — la même notification pour tout le monde.
• Pas d'heures de silence ou d'option de désinscription claire.
• Le lien renvoie à la page d'accueil, pas au produit spécifique.

À retenir

Les notifications web sont un canal rapide et engageant mais nécessitent de la tactique : demandez au bon moment, expliquez le bénéfice, segmentez et maintenez une fréquence raisonnable. Ensuite, les notifications aident au lieu d'ennuyer. Choisissez un plan avec les canaux dont vous avez besoin sur la page tarification.