Иногда вам может понадобиться сообщить серверу, что пользователь покидает страницу. Это полезно, например, для очистки несохраненных изображений, временно хранящихся на сервере, для того, чтобы пометить этого пользователя как «оффлайн» или для регистрации, когда они завершили свой сеанс.
Раньше вы отправляли в beforeunload
функции запрос AJAX , однако здесь возникают две проблемы. Если вы отправляете асинхронный запрос, нет никакой гарантии, что запрос будет выполнен правильно. Если вы отправляете синхронный запрос, он более надежен, но браузер будет зависать, пока запрос не будет завершен. Если это медленный запрос, это будет огромным неудобством для пользователя.
К счастью, теперь у нас есть navigator.sendBeacon()
. Используя этот sendBeacon()
метод, данные передаются на веб-сервер асинхронно, когда пользовательский агент имеет возможность сделать это, не задерживая выгрузку и не влияя на производительность следующей навигации. Это решает все проблемы с отправкой данных аналитики: данные отправляются надежно, они отправляются асинхронно и не влияют на загрузку следующей страницы. Вот пример его использования:
window.addEventListener("unload", logData, false);
function logData() {
navigator.sendBeacon("/log.php", analyticsData);
}
sendBeacon()
это поддерживается в:
- Край 14
- Firefox 31
- Хром 39
- Safari 11.1
- Опера 26
- iOS Safari 11.4
В настоящее время НЕ поддерживается в:
- Internet Explorer
- опера мини
Вот полифилл для sendBeacon () на случай, если вам нужно добавить поддержку неподдерживаемых браузеров. Если метод недоступен в браузере, вместо этого он отправит синхронный запрос AJAX.