Fonctionnement du transfert

Avant d'aborder l'API, intéressons-nous au transfert dans les grandes lignes, du début à la fin. Puis, alors que nous à examiner des sujets ou des API individuels plus tard, vous comprendrez importantes.

Les trois étapes clés de la mise en œuvre du mode push sont les suivantes:

  1. Ajouter la logique côté client pour abonner un utilisateur au mode push (le code JavaScript et l'interface utilisateur de votre application Web qui enregistre un utilisateur pour transmettre des messages).
  2. Appel d'API à partir de votre backend / application qui déclenche un message push sur l'appareil d'un utilisateur.
  3. Fichier JavaScript du service worker qui recevra un "événement push" lorsque la poussée arrive l'appareil. C'est dans ce code JavaScript que vous pourrez afficher une notification.

Examinons plus en détail chacune de ces étapes.

Étape 1: Côté client

La première étape consiste à "s'abonner" qu'un utilisateur ait à envoyer un message.

Pour abonner un utilisateur, deux choses sont nécessaires. Tout d'abord, obtenez l'autorisation de l'utilisateur pour envoyer pour envoyer des messages. Deuxièmement, obtenir un PushSubscription auprès du navigateur.

Un PushSubscription contient toutes les informations dont nous avons besoin pour envoyer un message push à cet utilisateur. Vous pouvez « en quelque sorte » considérez cela comme un ID pour l'appareil de cet utilisateur.

Tout cela s'effectue en JavaScript avec l'API Push.

Navigateurs pris en charge

  • Chrome: 42 <ph type="x-smartling-placeholder">
  • Edge: 17 <ph type="x-smartling-placeholder">
  • Firefox: 44 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Source

Avant d'abonner un utilisateur, vous devez générer un ensemble "clés de serveur d'application", que nous aborderons plus tard.

Les clés du serveur d'applications, également appelées clés VAPID, sont propres à votre serveur. Elles permettent push pour savoir quel serveur d'applications s'est abonné à un utilisateur et s'assurer qu'il est identique déclenchant les messages push vers cet utilisateur.

Une fois que vous vous êtes abonné et que vous disposez d'un PushSubscription, vous devez envoyer le Détails de PushSubscription à votre backend / serveur. Sur votre serveur, enregistrez ceci à une base de données et l'utiliser pour envoyer un message push à cet utilisateur.

Veillez à envoyer l&#39;abonnement PushSubscription à votre backend.

Étape 2: Envoyez un message push

Pour envoyer un message push à vos utilisateurs, vous devez effectuer un appel d'API Google Cloud. Cet appel d'API inclut les données à envoyer, les destinataires sur la manière d'envoyer le message. Normalement, cet appel d'API est effectué à partir de votre serveur.

Voici quelques questions que vous vous posez peut-être:

  • Qui et qu'est-ce que le service push ?
  • À quoi ressemble l'API ? S'agit-il d'un fichier JSON, XML ou autre ?
  • Que peut faire l'API ?

Qui et qu'est-ce que le service push ?

Un service push reçoit une requête réseau, la valide et envoie un message push au navigateur approprié. Si le navigateur est hors connexion, le message est mis en file d'attente jusqu'à ce que le navigateur se connecte.

Chaque navigateur peut utiliser le service push qu'il souhaite. C'est quelque chose que les développeurs n'ont aucun contrôle. terminé. Ce n'est pas un problème, car chaque service push attend le même appel d'API. Signification vous n'avez pas à vous soucier de qui est le service push. Il vous suffit de vérifier que votre appel d'API est valide.

Pour obtenir l'URL appropriée afin de déclencher un message push (c'est-à-dire l'URL du service push), vous devez il suffit d'examiner la valeur endpoint dans une PushSubscription.

Vous trouverez ci-dessous un exemple des valeurs fournies par un abonnement PushSubscription:

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

Dans ce cas, le point de terminaison est [https://random-push-service.com/some-kind-of-unique-id-1234/v2/]. Le service push serait "random-push-service.com" et chaque point de terminaison est propre à un utilisateur, indiqué par &#39;some-kind-of-unique-id-1234&#39;. Lorsque vous commencerez à travailler avec la poussée, vous remarquerez ce schéma.

Nous aborderons plus tard les clés de l'abonnement.

À quoi ressemble l'API ?

Comme je l'ai dit, chaque service Web push attend le même appel d'API. Cette API est Protocole Web push : Il s'agit d'une norme IETF qui définit la façon dont vous effectuez un appel d'API vers un service push.

L'appel d'API nécessite que certains en-têtes soient définis et que les données soient un flux d'octets. Nous examiner les bibliothèques qui peuvent effectuer cet appel d'API à notre place, ainsi que la façon de le faire.

Que peut faire l'API ?

L'API permet d'envoyer un message à un utilisateur, avec ou sans données, et fournit les instructions d'envoi du message.

Les données que vous envoyez avec un message push doivent être chiffrées. En effet, empêche les services push (qui peuvent être n'importe qui) d'afficher les données envoyées avec le push message. C'est important, car c'est le navigateur qui décide quel service push vers ce qui pourrait ouvrir la porte à des navigateurs utilisant un service push inquiétant.

Lorsque vous déclenchez un message push, le service push reçoit l'appel d'API et met en file d'attente . Ce message restera en file d'attente jusqu'à ce que l'appareil de l'utilisateur se connecte et que le transfert peut distribuer les messages. Les instructions que vous pouvez donner au service push définissent le message push est mis en file d'attente.

Ces instructions incluent des informations telles que:

  • Valeur TTL (Time To Live) d'un message push. Ce champ définit la durée pendant laquelle un message doit être mis en file d'attente avant le il est supprimé et n'est pas distribué.

  • Définissez le degré d'urgence du message. Cela est utile si le service push préserve le l'autonomie de la batterie des utilisateurs en ne distribuant que des messages à priorité élevée.

  • Attribuer un "sujet" à un message push qui remplacera tout message en attente par ce nouveau message.

Lorsque votre serveur souhaite envoyer un message push, il envoie une requête de protocole Web push à un service push.

Étape 3: Événement push sur l'appareil de l'utilisateur

Une fois que nous avons envoyé un message push, le service push le conserve sur son serveur jusqu'à l'un des événements suivants se produit:

  1. L'appareil se connecte, et le service push distribue le message.
  2. Le message expire. Dans ce cas, le service push supprime le message de sa file d'attente et il ne sera jamais livré.

Lorsque le service push envoie un message, le navigateur le reçoit, le déchiffre et envoyez un événement push dans votre service worker.

Un service worker est un "spécial" fichier JavaScript. Le navigateur peut exécuter ce code JavaScript sans que votre page ne soit ouvert. Il peut même exécuter ce JavaScript lorsque le navigateur est fermé. Un service worker a également Les API, telles que la méthode push, qui ne sont pas disponibles sur la page Web (c'est-à-dire les API qui ne sont pas disponibles d'un script de service worker).

Il se trouve dans la partie push du service worker que vous pouvez effectuer toutes les tâches en arrière-plan. Toi peut effectuer des appels d'analyse, mettre des pages en cache hors connexion et afficher des notifications.

Lorsqu&#39;un message push est envoyé depuis un service push vers l&#39;appareil d&#39;un utilisateur, votre service worker reçoit un événement push.

C'est le processus complet des messages push.

Étapes suivantes

Ateliers de programmation