Présentation des notifications push, des raisons pour lesquelles vous pourriez les utiliser et de leur fonctionnement
Que sont les notifications push ?
Les messages push vous permettent de porter l'attention de vos les utilisateurs même lorsqu'ils n'utilisent pas votre site Web. Elles sont appelées push car vous pouvez "envoyer" des informations à vos utilisateurs, même lorsqu'ils inactif. Comparer les méthodes push technologie avec le mode Pull d'assistance pour comprendre cela concept.
Les notifications présentent de petits morceaux d'informations à un utilisateur. Les sites Web peuvent utiliser Notifications pour signaler aux utilisateurs des actions ou des événements importants et urgents que l'utilisateur doit prendre. L'apparence des notifications varie selon les plates-formes:
<ph type="x-smartling-placeholder">![Exemples de notifications sur macOS et Android.](https://web.dev/static/articles/push-notifications-overview/image/examples-notifications-940d01bcab836.png?authuser=19&hl=fr)
Les messages push et les notifications sont deux technologies distinctes, mais complémentaires. Push est la technologie qui permet d'envoyer des messages aux utilisateurs depuis votre serveur, même lorsque lorsqu'ils n'utilisent pas activement votre site Web. Les notifications sont la technologie pour affichant les informations transmises sur l'appareil de l'utilisateur. Il est possible d'utiliser des notifications sans envoyer de messages push. Un jour, il peut également être possible d'utiliser les messages push sans notifications visibles par l'utilisateur (mode push silencieuse), mais les navigateurs ne le permettent pas pour le moment. En pratique, ils sont généralement utilisés ensemble. Un utilisateur n'ayant pas un profil technique ne comprendra probablement pas la différence entre la méthode "push" messages et notifications. Dans cette collection, nous parlons de notifications push : elles permettent de transmettre un message puis l'afficher sous forme de notification. Lorsque nous parlons de messages push, nous faisons référence à la technologie push seule. Et quand nous parlons de notifications nous faisons référence à la technologie de notification seule.
Pourquoi utiliser les notifications push ?
- Les notifications push permettent aux utilisateurs de recevoir des informations en temps opportun, pertinentes, et des informations précises.
- Pour vous (propriétaire d'un site Web), les notifications push permettent et l'engagement.
Comment fonctionnent les notifications push ?
De manière générale, les principales étapes pour implémenter des notifications push sont les suivantes:
- Ajouter une logique client pour demander à l'utilisateur l'autorisation d'envoyer des notifications push puis d'envoyer les informations d'identification du client à votre serveur pour les stocker dans une base de données.
- Ajouter une logique de serveur pour envoyer les messages aux appareils clients
- Ajout d'une logique client pour recevoir les messages transmis à 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.
Elle doit être déclenchée par un geste de l'utilisateur (par exemple, en cliquant sur un bouton Oui).
à côté d'une requête Do you want to receive push notifications?
. Après cette confirmation,
appelez Notification.requestPermission()
. Le système d'exploitation ou
navigateur sur l'appareil de l'utilisateur présentera probablement une sorte d'interface utilisateur pour confirmer officiellement que le
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 de à abonner l'utilisateur aux notifications push. Cela se fait via JavaScript, à l'aide de l'API Push. Vous devrez fournir une clé d'authentification publique pendant le processus d'abonnement. Nous y reviendrons plus tard. Après lorsque vous lancez le processus d'abonnement, le navigateur envoie une requête réseau à un service web appelé service push, que vous découvrirez également plus tard.
En supposant que l'abonnement a abouti, le navigateur renvoie un
PushSubscription
. Vous devez stocker ces données sur le long terme.
Généralement, cela se fait en envoyant les informations
à un serveur que vous contrôlez,
puis demander au serveur de les stocker
dans une base de données.
Envoyer un message push
Votre serveur n'envoie pas le message push directement à un client. A push service effectue cette opération. Un service push est un service Web contrôlé par votre fournisseur du navigateur de l'utilisateur. Lorsque vous voulez envoyer une notification push à un client, vous avez besoin pour envoyer une requête de service Web à un service push. La requête de service Web que que vous envoyez au service push est appelée requête de protocole Web push. La Une requête de protocole Web push doit inclure:
- Quelles données inclure dans le message ?
- Client auquel envoyer le message.
- Instructions sur la manière dont le service push doit transmettre le message. Par exemple : peut spécifier que le service push doit arrêter les tentatives d'envoi du message au bout de 10 minutes.
Normalement, vous effectuez la requête de protocole Web push via un serveur que vous contrôlez. Bien entendu, votre serveur n'a pas besoin de créer la requête de service Web brute lui-même. Il existe des bibliothèques qui peuvent gérer cela pour vous, comme web-push-libs. Mais le mécanisme sous-jacent est une requête de service Web sur HTTP.
Le service push reçoit votre requête, l'authentifie et achemine l'appel au client approprié. Si le navigateur du client est hors connexion, la méthode le service met le message en file d'attente jusqu'à ce que le navigateur se connecte.
Chaque navigateur utilise le service push qu'il souhaite. Vous, en tant que développeur de sites Web n'ont aucun contrôle sur ce point. Ce n'est pas un problème, car le protocole push Web requête est standardisée. En d'autres termes, vous n'avez pas à vous soucier du service push du fournisseur du navigateur utilisent. Il vous suffit de vous assurer que votre requête de protocole Web push respecte les spécifications. La spécification stipule, entre autres, que la requête doit inclure certains en-têtes et les données doivent être envoyées sous forme de flux d'octets.
Vous devez toutefois vous assurer que vous envoyez le protocole Web push
au service push approprié. Les données PushSubscription
que le
qui vous est renvoyé pendant le processus d'abonnement
des 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 endpoint
est essentiellement le service push. Le chemin d'accès
endpoint
correspond à l'identifiant du client qui aide le service push à déterminer
exactement à quel client
envoyer le message.
Les keys
sont utilisés pour le chiffrement, comme expliqué ci-dessous.
Chiffrer le message push
Les données que vous envoyez à un service push doivent être chiffrées. Cela permet d'éviter
au service push d'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
service push pourrait théoriquement
être non sécurisé ou non sécurisé. Votre serveur doit utiliser
Le keys
fourni dans le PushSubscription
pour chiffrer son protocole Web push
requêtes.
Signer vos requêtes de protocole Web push
Le service push permet d'empêcher quiconque d'envoyer des messages à votre utilisateurs. Techniquement, vous n'avez pas à le faire, mais l'implémentation la plus simple Chrome l'exige. Il est facultatif sur Firefox. D'autres navigateurs peuvent l'exiger à l'avenir.
Ce workflow implique l'utilisation d'une clé privée et d'une clé publique propres à votre application. Le processus d'authentification fonctionne à peu près comme suit:
- Vous allez générer les clés privée et publique en tant que tâche ponctuelle. La combinaison de la clé privée et publique est appelée clés de serveur d'applications. Vous pouvez également les voir appelés VAPID clés. 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 une exception
endpoint
pour l'appareil, elle associe la clé publique fournie auendpoint
. - Lorsque vous envoyez une requête de protocole Web push, vous signez certaines informations JSON. à l'aide de votre clé privée.
- Lorsque le service push reçoit votre requête de protocole Web push, il utilise les données stockées une clé publique pour authentifier les informations signées. Si la signature est valide alors le service push sait que la requête provient d'un serveur avec le la clé privée correspondante.
Personnaliser la distribution du message push
La spécification de requête du protocole Web push définit également des paramètres qui vous permettent personnaliser la façon dont le service push tente d'envoyer le message push au client. Vous pouvez par exemple 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 lorsque vous tentez de distribuer un message.
- L'urgence du message, qui est utile si le service push protège l'autonomie de la batterie du client en n'envoyant que des messages à priorité élevée.
- Sujet d'un message, qui remplace tous les messages en attente associés à ce sujet avec le dernier message.
Recevoir et afficher les messages envoyés en tant que notifications
Une fois que vous avez envoyé la requête de protocole Web push au service push, celui-ci conserve votre demande est mise en file d'attente jusqu'à ce que l'un des événements suivants se produise:
- Le client se connecte, et le service push distribue le message push.
- Le message expire.
Lorsqu'un navigateur client reçoit un message push, il le déchiffre.
et envoie un événement push
à votre service
ou un nœud de calcul. Un service worker est
C'est-à-dire du code JavaScript qui peut s'exécuter en arrière-plan, même lorsque votre site Web
n'est pas ouvert ou le navigateur est fermé. Dans l'événement push
de votre service worker
vous appelez ServiceWorkerRegistration.showNotification()
pour afficher les informations
sous forme de notification.
Étapes suivantes
- Présentation des notifications push Web
- Fonctionnement du mode Push
- S'abonner à un utilisateur
- Expérience utilisateur des autorisations
- Envoyer des messages à l'aide des bibliothèques Web Push
- Protocole Web Push
- Gérer les événements push
- Afficher une notification
- Comportement des notifications
- Formats de notification courants
- Questions fréquentes sur les notifications push
- Problèmes courants et signalement de bugs