Présentation des notifications push, de leurs avantages et de leur fonctionnement.
Que sont les notifications push ?
Les messages push vous permettent d'attirer l'attention de vos utilisateurs sur des informations, même lorsqu'ils n'utilisent pas votre site Web. Ils sont appelés messages push , car vous pouvez "pousser" des informations vers vos utilisateurs même lorsqu'ils ne sont pas actifs. Comparez la technologie push à la technologie pull pour mieux comprendre ce concept.
Les notifications présentent de petites quantités d'informations à un utilisateur. Les sites Web peuvent utiliser des notifications pour informer les utilisateurs d'événements importants et urgents, ou d'actions qu'ils doivent effectuer. L'apparence des notifications varie selon les plates-formes :
Les messages push et les notifications sont deux technologies distinctes, mais complémentaires. La technologie push permet d'envoyer des messages de votre serveur aux utilisateurs, même lorsqu'ils n'utilisent pas activement votre site Web. Les notifications permettent d'afficher les informations envoyées sur l'appareil de l'utilisateur. Il est possible d'utiliser des notifications sans messagerie push. Il sera peut-être un jour possible d'utiliser des messages push sans notifications visibles par l'utilisateur (push silencieux), mais les navigateurs ne le permettent pas actuellement. En pratique, elles sont généralement utilisées ensemble. Un utilisateur non technique ne comprendra probablement pas la différence entre les messages push et les notifications. Dans cette collection, lorsque nous parlons de notifications push , nous faisons référence à la combinaison d'un message push suivi de son affichage sous forme de notification. Lorsque nous parlons de messages push , nous faisons référence à la technologie push seule. Et lorsque nous parlons de notifications , nous faisons référence à la technologie de notification seule.
Pourquoi utiliser des notifications push ?
- Pour les utilisateurs, les notifications push sont un moyen de recevoir des informations pertinentes, précises, et en temps voulu.
- Pour vous (propriétaire d'un site Web), les notifications push sont un moyen d'accroître l'engagement des utilisateurs.
Comment fonctionnent les notifications push ?
De manière générale, les principales étapes d'implémentation des notifications push sont les suivantes :
- Ajouter une logique client pour demander à l'utilisateur l'autorisation d'envoyer des notifications push, puis envoyer les informations d'identifiant client à votre serveur pour les stocker dans une base de données.
- Ajouter une logique serveur pour envoyer des messages push aux appareils clients.
- Ajouter une logique client pour recevoir les messages envoyés à l'appareil et les afficher sous forme de notifications.
Le reste de cette page explique ces étapes plus en détail.
Obtenir l'autorisation d'envoyer des notifications push
Tout d'abord, votre site Web doit obtenir l'autorisation de l'utilisateur pour envoyer des notifications push.
Cela doit être déclenché par un geste de l'utilisateur, par exemple en cliquant sur un bouton Oui à côté d'une invite Do you want to receive push notifications? (Souhaitez-vous recevoir des notifications push ?). Après cette confirmation,
appelez Notification.requestPermission(). Le système d'exploitation ou le navigateur de l'appareil de l'utilisateur présentera probablement une interface utilisateur pour confirmer officiellement que l'utilisateur souhaite activer les notifications push. Cette interface utilisateur varie selon les plates-formes.
Abonner le client aux notifications push
Une fois que vous avez obtenu l'autorisation, votre site Web doit lancer le processus d'abonnement de l'utilisateur aux notifications push. Pour ce faire, utilisez JavaScript, en utilisant l'API Push. Vous devrez fournir une clé d'authentification publique lors du processus d'abonnement, dont vous en apprendrez davantage plus tard. Une fois le processus d'abonnement lancé, le navigateur envoie une requête réseau à un service Web appelé service push, dont vous en apprendrez également davantage plus tard.
Si l'abonnement a réussi, le navigateur renvoie un
PushSubscription
objet. Vous devrez stocker ces données à long terme.
En règle générale, cela se fait en envoyant les informations à un serveur que vous contrôlez, puis en les stockant dans une base de données.
Envoyer un message push
Votre serveur n'envoie pas directement le message push à un client. C'est un service push qui le fait. Un service push est un service Web contrôlé par le fournisseur du navigateur de votre utilisateur. Lorsque vous souhaitez envoyer une notification push à un client, vous devez effectuer une requête de service Web auprès d'un service push. La requête de service Web que vous envoyez au service push est appelée requête de protocole push Web. La requête de protocole push Web doit inclure les éléments suivants :
- Les données à inclure dans le message.
- Le client auquel envoyer le message.
- Les instructions sur la manière dont le service push doit envoyer le message. Par exemple, vous pouvez spécifier que le service push doit cesser de tenter d'envoyer le message au bout de 10 minutes.
Normalement, vous effectuez la requête de protocole push Web via un serveur que vous contrôlez. Bien sûr, votre serveur n'a pas besoin de construire lui-même la requête de service Web brute. Il existe des bibliothèques qui peuvent le faire pour vous, comme les bibliothèques web-push-libs. Toutefois, le mécanisme sous-jacent est une requête de service Web via HTTP.
Le service push reçoit votre requête, l'authentifie et achemine le message push vers le client approprié. Si le navigateur du client est hors connexion, le service push met en file d'attente le message push jusqu'à ce que le navigateur se connecte.
Chaque navigateur utilise le service push de son choix. En tant que développeur de site Web, vous n'avez aucun contrôle sur ce point. Ce n'est pas un problème, car la requête de protocole push Web est standardisée. En d'autres termes, vous n'avez pas à vous soucier du service push utilisé par le fournisseur du navigateur. Vous devez simplement vous assurer que votre requête de protocole push Web respecte les spécifications. Entre autres, les spécifications indiquent que la requête doit inclure certains en-têtes et que les données doivent être envoyées sous forme de flux d'octets.
Vous devez toutefois vous assurer que vous envoyez la requête de protocole push Web au service push approprié. Les données PushSubscription que le navigateur vous a renvoyées lors du processus d'abonnement fournissent ces informations. Un objet PushSubscription se présente comme suit :
{
"endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
"expirationTime": null,
"keys": {
"p256dh": "BGyyVt9FFV…",
"auth": "R9sidzkcdf…"
}
}
Le domaine de l'endpoint est essentiellement le service push. Le chemin d'accès de l'endpoint correspond aux informations d'identifiant client qui aident le service push à déterminer exactement à quel client envoyer le message.
Les keys sont utilisées pour le chiffrement, qui est expliqué ensuite.
Chiffrer le message push
Les données que vous envoyez à un service push doivent être chiffrées. Cela empêche le service push de pouvoir afficher les données que vous envoyez au client.
N'oubliez pas que le fournisseur du navigateur décide du service push à utiliser, et que ce service push pourrait théoriquement être dangereux ou non sécurisé. Votre serveur doit utiliser les keys fournies dans le PushSubscription pour chiffrer ses requêtes de protocole push Web.
Signer vos requêtes de protocole push Web
Le service push permet d'empêcher quiconque d'envoyer des messages à vos utilisateurs. Techniquement, vous n'avez pas à le faire, mais l'implémentation la plus simple sur Chrome l'exige. Elle est facultative sur Firefox. D'autres navigateurs pourront l'exiger à l'avenir.
Ce workflow implique une clé privée et une clé publique propres à votre application. Le processus d'authentification fonctionne à peu près comme suit :
- Vous générez la clé privée et la clé publique en une seule fois. La combinaison de la clé privée et de la clé publique est appelée clés du serveur d'application. Vous pouvez également les voir appelées clés VAPID. VAPID est la spécification qui définit ce processus d'authentification.
- Lorsque vous abonnez un client aux notifications push à partir de votre code JavaScript, vous fournissez votre clé publique. Lorsque le service push génère un
endpointpour l'appareil, il associe la clé publique fournie à l'endpoint. - Lorsque vous envoyez une requête de protocole push Web, vous signez certaines informations JSON avec votre clé privée.
- Lorsque le service push reçoit votre requête de protocole push Web, il utilise la clé publique stockée pour authentifier les informations signées. Si la signature est valide, le service push sait que la requête provient d'un serveur avec la clé privée correspondante.
Personnaliser la diffusion du message push
La spécification de la requête de protocole push Web définit également des paramètres qui vous permettent de personnaliser la manière dont le service push tente d'envoyer le message push au client. Par exemple, vous pouvez personnaliser les éléments suivants :
- La valeur TTL (Time To Live) d'un message, qui définit la durée pendant laquelle le service push doit tenter de diffuser un message.
- L'urgence du message, ce qui est utile si le service push préserve l'autonomie de la batterie du client en ne diffusant que les messages à priorité élevée.
- Le sujet d'un message, qui remplace tous les messages en attente du même sujet par le dernier message.
Recevoir et afficher les messages push sous forme de notifications
Une fois que vous avez envoyé la requête de protocole push Web au service push, celui-ci la met en file d'attente jusqu'à ce que l'un des événements suivants se produise :
- Le client se connecte et le service push diffuse le message push.
- Le message expire.
Lorsqu'un navigateur client reçoit un message push, il déchiffre les données du message push
et envoie un push événement à votre service
worker. Un service worker est un code JavaScript qui peut s'exécuter en arrière-plan, même lorsque votre site Web n'est pas ouvert ou que le navigateur est fermé. Dans le gestionnaire d'événements push de votre service worker, vous appelez ServiceWorkerRegistration.showNotification() pour afficher les informations sous forme de notification.
Étapes suivantes
- Présentation des notifications push sur le Web
- Fonctionnement de la technologie push
- Abonner un utilisateur
- Expérience utilisateur pour l'autorisation
- Envoyer des messages avec des bibliothèques push Web
- Protocole push Web
- Gérer les messages
- Afficher une notification
- Comportement des notifications
- Modèles de notifications courants
- Questions fréquentes sur les notifications push
- Problèmes courants et signalement de bugs