Qu'est-ce que "sendBeacon"
Vous connaissez probablement les deux options à utiliser lorsque vous souhaitez effectuer une demande à partir d'un client, comme à partir de votre application Web progressive : soit XMLHttpRequest, soit le nouveau "fetch". Mais saviez-vous qu'il existe une troisième option, spécialement conçue pour envoyer de très petits morceaux de données comme des données d'analyse ? C'est une fonction appelée "sendBeacon", qui est disponible dans les navigateurs modernes à partir de l'objet "navigator".
Comment utiliser "sendBeacon"
L'utilisation de cette fonction de requête spécialement conçue pour les petits morceaux de données est vraiment simple. Tant que le "navigateur" ainsi que la fonction "sendBeacon" sur le navigateur sont disponibles, tout ce que vous avez à faire est de fournir une URL ainsi que la charge utile à envoyer.
Vous pouvez envoyer les types de données suivants.
- Buffer de tableau
- ArrayBufferView
- Goutte
- Chaîne DOM
- Données de formulaire
- URLSearchParams
Chaque appel de "sendBeacon" transmettra une requête POST au point de terminaison spécifié.
async function track(payload: TrackPayload){
// We're using 'optional property access'
// for a simple and clean implementation.
//
// You could of course also use nested if(){ ... }.
await navigator?.sendBeacon?.('/track', payload);
}
// The following example is taken directly
// from the MDN page, linked in the addendum
// at the end of this page.
//
// It demonstrates the usage with the
// 'visibilitychange'-event when the user
// could close your web app.
document.addEventListener('visibilitychange', function logData() {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/log', analyticsData);
}
});
Qu'est ce qui est different
Le principal avantage de "sendBeacon" est que vos requêtes seront en fait mises en file d'attente par l'agent, c'est-à-dire par le navigateur sur lequel votre client est actuellement chargé. Tant qu'une connexion réseau est disponible, les données sont ensuite envoyées. Si aucune donnée n'est disponible ou si l'utilisateur ferme votre application Web (avant que la demande n'ait pu être envoyée), le navigateur garantira toujours que la demande sera éventuellement transmise.
Les autres fonctions de requête courantes ne garantissent pas que votre requête sera envoyée lorsqu'un utilisateur fermera l'application Web (par exemple en fermant l'onglet). "sendBeacon" est également complètement asynchrone et n'introduit aucun retard lors de la navigation vers une autre page de votre application Web tout en envoyant les données d'analyse pour l'historique des pages de l'utilisateur.
Améliorez progressivement votre application Web
Si vous avez un point de terminaison personnalisé pour les données d'analyse, vous devez absolument essayer cette nouvelle API. N'oubliez pas qu'un utilisateur peut appeler votre application Web avec un navigateur qui ne prend pas en charge l'API (bien que cela soit très improbable), vous pouvez donc progressivement améliorer votre application en vérifiant simplement la prise en charge avant de l'utiliser.
