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 queramos enviar datos de estadísticas o diagnóstico antes de que el usuario salga de una página.
Por lo general, el envío de datos antes de la salida implicaba escuchar el evento unload, ya que enviar la solicitud en cualquier momento antes generaría datos incompletos, p.ej., podríamos haber perdido 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, por lo general, ignoran las XMLHttpRequest asíncronas realizadas en un controlador de descarga.
Este enfoque ralentiza la navegación, ya que el usuario debe esperar a que la solicitud vuelva antes de que se pueda renderizar una página nueva.
La API de píxel contador resuelve este problema, ya que te permite enviar solicitudes HTTP de forma asíncrona con pequeñas cargas útiles de datos 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 de la página siguiente.
El método navigator.sendBeacon() pone en cola los datos que transmitirá el navegador lo antes posible, pero no ralentiza la navegación.
Devuelve true si el navegador puede poner correctamente los datos en cola para su transferencia. De lo contrario, muestra false.
Supongamos que tenemos un extremo de servidor disponible para recibir datos de la baliza desde 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 de red en las Herramientas para desarrolladores de Chrome con la casilla de verificación Conservar los registros marcada, verás que se envía una solicitud HTTP POST al extremo anterior cuando sales de la página.
Como alternativa, puedes visitar la página de inspección de PutsReq para ver si se recibieron los datos de la baliza.
También hay un elemento personalizado de Polymer que te permite enviar datos del píxel contador: <beacon-send>. Consúltalo en ebidel.github.io/beacon-send.