Comment faire Pousser des Œuvres

Par Matt Gaunt
Matt est un contributeur à WebFundamentals

Avant d’entrer dans l’API, regardons pousser à partir d’un niveau élevé, du début à la fin. Ensuite, en passant par des sujets individuels ou des API plus tard, vous aurez une idée de comment et pourquoi c’est important.

Les trois étapes clés pour implémenter push sont:

  1. ajout de la logique côté client pour abonner un utilisateur à push (c’est-à-dire, le JavaScript et L’interface utilisateur dans l’application yourweb qui enregistre un utilisateur pour envoyer des messages).
  2. l’appel API de votre back-end / application qui déclenche un message push sur l’appareil d’un utilisateur.
  3. Le fichier JavaScript du service worker qui recevra un « événement push » lorsque le push arrivera sur l’appareil. C’est dans ce JavaScript que vous pourrez afficher une notification.

examinons un peu plus en détail ce que chacune de ces étapes implique.

Étape 1: côté Client

la première étape consiste à « s’abonner » à un utilisateur pour envoyer des messages.

L’Abonnement d’un utilisateur nécessite deux choses., Tout d’abord, obtenir l’autorisation de l’utilisateur pour envoyerles messages push. Deuxièmement, obtenir un PushSubscription à partir du navigateur.

PushSubscription contient toutes les informations dont nous avons besoin pour envoyer un message push pour cet utilisateur.Vous pouvez « en quelque sorte » considérer cela comme un identifiant pour l’appareil de cet utilisateur.

tout cela se fait en JavaScript avec le PushAPI.

avant d’abonner un utilisateur, vous devrez générer un ensemble de »clés de serveur d’applications », que nous couvrirons plus tard.

Les clés de serveur d’applications, également appelées clés VAPID, sont uniques à votre serveur., Ils permettent au service apush de savoir quel serveur d’applications a abonné un utilisateur et de s’assurer que c’est le même serveur qui déclenche les messages push à cet utilisateur.

une Fois que vous avez souscrit l’utilisateur et un PushSubscription, vous aurez besoin d’envoyer lePushSubscription détails de votre backend / serveur. Sur votre serveur, vous allez enregistrer cet abonnement dans une base de données et l’utiliser pour envoyer un message push à cet utilisateur.,

Étape 2: Envoyer un Message Push

Lorsque vous voulez envoyer un message push à vos utilisateurs, vous avez besoin de faire un appel API pour un pushservice. Cet appel API inclurait les données à envoyer, à qui envoyer le message et anycriteria sur la façon d’envoyer le message. Normalement, cet appel D’API est effectué à partir de votre serveur.

Quelques questions que vous pourriez vous poser une question:

  • qu’est-ce que le service push?

  • à quoi ressemble L’API? Est-ce JSON, XML, autre chose?

  • que peut faire L’API?,

qui et Qu’est-ce que le service Push?

Un service push reçoit une demande Réseau, La valide et envoie un message push au navigateur approprié. Si le navigateur est hors ligne, le message est mis en file d’attente jusqu’à ce que le navigateur soit en ligne.

chaque navigateur peut utiliser n’importe quel service push qu’ils veulent, c’est quelque chose que les développeurs n’ont pas de contrôle. Ce n’est pas un problème car chaque service push attend le même appel D’API. Ce qui signifie que vous n’avez pas à vous soucier de qui est le service push. Vous devez juste vous assurer que votre API est valide.,

pour obtenir l’URL appropriée pour déclencher un message push (C’est-à-dire L’URL du service push), vous devez simplement regarder la valeurendpointdans unPushSubscription.

Voici un exemple des valeurs que vous obtiendrez à partir d’un PushSubscription:

Les clés de l’abonnement seront couvertes plus tard.

Ce qui ne l’API ressembler?

j’ai mentionné que chaque service web push attend le même appel D’API. Cette API est theWeb Push Protocol.It c’est une norme IETF qui définit comment vous effectuez un appel D’API vers un service push.,

l’appel API nécessite que certains en-têtes soient définis et que les données soient un flux d’octets. Nous examinerons les bibliothèques qui peuvent effectuer cet appel D’API pour nous ainsi que la façon de le faire nous-mêmes.

que peut faire L’API?

L’API fournit un moyen d’envoyer un message à un utilisateur, avec / sans données, et fournit des instructions sur la façon d’envoyer le message.

Les données que vous envoyez avec un message push doivent être cryptées. La raison en est qu’ilprévient les services push, qui pourraient être n’importe qui, de pouvoir afficher les données envoyées avec le message push., Ceci est important étant donné que c’est le navigateur qui décide du service push à utiliser, ce qui pourrait ouvrir la porte aux navigateurs utilisant un service push qui n’est pas sûr ou sécurisé.

lorsque vous déclenchez un message push, le service push reçoit l’appel API et met en file d’attente themessage. Ce message restera en file d’attente jusqu’à ce que l’appareil de l’utilisateur soit en ligne et que le pushservice puisse délivrer les messages. Les instructions que vous pouvez donner au service push définissent commentle message push est mis en file d’attente.

les instructions incluent des détails comme:

  • le temps de vie pour un message push., Cela définit la durée pendant laquelle un message doit être mis en file d’attente avant qu’il ne soit supprimé et non livré.

  • Définir l’urgence du message. Ceci est utile dans le cas où le service push préserve la durée de vie de la batterie des utilisateurs en ne délivrant que des messages hautement prioritaires.

  • donnez à un message push un nom de « sujet » 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 conservera votre message sur son serveur jusqu’à ce qu’un des événements suivants se produise:

  1. L’appareil est
  2. Le message arrive à expiration. Si cela se produit, le service push supprime le message de sa file d’attente etil ne sera jamais livré.,

lorsque le service push délivre un message, le navigateur reçoit le message, déchiffre anydata et envoie un événementpush dans votre service worker.

un service worker est un fichier JavaScript »spécial ». Le navigateur peut exécuter ce JavaScript sans que votre page ne soit ouverte. Il peut même exécuter ce JavaScript lorsque le navigateur est fermé. Un service worker a également des API, comme push, qui ne sont pas disponibles dans la page web (C’est-à-dire des API qui ne sont pas disponibles hors d’un script service worker).,

c’est à l’intérieur de l’événement « push » du travailleur de service que vous pouvez effectuer toutes les tâches en arrière-plan. Vous pouvez effectuer des appels d’analyse, mettre en cache des pages hors ligne et afficher des notifications.

C’est l’ensemble des flux de pour pousser de messagerie. Permet de passer à travers chaque étape plus en détail.

Commentaires

cette page a Été utile?
Oui
Ce qui était la meilleure chose à propos de cette page?
Il m’a aidé à remplir mon objectif(s)
Merci pour les commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.,

Il avait les informations dont j’ai besoin
Merci pour les commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.

Il avait des informations précises
Merci pour les commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.

Il est facile à lire
Merci pour les commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.

autre Chose
Merci pour les commentaires., Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.

Aucun
Ce qui était la pire chose à propos de cette page?
Il n’a pas m’aider à remplir mon objectif(s)
Merci pour les commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.

Il manquait des informations dont j’avais besoin
Merci pour les commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.,

Il avait des informations inexactes
Merci pour les commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.

C’est dur à lire
Merci pour les commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.

autre Chose
Merci pour les commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *