Introduction à l'API Beacon

Les plats clés

• L'API Beacon fournit une solution aux développeurs Web pour envoyer de petites quantités de données, telles que l'analyse ou les diagnostics, sur le serveur de manière asynchrone pendant que la page actuelle décharge, résolvant le problème du retard potentiel ou de la perte d'informations précieuses.
• L'API de balise se compose d'une méthode, SendBeacon, qui est attachée à l'objet Navigator. Il faut deux paramètres, l'URL pour soumettre des données et les données à soumettre. Les données sont soumises via une demande HTTP Post et peuvent être envoyées sous forme de ArrayBufferView, un blob, un domstring ou un objet FormData.
• L'API Beacon est soutenue par les principaux navigateurs de bureau comme Chrome, Firefox et Opera, mais pas dans les dernières versions d'IE et de Safari. Pour les navigateurs sans support, les développeurs peuvent utiliser la détection des fonctionnalités et le repli vers les anciennes méthodes de soumission des données sur le déchargement de la page.

L'API Beacon permet aux développeurs Web de envoyer facilement de petites quantités de données, telles que des données d'analyse ou de diagnostic, au serveur de manière asynchrone pendant que la page actuelle décharge. Dans cet article, nous allons examiner certains des problèmes que l'API de la balise résout et vous montrer comment utiliser l'API.

sans l'API de balise, renvoyer des données à votre serveur lorsque l'utilisateur s'éloigne d'une page peut être plus difficile qu'il n'y paraît. Vous ne voulez pas retarder la page suivante du chargement, car cela nuirait à l'expérience de l'utilisateur de votre site. Pourtant, vous ne voulez pas perdre des informations précieuses qui pourraient aider à améliorer votre site: l'envoi des données trop tôt pourrait signifier que vous perdez des informations précieuses que vous auriez pu capturer si vous aviez attendu une fraction plus longtemps.

Une solution

typique à qui envoie des données d'analyse au serveur car les décharges du document peuvent ressembler à ceci:

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

Un gestionnaire d'événements de déchargement, qui soumet les données via une demande AJAX. Lorsque l'événement de déchargement de la page se déclenche, les données sont capturées via la fonction CaptureAnalyticsData et envoyée au serveur via une demande Ajax. Remarque Le troisième paramètre à xhr.open est faux, indiquant que la demande ajax est

synchrone . Les navigateurs ignorent généralement les demandes asynchrones faites lors d'un gestionnaire de déchargement, de sorte qu'une telle demande ajax a être synchrone. Comme il est synchrone, le navigateur doit attendre que la demande termine avant , il peut décharger le document et afficher la page suivante. Cette attente supplémentaire peut conduire à la perception de mauvaises performances.

D'autres techniques utilisées à la place d'une demande Ajax synchrone incluent le réglage du SRC d'un objet d'image dans le gestionnaire de déchargement. Le navigateur attendra que l'image se charge avant de décharger le document, pendant laquelle des données peuvent être soumises au serveur. Cependant, cela a encore le même problème: le déchargement du document actuel sera retardé tandis que la demande, cette fois pour l'image, termine, ce qui peut conduire à la perception de mauvaises performances.

L'API Beacon a été créée pour aider à résoudre ces problèmes. Il définit une interface qui permet aux développeurs d'envoyer de petites quantités de données au serveur Web de manière asynchrone . Il se compose d'une seule méthode, SendBeacon, qui est attachée à l'objet Navigator. SendBeacon prend deux paramètres, l'URL à laquelle vous souhaitez soumettre des données et les données à soumettre:

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

Les données sont soumises via une demande HTTP Post et peuvent être envoyées sous forme de ArrayBufferView, un blob, un Domstring ou un objet FormData. Le navigateur fait la file d'attente de la demande et l'envoie «dans la plus première occasion disponible, mais peut hiérarchiser la transmission des données plus bas par rapport aux autres trafics réseau». (selon la spécification W3C). SendBeacon renvoie True si les données ont été soumises avec succès au serveur, ou fausse autrement.

La prise en charge de Navigator.SendBeacon est décente dans les principaux navigateurs de bureau. Vous le trouverez pris en charge dans les versions actuelles de Chrome, Firefox et Opera, mais pas dans les dernières versions de IE et Safari. Comme vous ne pouvez pas garantir sa disponibilité, vous êtes le meilleur est d'utiliser la détection des fonctionnalités et le repli vers l'une des anciennes méthodes de soumission des données sur le déchargement de la page:

<span>window.addEventListener('unload', function(event) {
</span>  <span>var data = captureAnalyticsData(event);
</span>  <span>navigator.sendBeacon('/log', data);
</span><span>});</span>

J'ai créé un petit exemple d'application que vous pouvez utiliser pour voir l'API Beacon en action. Vous devrez installer Node.js pour exécuter le serveur. Pour exécuter l'échantillon:

1. Téléchargez et dézip le fichier zip dans un dossier de votre choix, par exemple beaconapi
2. Ouvrez votre terminal et modifiez le répertoire dans le dossier que vous avez créé à l'étape 1, par exemple CD / PATH / TO / BEACONAPI
3. Toujours dans le terminal, saisissez l'installation de NPM et appuyez sur
4. Tapez maintenant Debug = beaconapi_demo ./bin/www et appuyez sur
5. Ouvrez un navigateur qui prend en charge l'API de la balise et le pointez sur http: // localhost: 3000

