2.7Kпросмотров
11.8%от подписчиков
17 марта 2026 г.
Score: 2.9K
navigator.sendBeacon для отправки данных при закрытии страницы! Если нужно отправить аналитику или финальные данные сессии, обычные HTTP-запросы могут не успеть выполниться — пользователь закрыл вкладку или перешёл на другую страницу. Для таких случаев есть navigator.sendBeacon. Метод ставит данные в очередь на отправку и не блокирует закрытие страницы. Базовый пример:
navigator.sendBeacon('/analytics', JSON.stringify({ event: 'page_close'
})); Метод принимает URL и данные. Запрос отправляется методом POST. Если нужно явно указать Content-Type: application/json, лучше передать Blob:
navigator.sendBeacon( '/analytics', new Blob( [JSON.stringify({ event: 'page_close' })], { type: 'application/json' } )
); Пример 1 — отправка при скрытии страницы:
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { navigator.sendBeacon('/analytics', JSON.stringify({ event: 'session_end', time: Date.now() })); }
}); visibilitychange часто используют для отправки последних метрик перед уходом пользователя. Обычно это работает стабильнее, чем beforeunload. Пример 2 — отправка FormData:
const data = new FormData(); data.append('event', 'scroll_depth');
data.append('value', 80); navigator.sendBeacon('/analytics', data); Можно отправлять строки, FormData, Blob, URLSearchParams и некоторые бинарные типы данных. Пример 3 — проверка:
const accepted = navigator.sendBeacon('/analytics', JSON.stringify({ event: 'leave'
})); console.log('Beacon accepted:', accepted); Метод возвращает true, если браузер принял данные в очередь на отправку. Это не гарантия доставки, но означает, что отправка была запланирована браузером. 🔥 Если нужен ответ сервера, кастомные заголовки или полный контроль над запросом, можно использовать fetch с опцией keepalive. 📣 Code Ready | #практика