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:
- 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).
- Appel d'API à partir de votre backend / application qui déclenche un message push sur l'appareil d'un utilisateur.
- 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
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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.
É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 'some-kind-of-unique-id-1234'. 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.
É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:
- L'appareil se connecte, et le service push distribue le message.
- 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.
C'est le processus complet des messages push.
É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