Vous devriez voir une page qui ressemble à ceci:

Dans cet exemple, nous utilisons Chrome. Ouvrez les outils Dev, basculez dans l'onglet réseau et cochez la case à cocher Préserver le journal. Filtrez les résultats pour que vous voyiez simplement les autres demandes. Maintenant, lorsque vous cliquez sur le bouton de déchargement, vous devriez voir les demandes de / journal connecté dans les outils de développement.

Conclusion

Cet article a introduit l'API Beacon. C'est une très petite API, mais remplit un créneau spécifique. J'espère que vous pourrez le mettre à bon escient.

Questions fréquemment posées (FAQ) sur la balise API

Quelle est la fonction principale de l'API BEACON?

L'API Beacon est une API Web qui permet aux applications Web d'envoyer des données du navigateur de l'utilisateur au serveur de manière efficace et non bloquante. Cette API est particulièrement utile pour envoyer des données d'analyse, qui peuvent être envoyées sans affecter l'expérience de navigation de l'utilisateur. L'API de balise garantit que les données sont envoyées même si l'utilisateur s'éloigne de la page ou ferme le navigateur.

En quoi l'API de la balise diffère-t-elle de Ajax?

Alors qu'Ajax et la balise L'API est utilisée pour envoyer des données du client au serveur, ils diffèrent dans leurs cas d'utilisation et leur comportement. AJAX est généralement utilisé pour récupérer les données du serveur et mettre à jour la page Web sans les recharger. D'un autre côté, l'API Beacon est utilisée pour envoyer des données au serveur, en particulier les données d'analyse, sans bloquer l'expérience de navigation de l'utilisateur. Contrairement à AJAX, l'API Beacon garantit que les données sont envoyées même si l'utilisateur s'éloigne de la page ou ferme le navigateur.

Comment puis-je utiliser l'API Beacon dans mon application Web?

Pour utiliser l'API Beacon dans votre application Web, vous pouvez utiliser la méthode Navigator.SendBeacon (). Cette méthode prend deux arguments: l'URL pour envoyer les données et les données à envoyer. Les données peuvent être un objet FormData, un blob, un objet ArrayBufferView ou un objet UrlSearchParams. Voici un exemple:

var data = new formData ();
data.append ('name', 'John Doe');
navigator.sendBeacon ('/ api / endpoint', données );

Quels sont les avantages de l'utilisation de l'API Beacon?

L'API Beacon offre plusieurs avantages pour les applications Web. Tout d'abord, il vous permet d'envoyer des données au serveur de manière non bloquante, ce qui signifie qu'elle n'affecte pas l'expérience de navigation de l'utilisateur. Deuxièmement, il garantit que les données sont envoyées même si l'utilisateur s'éloigne de la page ou ferme le navigateur. Cela le rend idéal pour l'envoi de données d'analyse, qui peuvent être envoyées à la fin de la session de l'utilisateur sans risquer la perte de données.

Y a-t-il des limites ou des inconvénients à l'utilisation de l'API de la balise?

La limitation de l'API Beacon est qu'elle ne fournit aucun commentaire sur la question de savoir si les données ont été reçues avec succès par le serveur. Cela signifie que vous ne pouvez pas l'utiliser pour des données critiques qui nécessitent la confirmation de la réception. De plus, l'API Beacon n'est pas prise en charge dans tous les navigateurs, vous devrez donc peut-être fournir une repli aux navigateurs qui ne le prennent pas en charge.

Comment l'API de balise gère-t-il les échecs?

Le L'API Beacon ne fournit aucun commentaire sur la question de savoir si les données ont été reçues avec succès par le serveur. Si les données ne peuvent pas être envoyées, par exemple, en raison de problèmes de réseau, l'API ne réessayera pas l'envoi des données. C'est pourquoi il est recommandé d'utiliser l'API Beacon pour les données non critiques qui ne nécessitent pas de confirmation de la réception.

Puis-je utiliser l'API Beacon pour envoyer des données dans un domaine différent?

Oui, vous pouvez utiliser l'API Beacon pour envoyer des données dans un domaine différent. Cependant, le serveur doit prendre en charge CORS (partage de ressources croisées) et doit être configuré pour accepter les demandes d'origine transversale de votre domaine.

L'API de la balise est-elle prise en charge dans tous les navigateurs?

L'API BACON L'API Beacon est prise en charge dans la plupart des navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, il n'est pas pris en charge dans Internet Explorer. Vous pouvez vérifier la prise en charge actuelle du navigateur sur des sites Web comme puis-je utiliser.

Puis-je envoyer de grandes quantités de données avec l'API de la balise?

L'API de la balise est conçue pour envoyer de petites quantités de données, tels que les données d'analyse. Bien qu'il n'y ait pas de limite difficile à la quantité de données que vous pouvez envoyer, l'envoi de grandes quantités de données peut avoir un impact sur les performances du réseau de l'utilisateur. Par conséquent, il est recommandé d'utiliser l'API de balise pour envoyer de petites quantités de données non critiques.

Puis-je annuler une demande de balise?

Non, une fois qu'une demande de balise est faite, elle ne peut pas être faite annulé. L'API Beacon ne fournit pas de moyen d'annuler ou d'annuler une demande de balise. C'est une autre raison pour laquelle il est recommandé d'utiliser l'API Beacon pour les données non critiques qui ne nécessitent pas de confirmation de la réception.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!