Les notifications push web expliquées

Notifications push web

Notifications push web : ce qu'elles sont et comment elles fonctionnent | We.Inc

Ce que sont les notifications push sur le web, les trois API du navigateur qui les font fonctionner, la règle de l'écran d'accueil sur iPhone et une démo d'autorisation à tester dans votre navigateur.

Une notification push est un court message qu'un site web ou une application envoie à votre appareil, et qui s'affiche même lorsque le site est fermé. Sur le web, elle nécessite trois fonctionnalités du navigateur : un service worker qui tourne en arrière-plan, la Push API pour recevoir le message et la Notifications API pour l'afficher, une fois que le visiteur a donné son accord.

Les composants du web push

Composant
Ce qu'il fait

Service worker
Un script que le navigateur conserve pour votre site et qui peut se réveiller à l'arrivée d'un message

Push API
Abonne le navigateur et reçoit les messages envoyés par votre serveur

Notifications API
Demande l'autorisation et affiche la notification à l'écran

Votre serveur
Enregistre chaque abonnement et envoie les messages via le service push du navigateur

Le push permet à une boutique d'informer un client que sa commande est expédiée, ou à un site de réservation de rappeler un rendez-vous du lendemain, sans e-mail. Bien utilisé, il est apprécié ; demandé trop tôt, il est bloqué pour de bon. La démo ci-dessous montre les états d'autorisation avec une notification locale uniquement.

Votre site enregistre un service worker, un script d'arrière-plan, sur une page HTTPS.
Lorsque le visiteur appuie sur un bouton comme Me prévenir, vous appelez Notification.requestPermission().
S'il accepte, le service worker appelle pushManager.subscribe() avec la clé publique de votre serveur et obtient un abonnement.
Vous enregistrez cet abonnement sur votre serveur. Plus tard, votre serveur lui envoie un message, le service worker reçoit un événement push et affiche une notification.

Demandez après un moment d'intérêt clair, comme une commande passée, et non au premier chargement de page.
Affichez d'abord votre propre petite question ; n'appelez la demande du navigateur que si la réponse est oui. Un blocage dans le navigateur est difficile à annuler pour les visiteurs.
Indiquez ce que vous enverrez et à quelle fréquence, puis respectez-le.
Utilisez un tag pour qu'une nouvelle mise à jour remplace l'ancienne au lieu de s'empiler.
Proposez un moyen de désactiver les notifications dans votre site, pas seulement dans les paramètres du navigateur.

Questions fréquentes

Les notifications push web fonctionnent-elles sur iPhone ?

Oui, depuis iOS et iPadOS 16.4, pour les applications web ajoutées à l'écran d'accueil. WebKit indique qu'une telle application peut demander l'autorisation, et que la demande doit venir d'une action directe de l'utilisateur, comme l'appui sur un bouton.

Le site doit-il être ouvert pour recevoir un push ?

Non. MDN décrit la Push API comme permettant à une application web de recevoir des messages qu'elle soit au premier plan ou non, voire même chargée ou non. Le service worker traite le message.

Quels sont les trois états d'autorisation ?

granted (le visiteur a accepté), denied (il a bloqué) et default (pas encore décidé). Dans l'état default, le navigateur se comporte comme si l'autorisation était refusée.

Ai-je besoin de HTTPS ?

Oui. MDN indique que la demande d'autorisation de notification n'est disponible que dans des contextes sécurisés, et que les service workers ne sont eux aussi disponibles que dans des contextes sécurisés (http://localhost compte pendant le développement).

Qu'est-ce que userVisibleOnly ?

Une option de pushManager.subscribe() qui promet que chaque push produira quelque chose de visible par l'utilisateur. MDN précise que Chrome et Edge refusent l'abonnement si elle n'est pas définie sur true.

Push, messages dans l'application et e-mail

Le push atteint la zone de notifications de l'appareil, ce qui le rend adapté aux informations urgentes et personnelles : une livraison aujourd'hui, une table prête, un problème de paiement.
Tout ce qui est long, ou que la personne doit pouvoir retrouver plus tard, relève de l'e-mail. Une promotion quotidienne n'a rien à faire dans le push.

L'autorisation ne se demande qu'une fois

Lorsqu'un visiteur bloque les notifications, l'autorisation passe à denied et l'exemple de MDN cesse simplement de demander ; la réactiver dépend du visiteur, dans les paramètres du site de son navigateur. C'est pourquoi une demande douce, votre propre bandeau avant la vraie demande, est courante.
MDN précise aussi que Chrome et Firefox n'autorisent plus la demande d'autorisation depuis une iframe d'une autre origine : faites donc la demande depuis votre propre page de premier niveau.

Le code, étape par étape

Dans la page : demander, puis s'abonner

Ne s'exécute que lorsque le visiteur appuie sur votre bouton. La clé publique provient de la paire de clés VAPID de votre serveur.

Dans sw.js : afficher le message

Le service worker se réveille sur un événement push et doit afficher une notification en réponse.

Essayez le parcours d'autorisation

Cet outil vérifie ce que votre navigateur prend en charge et vous permet de vous afficher une notification locale. Aucun abonnement n'est créé et aucun serveur n'intervient.

Ce que ce navigateur prend en charge

Fonctionnalité
Disponible ici

Notifications API

Service workers

Push API (PushManager)

Page sécurisée (HTTPS)

Oui

Non

Autorisation de notification actuelle :

Pas encore demandée (default)

Autorisée (granted)

Bloquée (denied)

Non prise en charge par ce navigateur

Demander l'autorisation

Afficher une notification de test

Votre commande est prête

Ceci est un test local du guide we.inc. Aucun serveur ne l'a envoyé.

Envoyée à votre système. Si rien n'est apparu, vérifiez les paramètres de notification de votre appareil.

Ce navigateur n'a pas voulu afficher de notification de page. Sur beaucoup de téléphones, les notifications passent uniquement par un service worker.

Vous avez bloqué les notifications pour ce site. Vous seul pouvez annuler ce choix, depuis les paramètres du site à côté de la barre d'adresse.

Recevoir un message à l'expédition de votre commande ?

Nous envoyons uniquement les mises à jour d'expédition. Désactivez-les à tout moment.

Oui, prévenez-moi

Pas maintenant

Aucune demande du navigateur n'a été affichée : vous pourrez donc redemander plus tard sans être bloqué.