Cette page a été traduite par l'API Cloud Translation.

Présentation des notifications push

Présentation des notifications push, des raisons pour lesquelles vous pourriez les utiliser et de leur fonctionnement.

Kayce Basques

Matt Gaunt

Que sont les notifications push ?

Les messages push vous permettent d'attirer l'attention de vos utilisateurs, même lorsqu'ils n'utilisent pas votre site Web. On les appelle push, car vous pouvez envoyer des informations à vos utilisateurs même lorsqu'ils ne sont pas actifs. Comparez la technologie push avec la technologie pull pour mieux comprendre ce concept.

Les notifications présentent de petites informations à l'utilisateur. Les sites Web peuvent utiliser des notifications pour informer les utilisateurs des événements importants et urgents ou des actions qu'ils doivent effectuer. L'apparence des notifications varie selon les plates-formes:

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

Les messages push et les notifications sont deux technologies distinctes, mais complémentaires. La technologie Push permet d'envoyer des messages aux utilisateurs depuis votre serveur, même lorsqu'ils n'utilisent pas activement votre site Web. La technologie Notifications permet d'afficher les informations transmises sur l'appareil de l'utilisateur. Vous pouvez utiliser les notifications sans messages push. Un jour, il peut également être possible d'utiliser des messages push sans notification visible par l'utilisateur (message push silencieux), mais les navigateurs ne le permettent actuellement pas. 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 de la transmission d'un message, suivie de son affichage en tant que notification. Lorsque nous parlons de messages push, nous faisons référence à la technologie push seule. 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 permettent de recevoir des informations en temps opportun, pertinentes et précises.
Pour vous (propriétaire d'un site Web), les notifications push sont un moyen d'augmenter l'engagement des utilisateurs.

Comment fonctionnent les notifications push ?

De manière générale, les principales étapes à suivre pour implémenter les 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 du client à votre serveur pour les stocker dans une base de données
Ajout d'une logique de serveur pour transmettre des messages 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 décrit 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. Cette action doit être déclenchée par un geste de l'utilisateur, par exemple en cliquant sur le bouton Yes (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 sorte d'interface utilisateur pour confirmer officiellement que l'utilisateur souhaite activer les notifications push. Cette UI 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, vous devez utiliser JavaScript et l'API Push. Vous devrez fournir une clé d'authentification publique pendant le processus d'abonnement. Nous en reparlerons ultérieurement. Une fois le processus d'abonnement lancé, le navigateur envoie une requête réseau à un service Web appelé service push. Vous en apprendrez davantage sur ce sujet ultérieurement.

En supposant que l'abonnement a abouti, le navigateur renvoie un objet PushSubscription. Vous devrez stocker ces données à long terme. Pour ce faire, les informations sont généralement envoyées à un serveur que vous contrôlez, puis le serveur les stocke dans une base de données.

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

Envoyer un message push

En fait, votre serveur n'envoie pas le message push directement à un client. Pour ce faire, utilisez un service push. Un service push est un service Web contrôlé par le fournisseur du navigateur de l'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 Web push. La requête du protocole Web push doit inclure les éléments suivants:

Les données à inclure dans le message
Le client auquel envoyer le message.
Instructions sur la manière dont le service push doit distribuer le message. Par exemple, vous pouvez spécifier que le service push doit cesser de tenter d'envoyer le message après 10 minutes.

Normalement, vous effectuez la demande du protocole web push via un serveur que vous contrôlez. Bien entendu, votre serveur n'a pas besoin de construire lui-même la requête de service Web brute. Des bibliothèques peuvent gérer cela pour vous, telles que web-push-libs. Mais 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 push, qui l'envoie au message à l'appareil de l'utilisateur.

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 le message en file d'attente jusqu'à ce que le navigateur se connecte.

Chaque navigateur utilise le service push de son choix. En tant que développeur de sites web, vous n'avez aucun contrôle sur cela. Cela ne pose pas de 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 push utilisé par le fournisseur du navigateur. Il vous suffit de vous assurer que votre requête du protocole Web push respecte les spécifications. Entre autres choses, la spécification indique 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 Web push au service push approprié. Ces informations sont fournies par les données PushSubscription que le navigateur vous a renvoyées lors du processus d'abonnement. 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 contient l'identifiant du client qui permet au service push de déterminer exactement vers quel client envoyer le message.

Les keys sont utilisées pour le chiffrement, comme expliqué ci-après.

Chiffrer le message push

Les données que vous envoyez à un service push doivent être chiffrées. Cela empêche le service push de consulter 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 pourrait théoriquement être non sécurisé ou non sécurisé. Votre serveur doit utiliser le keys fourni dans PushSubscription pour chiffrer ses requêtes de protocole Web push.

Signer les requêtes du protocole Web push

Le service push permet d'empêcher toute autre personne d'envoyer des messages à vos utilisateurs. Techniquement, cette opération n'est pas nécessaire, mais elle est requise pour la mise en œuvre la plus simple dans Chrome. Il est facultatif dans 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 globalement comme suit:

Vous générez la clé privée et la clé publique comme une tâche ponctuelle. La combinaison de la clé privée et publique est appelée clés de serveur d'application. Vous les rencontrerez peut-être aussi sous le nom de clés VAPID. VAPID est la spécification qui définit ce processus d'authentification.
Lorsque vous abonnez un client aux notifications push de votre code JavaScript, vous fournissez votre clé publique. Lorsque le service push génère une endpoint pour l'appareil, il associe la clé publique fournie à l'endpoint.
Lorsque vous envoyez une requête du protocole Web push, vous signez certaines informations JSON avec votre clé privée.
Lorsque le service push reçoit votre requête de protocole Web push, 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 disposant de 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 de 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:

Valeur TTL (Time To Live) d'un message, qui définit la durée pendant laquelle le service push doit tenter de distribuer un message.
Urgence du message, qui est utile si le service push préserve l'autonomie de la batterie du client en ne délivrant que des messages à priorité élevée.
Sujet d'un message, qui remplace tous les messages en attente d'un même sujet par le dernier.

Recevoir et afficher les messages envoyés en tant que notifications

Une fois que vous avez envoyé la requête du protocole Web push au service push, celui-ci la conserve 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 déchiffre les données de ce message et envoie un événement push à votre nœud de calcul du service. Un service worker correspond à 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, appelez ServiceWorkerRegistration.showNotification() pour afficher les informations sous forme de notification.

Le message arrive sur l'appareil. Le navigateur active le service worker. L'événement push est envoyé.