C
Code Ready | Frontend
@code_ready22.6K подп.
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 | #практика
2.7K
просмотров
1998
символов
Нет
эмодзи
Нет
медиа

Другие посты @code_ready

Все посты канала →
navigator.sendBeacon для отправки данных при закрытии страни — @code_ready | PostSniper