Метод Navigator: sendBeacon()

Метод navigator.sendBeacon() асинхронно отправляет запрос HTTP POST с небольшим объёмом данных на веб-сервер.

Он предназначен для отправки аналитических данных на веб-сервер и избегает некоторых проблем с устаревшими методами отправки аналитики, такими как использование XMLHttpRequest.

url

URL, который получит данные data. Может быть относительным или абсолютным.

data Необязательно

Объект ArrayBuffer, TypedArray, DataView, Blob, строковая константа или объект, FormData или объект URLSearchParams содержащие данные для отправки.

Метод sendBeacon() возвращает true , если пользовательский агент успешно добавил data в очередь на передачу. В противном случае он возвращает false.

Этот метод предназначен для отправки данных на сервер кодом аналитики и диагностики.

Проблема с отправкой аналитики заключается в том, что сайт часто хочет отправить аналитику после того, как пользователь закончил работу со страницей: например, когда пользователь переходит на другую страницу. В этой ситуации браузер может быть готов к закрытию страницы, и в этом случае браузер может отказаться отправлять асинхронные XMLHttpRequest запросы.

В прошлом веб-страницы пытались отложить закрытие страницы достаточно долго, чтобы отправить данные. Для этого они использовали обходные пути, такие как:

• Отправка данных с помощью блокирующего синхронного XMLHttpRequest вызова.
• Создание элемента <img> и установка его src. Большинство пользовательских агентов отложат закрытие для загрузки изображения.
• Создание цикла бездействия на несколько секунд.

Все эти методы блокируют закрытие документа, что замедляет переход на следующую страницу. Следующая страница ничего не может сделать, чтобы избежать этого, поэтому новая страница кажется медленной, хотя вина лежит на предыдущей странице.

С помощью метода sendBeacon() данные передаются асинхронно, когда пользовательский агент имеет возможность сделать это, не задерживая закрытие или следующий переход. Это означает:

• Данные отправляются надёжно
• Они отправляются асинхронно
• Это не влияет на загрузку следующей страницы

Данные отправляются как запрос HTTP POST.

Веб-сайты часто хотят отправлять аналитику или диагностику на сервер, когда пользователь закончил работу со страницей. Наиболее надёжный способ сделать это — отправить данные при событии visibilitychange:

document.addEventListener("visibilitychange", function logData() {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
});

Избегайте событий unload и beforeunload

В прошлом многие веб-сайты использовали события unload или beforeunload для отправки аналитики в конце сессии. Однако это крайне ненадежно. Во многих ситуациях, особенно на мобильных устройствах, браузер не будет срабатывать с событиями unload, beforeunload, или pagehide. Например, эти события не будут срабатывать в следующих ситуациях:

1. Пользователь загружает страницу и взаимодействует с ней.
2. Когда он закончил, он переключается на другое приложение, а не закрывает вкладку.
3. Позже он закрывает приложение браузера с помощью менеджера приложений телефона.

Кроме того, событие unload несовместимо с кэшем вперёд/назад (bfcache), реализованным в современных браузерах. Некоторые браузеры, такие как Firefox, обрабатывают эту несовместимость, исключая страницы из bfcache, если они содержат обработчики unload, тем самым снижая производительность. Другие, такие как Safari и Chrome на Android, обрабатывают это, не срабатывая с событием unload при переходе пользователя на другую страницу в той же вкладке.

Firefox также будет исключать страницы из bfcache, если они содержат обработчики beforeunload.

Используйте pagehide в качестве резервного варианта

Чтобы поддержать браузеры, в которых не реализовано visibilitychange, используйте событие pagehide. Как и beforeunload и unload, это событие не гарантировано срабатывает, особенно на мобильных устройствах. Однако оно совместимо с bfcache.

В следующем примере указан обработчик события visibilitychange. Обработчик вызывает sendBeacon() для отправки аналитики.

document.addEventListener("visibilitychange", function logData() {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
});

• Событие visibilitychange.
• API маяков обзорная страница.
• Не теряйте состояние пользователя и приложения, используйте видимость страницы подробно объясняет, почему вы должны использовать visibilitychange, а не beforeunload/unload.
• API жизненного цикла страницы предоставляет рекомендации по обработке поведения жизненного цикла страницы в ваших веб-приложениях.
• PageLifecycle.js: JavaScript-библиотека, которая справляется с несовпадениями поведения жизненного цикла страницы в разных браузерах.
• Кэш «Назад/Вперед» объясняет, что такое кэш «Назад/Вперед» и его последствия для различных событий жизненного цикла страницы.