Что такое sendBeacon
Вы, вероятно, знаете два варианта, которые можно использовать, когда вы хотите сделать запрос от клиента, например, из вашего прогрессивного веб-приложения: либо XMLHttpRequest, либо более новый «fetch». Но знаете ли вы, что есть третий вариант, специально разработанный для отправки очень небольших фрагментов данных, таких как данные аналитики? Это функция sendBeacon, которая доступна в современных браузерах из объекта "navigator".
Как использовать sendBeacon
Использовать эту специально созданную функцию запроса для небольших фрагментов данных очень просто. Пока доступны и «навигатор», и «sendBeacon» -функция навигатора, все, что вам нужно сделать, это предоставить URL-адрес, а также полезную нагрузку для отправки.
Вы можете отправлять следующие типы данных.
- ArrayBuffer
- ArrayBufferView
- Blob
- DOMString
- FormData
- URLSearchParams
Каждый вызов sendBeacon будет передавать POST-запрос на указанную конечную точку.
async function track(payload: TrackPayload){
// We're using 'optional property access'
// for a simple and clean implementation.
//
// You could of course also use nested if(){ ... }.
await navigator?.sendBeacon?.('/track', payload);
}
// The following example is taken directly
// from the MDN page, linked in the addendum
// at the end of this page.
//
// It demonstrates the usage with the
// 'visibilitychange'-event when the user
// could close your web app.
document.addEventListener('visibilitychange', function logData() {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/log', analyticsData);
}
});
Что отличается
Основное преимущество sendBeacon заключается в том, что ваши запросы фактически будут помещены в очередь агентом, то есть браузером, в котором в данный момент загружен ваш клиент. Пока доступно сетевое соединение, данные отправляются. Если данные недоступны или пользователь закрывает ваше веб-приложение (до того, как запрос мог быть отправлен), браузер по-прежнему будет гарантировать, что запрос будет передан в конечном итоге.
Другие общие функции запросов не гарантируют, что ваш запрос будет отправлен, когда пользователь закроет веб-приложение (например, закрыв вкладку). sendBeacon также полностью асинхронен и не вызывает задержки при переходе на другую страницу в вашем веб-приложении, при этом отправляя аналитические данные для истории страниц пользователя.
Постепенно улучшайте свое веб-приложение
Если у вас есть настраиваемая конечная точка для данных аналитики, вам обязательно стоит попробовать этот новый API. Помните, что пользователь может вызвать ваше веб-приложение в браузере, не поддерживающем API (хотя это маловероятно), поэтому вы можете постепенно улучшать свое приложение, просто проверяя наличие поддержки перед его использованием.
