¿Qué es "sendBeacon"?
Probablemente conozca las dos opciones que debe utilizar cuando desee realizar una solicitud desde un cliente, como desde su aplicación web progresiva: XMLHttpRequest o la nueva "búsqueda". Pero, ¿sabía que existe una tercera opción, diseñada específicamente para enviar fragmentos de datos muy pequeños, como datos analíticos? Es una función llamada "sendBeacon", que está disponible en los navegadores modernos desde el objeto "navigator".
Cómo utilizar "sendBeacon"
Usar esta función de solicitud especialmente diseñada para pequeños fragmentos de datos es realmente simple. Siempre que estén disponibles tanto la función "navegador" como la función "sendBeacon" en el navegador, todo lo que necesita hacer es proporcionar una URL y una carga útil para enviar.
Puede enviar los siguientes tipos de datos.
- ArrayBuffer
- ArrayBufferView
- Gota
- DOMString
- FormData
- URLSearchParams
Cada llamada de "sendBeacon" transmitirá una solicitud POST al punto final especificado.
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é es diferente
La principal ventaja de "sendBeacon" es que el agente pondrá en cola sus solicitudes, es decir, el navegador que actualmente tiene cargado su cliente. Siempre que haya una conexión de red disponible, los datos se envían. Si no hay datos disponibles o el usuario cierra su aplicación web (antes de que se haya enviado la solicitud), el navegador aún garantizará que la solicitud se transmitirá, eventualmente.
Las otras funciones de solicitud comunes no garantizan que su solicitud se envíe cuando un usuario cierre la aplicación web (por ejemplo, al cerrar la pestaña). "sendBeacon" también es completamente asincrónico y no introduce ningún retraso al navegar a otra página en su aplicación web mientras sigue enviando los datos analíticos para el historial de la página del usuario.
Mejore progresivamente su aplicación web
Si tiene un punto final personalizado para datos analíticos, definitivamente debería probar esta nueva API. Tenga en cuenta que un usuario puede llamar a su aplicación web con un navegador que no es compatible con la API (aunque esto es muy poco probable), por lo que puede mejorar progresivamente su aplicación con una simple verificación de compatibilidad antes de usarla.
