Beacon API es una interfaz basada en JavaScript para:
enviando una pequeña cantidad de datos al servidor desde el navegador, sin esperar una respuesta. En este artículo, consideraremos en qué casos la API Beacon será útil, en qué se diferencia de usar XMLHTTPRequest (Ajax) para los mismos fines y cómo usarla.
¿Por qué necesitamos otra API?
La API Beacon se utiliza para enviar datos pequeños al servidor sin esperar una respuesta . La última parte de la declaración es la más interesante. La API Beacon está diseñada específicamente para enviar datos y olvidarse de ellos. No es necesario esperar una respuesta, ya que nunca será.
Una metáfora con postales, estas son tarjetas que la gente se envía / envía entre sí. Como regla general, escribieron un pequeño texto sobre ellos ("¿Dónde estás? Y estoy en el mar", "Aquí tengo un clima excelente, no como en tu oficina"), los tiraron por correo y se olvidaron. Nadie esperaba una respuesta como "Ya me fui por ti", "Es maravilloso en mi oficina".
Hay muchos casos en los que sería apropiado el enfoque de "enviar y olvidar".
Seguimiento de estadísticas e información analítica
Esto es lo primero que me viene a la mente. Grandes soluciones como Google Analytics pueden proporcionar una buena visión general de cosas básicas. Pero si queremos algo más personalizado? Necesitamos escribir un código para rastrear lo que sucede en la página (cómo interactúan los usuarios con los componentes, qué tan lejos se desplazan, qué páginas se mostraron antes de la primera venta), y luego enviar estos datos al servidor cuando el usuario abandona la página. Beacon es ideal para tal tarea, ya que simplemente enviamos datos y no necesitamos una respuesta del servidor.
Depuración y registro
Otra aplicación está registrando información del código JavaScript. Imagine una situación en la que tiene una aplicación grande con UI / UX enriquecida. Todas las pruebas son verdes y el error aparece periódicamente en el profesional que conoce, pero no puede hacerlo debido a la falta de información. En este caso, puede usar Beacon para el diagnóstico.
De hecho, cualquier tarea con el registro se puede resolver con Beacon. Esto puede ser la creación de puntos de guardado en los juegos, la recopilación de información sobre el uso de nuevas funciones, el registro de los resultados de las pruebas, etc. Si esto es algo que sucede en el navegador y desea que el servidor lo sepa, Beacon es lo que necesita.
¿No hicimos esto antes?
Sé lo que estás pensando. ¿Nada de esto es nuevo? Nos hemos estado comunicando con el norte a través de XMLHTTPRequest durante más de 10 años. Recientemente comenzamos a usar la API Fetch, que de hecho hace lo mismo, solo con la nueva interfaz Promise. Entonces, ¿por qué necesitamos otra API Beacon?
La característica clave es que no necesitamos una respuesta del servidor. El navegador puede poner en cola la solicitud y enviar datos sin bloquear la ejecución de ningún código. Dado que el navegador aprovecha esto, no nos importa si el código aún se está ejecutando o no, el navegador simplemente enviará solicitudes en segundo plano en silencio.
C Beacon API no necesita esperar el mejor momento para la red de la CPU. Simplemente agregar una solicitud a la cola usando beacon es prácticamente inútil.
Para entender por qué esto es importante, solo mire cómo y dónde se usa generalmente esa lógica. Por ejemplo, para medir cuánto tiempo ha estado el usuario en la página, debemos enviar una solicitud al servidor lo más cerca posible al final de la sesión.
Esto generalmente se realiza al unload o beforeunload unload . Dicho código puede bloquear la ejecución, y si la página se retrasa, la carga de la página siguiente también se retrasa. Esto no conduce a la mejor experiencia de usuario.
¿Entiendes lo lentas que son las solicitudes HTTP? Y lo último que desea es empujar la solicitud HTTP entre las transiciones.
Probar la API Beacon
El ejemplo de uso básico es muy simple:
let result = navigator.sendBeacon(url, data);
result valor booleano. Si el navegador ha agregado la solicitud a la cola, true , si no false .
Usando navigator.sendBeacon ()
navigator.sendBeacon acepta dos parámetros. La primera es la URL a la que se enviará la solicitud, la segunda es la información que debe enviarse. La solicitud tiene la forma de HTTP POST .
data : este parámetro puede aceptar varios formatos de datos, con los cuales funciona la API Fetch. Puede ser Blob, BufferSource, FormData o URLSearchParams, etc.
Me gusta usar FormData para datos simples de valor clave, no es una clase compleja y fácil de usar.
// 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('.'); }
Soporte del navegador
El soporte para esta API es bastante sólido. El único navegador que no es compatible es Internet Explorer (no lo esperaba) y Opera Mini. Pero en Edge todo funciona. En la mayoría de los casos, hay soporte, pero es mejor verificarlo por si acaso:
if (navigator.sendBeacon) { // Beacon } else { // XHR? }
Ejemplo: tiempo de registro gastado en la página
Para ver todo esto en la práctica, creemos un sistema simple para calcular el tiempo que el usuario está en la página. Cuando se carga la página, miramos la hora y cuando se va, enviamos una solicitud desde el inicio de la visualización y la actual al servidor.
Como solo estamos interesados en el tiempo dedicado a la página, y no en el presente, podemos usar performance.now() para obtener la marca de tiempo base al cargar la página:
let startTime = performance.now();
Vamos a envolver una pequeña pieza de lógica en una función fácil de usar:
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); };
Finalmente, necesitamos llamar a esta función cuando el usuario abandona la página. Lo primero que se pensó fue usar la unload , pero Safari en Mac parece bloquear la solicitud por razones de seguridad. Por lo tanto, es mejor usar beforeunload :
window.addEventListener('beforeunload', logVisit);
Cuando la página se descarga (o antes), se logVisit() nuestra función logVisit() y, si el navegador admite la API Beacon, enviará una solicitud al servidor.
Un par de puntos
Dado que la mayoría de los problemas para los que se utilizará la API Beacon giran en torno al seguimiento de la actividad, será importante tener en cuenta la parte social y legal de toda esta cocina.
GDPR
Solo recuerda al respecto.
DNT: NO SEGUIR
Además, los navegadores tienen una opción que permite a los usuarios indicar que no desean que se rastree su actividad. Do Not Track envía un encabezado HTTP que se ve así:
DNT: 1
Si está rastreando datos que pueden indicar al usuario y el encabezado de la solicitud tiene DNT: 1 , entonces es mejor escuchar al usuario y no guardar ningún dato. Por ejemplo, usando PHP, esto se puede verificar de la siguiente manera:
if (!empty($_SERVER['HTTP_DNT'])) {
En conclusión
Beacon API es, de hecho, una forma muy conveniente de enviar datos al servidor, especialmente en el contexto del registro. El soporte del navegador está en un nivel suficientemente bueno y le permite registrar fácilmente cualquier información sin consecuencias negativas para el rendimiento y la capacidad de respuesta de su interfaz de usuario. La naturaleza sin bloqueo de estas solicitudes juega un papel muy bueno en esto; es mucho más rápido que las alternativas XHR y Fetch.
