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 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:

Exemples de notifications sur macOS et Android.

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.

Obtenez l'autorisation d'envoyer des messages push. Obtenir PushSubscription Envoyer
PushSubscription sur votre serveur.

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.

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

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 au endpoint.
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.

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