Иногда бывает удобно отправить некоторые данные с веб-страницы на веб-сервер, не дожидаясь ответа. Например, мы можем захотеть отправить аналитические или диагностические данные до того, как пользователь покинет страницу.
Обычно отправка данных перед выходом предполагает прослушивание события unload , поскольку отправка запроса в любое время раньше приведет к неполным данным - например, мы могли пропустить щелчок, который произошел непосредственно перед выходом. Предостережение заключалось в том, что запросы, отправляемые в обработчике выгрузки, должны быть синхронными, поскольку большинство браузеров обычно игнорируют асинхронные XMLHttpRequests, сделанные в обработчике выгрузки. Такой подход замедляет навигацию, поскольку пользователю приходится ждать возврата запроса, прежде чем можно будет отобразить новую страницу.
Beacon API решает эту проблему, позволяя асинхронно отправлять HTTP-запросы с небольшими полезными данными из браузера на веб-сервер, не задерживая другой код в событии выгрузки страницы и не влияя на производительность навигации по следующей странице.
Метод navigator.sendBeacon() ставит данные в очередь для передачи браузером как можно скорее, но не замедляет навигацию. Он возвращает true , если браузер может успешно поставить данные в очередь для передачи. В противном случае он возвращает false .
Допустим, у нас есть конечная точка сервера для получения данных маяка с нашей страницы по этому адресу:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Если мы добавим метод sendBeacon() в обработчик событий pagehide , конечная точка получит данные, когда пользователь уйдет со страницы:
Если вы проверите вкладку «Сеть» в Chrome DevTools с установленным флажком «Сохранять журналы» , вы увидите HTTP-запрос POST к указанной выше конечной точке, отправляемый при выходе со страницы.
Кроме того, вы можете посетить страницу проверки PutsReq , чтобы узнать, были ли получены данные маяка.
Существует также пользовательский элемент Polymer , который позволяет отправлять данные маяка — <beacon-send> . Проверьте это на ebidel.github.io/beacon-send .