A veces, es útil enviar algunos datos de una página web a un servidor web sin necesidad de esperar una respuesta. Por ejemplo, es posible que deseemos enviar estadísticas o datos de diagnóstico antes de que el usuario salga de una página.
Por lo general, enviar datos antes de la salida implicaba escuchar el evento unload, ya que enviar la solicitud en cualquier momento anterior generaría datos incompletos (p.ej., es posible que hayamos omitido un clic que ocurrió justo antes de la salida).
La salvedad era que las solicitudes enviadas en el controlador de descarga debían ser síncronas, ya que la mayoría de los navegadores suelen ignorar las XMLHttpRequests asíncronas que se realizan en un controlador de descarga.
Este enfoque ralentiza la navegación, ya que el usuario debe esperar a que vuelva la solicitud antes de que se pueda renderizar una página nueva.
La API de Beacon resuelve este problema, ya que te permite enviar solicitudes HTTP de forma asíncrona con cargas útiles de datos pequeñas desde un navegador a un servidor web, sin retrasar otro código en el evento de descarga de la página ni afectar el rendimiento de la navegación a la siguiente página.
El método navigator.sendBeacon() pone en cola los datos que el navegador transmitirá lo antes posible, pero no ralentiza la navegación.
Muestra true si el navegador puede poner en cola correctamente los datos para la transferencia. De lo contrario, muestra false.
Supongamos que tenemos un extremo de servidor disponible para recibir datos de píxeles contadores de nuestra página en esta dirección:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Si agregamos un método sendBeacon() en el controlador de eventos pagehide, el extremo recibirá los datos cuando el usuario salga de la página:
Si inspeccionas la pestaña Red en las Herramientas para desarrolladores de Chrome con la casilla de verificación Preserve logs marcada, verás que se envía una solicitud HTTP POST al extremo anterior cuando salgas de la página.
Como alternativa, puedes visitar la página de inspección de PutsReq para ver si se recibieron los datos del píxel contador.
También hay un elemento personalizado de Polymer que te permite enviar datos de píxeles contadores: <beacon-send>. Consulta ebidel.github.io/beacon-send.