L'API Beacon est une interface basée sur JavaScript pour:
envoyer une petite quantité de données au serveur depuis le navigateur, sans attendre de réponse. Dans cet article, nous examinerons dans quels cas l'API Beacon sera utile, en quoi elle diffère de l'utilisation de XMLHTTPRequest (Ajax) aux mêmes fins et comment l'utiliser.
Pourquoi avons-nous besoin d'une autre API?
L'API Beacon est utilisée pour envoyer de petites données au serveur sans attendre de réponse . La dernière partie de la déclaration est la plus intéressante. L'API Beacon est conçue spécifiquement pour envoyer des données et les oublier. Pas besoin d'attendre une réponse, car elle ne le sera jamais.
Une métaphore avec des cartes postales, ce sont des cartes que les gens s'envoient / s'envoient. En règle générale, ils ont écrit un petit texte sur eux ("Où êtes-vous? Et je suis lol en mer.", "Ici, il fait beau, pas comme dans votre bureau"), ils les ont jetés par la poste et ont oublié. Personne ne s'attendait à une réponse comme "Je suis déjà parti pour vous", "C'est merveilleux dans mon bureau."
Il existe de nombreux cas où l'approche «envoyer et oublier» serait appropriée.
Suivi des statistiques et informations analytiques
C'est la première chose qui me vient à l'esprit. Les grandes solutions comme Google Analytics peuvent fournir un bon aperçu des choses de base. Mais si nous voulons quelque chose de plus personnalisé? Nous devons écrire du code pour suivre ce qui se passe sur la page (comment les utilisateurs interagissent avec les composants, jusqu'où ils défilent, quelles pages ont été affichées avant la première vente), puis envoyer ces données au serveur lorsque l'utilisateur quitte la page. Beacon est idéalement adapté à une telle tâche, car nous envoyons simplement des données et nous n'avons pas besoin d'une réponse du serveur.
Débogage et journalisation
Une autre application enregistre les informations à partir du code JavaScript. Imaginez une situation où vous avez une grande application avec une interface utilisateur / UX riche. Tous les tests sont verts, et l'erreur apparaît périodiquement sur le pro que vous connaissez, mais vous ne pouvez pas le faire en raison d'un manque d'informations. Dans ce cas, vous pouvez utiliser Beacon pour les diagnostics.
En fait, toute tâche de journalisation peut être résolue à l'aide de Beacon. Cela peut être la création de points de sauvegarde dans les jeux, la collecte d'informations sur l'utilisation de nouvelles fonctionnalités, l'enregistrement des résultats des tests, etc. Si cela se produit dans le navigateur et que vous souhaitez que le serveur le sache, Beacon est ce dont vous avez besoin.
N'avons-nous pas fait cela avant?
Je sais à quoi tu penses. Rien de tout cela n'est nouveau? Nous communiquons avec le Nord via XMLHTTPRequest depuis plus de 10 ans. Nous avons récemment commencé à utiliser l'API Fetch, qui fait en fait la même chose, juste avec la nouvelle interface Promise. Alors pourquoi avons-nous besoin d'une autre API Beacon?
La caractéristique clé est que nous n'avons pas besoin d'une réponse du serveur. Le navigateur peut mettre en file d'attente la demande et envoyer des données sans bloquer l'exécution de tout code. Étant donné que le navigateur exploite cela, peu importe que le code soit toujours en cours d'exécution ou non, le navigateur enverra simplement des demandes en arrière-plan.
C Beacon API n'a pas besoin d'attendre le meilleur moment pour le réseau CPU. Le simple fait d'ajouter une demande à la file d'attente à l'aide d'une balise n'a pratiquement aucune valeur.
Pour comprendre pourquoi cela est important, regardez simplement comment et où une telle logique est généralement utilisée. Par exemple, afin de mesurer depuis combien de temps l'utilisateur est sur la page, nous devons envoyer une demande au serveur le plus près possible de la fin de la session.
Cela se fait généralement au unload ou avant le unload . Un tel code peut bloquer l'exécution, et si la page est retardée, le chargement de la page suivante est également retardé. Cela ne donne pas le meilleur UX.
Comprenez-vous à quel point les requêtes HTTP sont lentes? Et la dernière chose que vous voulez, c'est pousser la requête HTTP entre les transitions.
Essayer l'API Beacon
L'exemple d'utilisation de base est très simple:
let result = navigator.sendBeacon(url, data);
result valeur booléenne. Si le navigateur a ajouté la demande à la file d'attente - true , sinon false .
Utilisation de navigator.sendBeacon ()
navigator.sendBeacon accepte deux paramètres. Le premier est l'URL à laquelle la demande sera envoyée, le second est les données qui doivent être envoyées. La demande a la forme de HTTP POST .
data - ce paramètre peut accepter plusieurs formats de données, avec lesquels l'API Fetch fonctionne. Il peut s'agir de Blob, BufferSource, FormData ou URLSearchParams, etc.
J'aime utiliser FormData pour des données clé-valeur simples, ce n'est pas une classe complexe et facile à utiliser.
// URL let url = '/api/my-endpoint'; // FormData let data = new FormData(); data.append('hello', 'world'); let result = navigator.sendBeacon(url, data); if (result) { console.log(' !'); } else { console.log('.'); }
Prise en charge du navigateur
La prise en charge de cette API est assez solide. Le seul navigateur qui ne prend pas en charge est Internet Explorer (je ne m'y attendais pas) et Opera Mini. Mais dans Edge, tout fonctionne. Dans la plupart des cas, il existe un support, mais il vaut mieux vérifier au cas où:
if (navigator.sendBeacon) { // Beacon } else { // XHR? }
Exemple: journalisation du temps passé sur la page
Afin de voir tout cela dans la pratique, créons un système simple pour calculer le temps que l'utilisateur est sur la page. Lorsque la page se charge, nous regardons l'heure et quand elle part, nous envoyons une requête depuis le début de la visualisation et celle en cours au serveur.
Étant donné que nous ne sommes intéressés que par le temps passé sur la page, et non par le présent, nous pouvons utiliser performance.now() pour obtenir l'horodatage de base lors du chargement de la page:
let startTime = performance.now();
Enveloppons un petit morceau de logique dans une fonction facile à utiliser:
let logVisit = function() { // Test that we have support if (!navigator.sendBeacon) return true; // URL to send the data to, eg let url = '/api/log-visit'; // Data to send let data = new FormData(); data.append('start', startTime); data.append('end', performance.now()); data.append('url', document.URL); // Let's go! navigator.sendBeacon(url, data); };
Enfin, nous devons appeler cette fonction lorsque l'utilisateur quitte la page. La première pensée a été d'utiliser le unload , mais Safari sur Mac semble bloquer la demande pour des raisons de sécurité. Par conséquent, il est préférable d'utiliser avant le beforeunload :
window.addEventListener('beforeunload', logVisit);
Lorsque la page est déchargée (ou avant), notre fonction logVisit() sera appelée et, si le navigateur prend en charge l'API Beacon, il enverra une demande au serveur.
Quelques points
Étant donné que la plupart des problèmes pour lesquels l'API Beacon sera utilisée tournent autour du suivi des activités, il sera important de noter la partie sociale et juridique de toute cette cuisine.
GDPR
N'oubliez pas cela.
DNT: NE PAS SUIVRE
De plus, les navigateurs ont une option qui permet aux utilisateurs d'indiquer qu'ils ne souhaitent pas que leur activité soit suivie. Do Not Track envoie un en-tête HTTP qui ressemble à ceci:
DNT: 1
Si vous suivez des données qui peuvent indiquer l'utilisateur et que l'en-tête de la demande a DNT: 1 , il est préférable d'écouter l'utilisateur et de ne pas enregistrer de données. Par exemple, en utilisant PHP, cela peut être vérifié comme suit:
if (!empty($_SERVER['HTTP_DNT'])) {
En conclusion
L'API Beacon est en effet un moyen très pratique d'envoyer des données au serveur, notamment dans le cadre de la journalisation. La prise en charge du navigateur est d'un niveau suffisant et vous permet de consigner facilement toutes les informations sans conséquences négatives pour les performances et la réactivité de votre interface utilisateur. La nature non bloquante de ces requêtes y joue un très bon rôle, elle est beaucoup plus rapide que les alternatives XHR et Fetch.
