Présentation des notifications push

Présentation des notifications push, de leur utilité et de leur fonctionnement.

Kayce Basques

Que sont les notifications push ?

Les messages push vous permettent de porter des informations à l'attention de vos utilisateurs, même lorsqu'ils n'utilisent pas votre site Web. Ils sont appelés messages push, car vous pouvez "pusher" 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 petits éléments d'informations à l'utilisateur. Les sites Web peuvent utiliser des notifications pour informer les utilisateurs d'événements importants et urgents, ou d'actions qu'ils doivent entreprendre. L'apparence des notifications varie selon les plates-formes:

Exemples de notifications sur macOS et Android.
Exemples de notifications sur macOS et Android.

Les messages push et les notifications sont deux technologies distinctes, mais complémentaires. La technologie push permet d'envoyer des messages depuis votre serveur aux utilisateurs, même lorsqu'ils n'utilisent pas activement votre site Web. Les notifications sont la technologie permettant d'afficher les informations transmises sur l'appareil de l'utilisateur. Il est possible d'utiliser des notifications sans messagerie push. Il sera peut-être possible un jour d'utiliser des messages push sans notifications visibles par l'utilisateur (push silencieux), mais les navigateurs ne le permettent pas pour le moment. En pratique, ils sont généralement utilisés 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 entendons la combinaison d'envoi d'un message suivi de son affichage sous forme de notification. Lorsque nous parlons de messages push, nous faisons référence à la technologie push en elle-même. Lorsque nous parlons de notifications, nous faisons référence à la technologie de notification en elle-même.

Pourquoi utiliser les notifications push ?

  • Pour les utilisateurs, les notifications push sont un moyen de recevoir des informations opportunes, pertinentes et précises.
  • En tant que propriétaire d'un site Web, les notifications push vous permettent d'accroître l'engagement des utilisateurs.

Comment fonctionnent les notifications push ?

Voici les principales étapes à suivre pour implémenter des notifications push:

  1. Ajouter une logique client pour demander à l'utilisateur l'autorisation d'envoyer des notifications push, puis envoyer des informations d'identification client à votre serveur pour les stocker dans une base de données.
  2. Ajout d'une logique de serveur pour transmettre des messages aux appareils clients.
  3. Ajout d'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?. 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 l'autorisation obtenue, votre site Web doit lancer le processus d'abonnement de l'utilisateur aux notifications push. Pour ce faire, utilisez JavaScript et l'API Push. Vous devrez fournir une clé d'authentification publique lors du processus d'abonnement, que vous découvrirez plus tard. Une fois le processus d'abonnement lancé, 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 bien été souscrit, le navigateur renvoie un objet PushSubscription. Vous devrez stocker ces données à long terme. Pour ce faire, envoyez généralement les informations à un serveur que vous contrôlez, puis demandez au serveur de les stocker dans une base de données.

Obtenez l'autorisation d'envoyer des messages push. Obtenir PushSubscription. Envoyez PushSubscription à votre serveur.

Envoyer un message push

Votre serveur n'envoie pas directement le message push à un client. C'est ce qu'effectue un service push. Un service push est un service Web contrôlé par le fournisseur de navigateur de votre utilisateur. Lorsque vous souhaitez envoyer une notification push à un client, vous devez envoyer une requête de service Web à un service push. La requête de service Web que vous envoyez au service push est appelée requête de protocole de push Web. La requête du protocole de push Web doit inclure les éléments suivants:

  • Données à inclure dans le message.
  • Client auquel envoyer le message.
  • Instructions sur la manière dont le service push doit diffuser le message. Par exemple, vous pouvez spécifier que le service de transfert doit cesser d'essayer d'envoyer le message au bout de 10 minutes.

En règle générale, vous envoyez la requête du protocole Web Push via un serveur que vous contrôlez. Bien entendu, votre serveur n'a pas besoin de créer lui-même la requête de service Web brute. Des bibliothèques peuvent s'en charger, comme web-push-libs. Cependant, le mécanisme sous-jacent est une requête de service Web via HTTP.

Votre serveur envoie une requête de protocole Web Push au service de push, qui envoie le message à l'appareil de l'utilisateur.

Le service de transfert de données reçoit votre requête, l'authentifie et achemine le message de transfert de données vers le client approprié. Si le navigateur du client est hors connexion, le service push met le message push en file d'attente jusqu'à ce que le navigateur soit en ligne.

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 du protocole Web Push est normalisée. En d'autres termes, vous n'avez pas à vous soucier du service de transfert de données par poussée que le fournisseur du navigateur utilise. Vous devez simplement vous assurer que votre requête de protocole Web Push 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 d'envoyer la requête du protocole de push Web au bon service de push. 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 endpoint est essentiellement le service push. Le chemin d'accès de endpoint est une information d'identifiant client qui aide le service de transfert à 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 empêche le service push d'afficher les données que vous envoyez au client. N'oubliez pas que le fournisseur du navigateur décide du service de transfert de données par poussée à utiliser, et que ce service peut théoriquement être dangereux ou non sécurisé. Votre serveur doit utiliser le keys fourni dans le PushSubscription pour chiffrer ses requêtes de protocole Web Push.

Signer vos requêtes de protocole Web Push

Le service de push permet d'empêcher toute autre personne d'envoyer des messages à vos utilisateurs. Techniquement, vous n'avez pas besoin de le faire, mais l'implémentation la plus simple sur Chrome l'exige. Cette étape est facultative dans Firefox. D'autres navigateurs peuvent en avoir besoin à 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 tant que tâche ponctuelle. La combinaison de la clé privée et de la clé publique est appelée clés de serveur d'application. Elles sont parfois 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 de transfert de données génère un endpoint pour l'appareil, il associe la clé publique fournie à endpoint.
  • Lorsque vous envoyez une requête de protocole Web Push, vous signez certaines informations JSON avec votre clé privée.
  • Lorsque le service de push reçoit votre requête de protocole de push Web, il utilise la clé publique stockée pour authentifier les informations signées. Si la signature est valide, le service de transfert par poussée 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 requête du protocole Web Push définit également des paramètres qui vous permettent de personnaliser la manière dont le service de push tente d'envoyer le message push au client. Par exemple, vous pouvez personnaliser les éléments suivants:

  • Valeur TTL (Time To Live) d'un message, qui définit la durée pendant laquelle le service de diffusion doit tenter de transmettre un message.
  • L'urgence du message, qui est utile si le service de push préserve l'autonomie de la batterie du client en ne transmettant que des messages à priorité élevée.
  • Sujet d'un message, qui remplace 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 du protocole de push Web au service de push, celui-ci maintient votre requête dans la file d'attente jusqu'à ce qu'un des événements suivants se produise:

  1. Le client se connecte et le service de messages push lui envoie le message.
  2. Le message expire.

Lorsqu'un navigateur client reçoit un message push, il déchiffre les données du message push et distribue un événement push à votre nœud de calcul de service. Un service worker est essentiellement 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.

Le message arrive sur l'appareil. Le navigateur réveille le service worker. L'événement de transfert est distribué.

Étapes suivantes

Ateliers de programmation