A veces, es posible que desee informar al servidor que el usuario está abandonando la página. Esto es útil, por ejemplo, para limpiar imágenes no guardadas almacenadas temporalmente en el servidor, para marcar a ese usuario como "fuera de línea" o para iniciar sesión cuando haya terminado su sesión.
Históricamente, enviaría una solicitud AJAX en la beforeunload
función, sin embargo, esto tiene dos problemas. Si envía una solicitud asincrónica, no hay garantía de que la solicitud se ejecute correctamente. Si envía una solicitud sincrónica, es más confiable, pero el navegador se bloqueará hasta que finalice la solicitud. Si esta es una solicitud lenta, esto sería un gran inconveniente para el usuario.
Afortunadamente, ahora tenemos navigator.sendBeacon()
. Al utilizar el sendBeacon()
método, los datos se transmiten de forma asincrónica al servidor web cuando el Agente de usuario tiene la oportunidad de hacerlo, sin retrasar la descarga ni afectar el rendimiento de la siguiente navegación. Esto resuelve todos los problemas con el envío de datos analíticos: los datos se envían de manera confiable, se envían de forma asincrónica y no afecta la carga de la página siguiente. Aquí hay un ejemplo de su uso:
window.addEventListener("unload", logData, false);
function logData() {
navigator.sendBeacon("/log.php", analyticsData);
}
sendBeacon()
es compatible con:
- Borde 14
- Firefox 31
- Cromo 39
- Safari 11.1
- Ópera 26
- iOS Safari 11.4
Actualmente NO es compatible con:
- explorador de Internet
- mini Opera
Aquí hay un polyfill para sendBeacon () en caso de que necesite agregar soporte para navegadores no compatibles. Si el método no está disponible en el navegador, enviará una solicitud AJAX sincrónica en su lugar.