API-интерфейс Beacon позволяет веб-разработчикам отправлять небольшие объемы данных, например аналитические или диагностические данные, обратно на сервер асинхронно во время выгрузки текущей страницы. В этой статье мы рассмотрим некоторые проблемы, которые решает Beacon API, и покажем, как использовать API.
Без Beacon API отправка данных обратно на сервер, когда пользователь уходит со страницы, может оказаться сложнее, чем кажется. Вы не хотите откладывать загрузку следующей страницы, так как это может повредить работе вашего сайта. Тем не менее, вы не хотите терять ценную информацию, которая может помочь улучшить ваш сайт: отправка данных слишком рано может означать, что вы потеряете ценную информацию, которую вы могли бы получить, если бы вы ждали немного дольше.
Типичное решение, которое отправляет аналитические данные на сервер при выгрузке документа, может выглядеть примерно так:
window.addEventListener('unload', function(event) { var xhr = new XMLHttpRequest(), data = captureAnalyticsData(event); xhr.open('post', '/log', false); xhr.send(data); }); function captureAnalyticsData(event) { return 'sample data'; } Обработчик события unload , который отправляет данные через Ajax-запрос. Когда происходит событие выгрузки страницы, данные captureAnalyticsData помощью функции captureAnalyticsData и отправляются на сервер с помощью запроса Ajax. Обратите внимание, что третий параметр для xhr.open имеет значение false , что указывает на синхронность запроса Ajax. Браузеры обычно игнорируют асинхронные запросы, сделанные во время обработки разгрузки, поэтому любой такой Ajax-запрос должен быть синхронным. Поскольку он работает синхронно, браузер должен дождаться завершения запроса, прежде чем он сможет выгрузить документ и отобразить следующую страницу. Это дополнительное ожидание может привести к восприятию плохой работы.
Другие методы, используемые вместо синхронного Ajax-запроса, включают установку src объекта Image в обработчике выгрузки. Браузер будет ждать загрузки Image перед выгрузкой документа, в течение которого данные могут быть отправлены на сервер. Однако с этим по-прежнему связана та же проблема: выгрузка текущего документа будет отложена до завершения запроса, на этот раз для Image , что может привести к ухудшению производительности.
API Beacon был создан для решения этих проблем. Он определяет интерфейс, который позволяет разработчикам отправлять небольшие объемы данных на веб-сервер асинхронно . Он состоит только из одного метода sendBeacon , который присоединен к объекту navigator . sendBeacon принимает два параметра: URL-адрес, на который вы хотите отправить данные, и данные для отправки:
window.addEventListener('unload', function(event) { var data = captureAnalyticsData(event); navigator.sendBeacon('/log', data); });
Данные отправляются через HTTP-запрос POST и могут быть отправлены в виде объекта ArrayBufferView , BLOB- объекта, DOMString или FormData . Браузер ставит запрос в очередь и отправляет его «при первой же возможности, но МОЖЕТ отдавать приоритет передаче данных ниже, чем другому сетевому трафику». (Согласно спецификации W3C ). sendBeacon возвращает true если данные были успешно отправлены на сервер, или false противном случае.
Поддержка navigator.sendBeacon приличная во всех основных настольных браузерах. Вы найдете его поддерживаемым в текущих версиях Chrome, Firefox и Opera, но не в последних версиях IE и Safari. Поскольку вы не можете гарантировать его доступность, лучше всего использовать обнаружение функций и использовать один из старых методов отправки данных при выгрузке страницы:
window.addEventListener('unload', function(event) { var xhr, data = captureAnalyticsData(event); if (navigator.sendBeacon) { navigator.sendBeacon('/log', data); } else { xhr = new XMLHttpRequest(); xhr.open('post', '/log', false); xhr.send(data); } });
Я создал небольшой пример приложения, которое вы можете использовать, чтобы увидеть Beacon API в действии. Вам понадобится установить Node.js для запуска сервера. Чтобы запустить образец:
- Загрузите и распакуйте zip-файл в папку по вашему выбору, например,
beaconapi - Откройте свой терминал и перейдите в папку, созданную на шаге 1, например,
cd /path/to/beaconapi - Все еще в терминале, введите
npm installи нажмите<Enter> - Теперь введите
DEBUG=beaconapi_demo ./bin/wwwи нажмите<Enter> - Откройте браузер, поддерживающий API-интерфейс Beacon, и укажите его http: // localhost: 3000.
Вы должны увидеть страницу, которая выглядит следующим образом:
В этом примере мы используем Chrome. Откройте Инструменты разработчика, перейдите на вкладку Сеть и установите флажок Сохранить журнал. Отфильтруйте результаты, чтобы вы могли видеть другие запросы. Теперь, когда вы нажмете кнопку « Unload , вы должны увидеть запросы к /log зарегистрированные в средствах разработки.
Вывод
В этой статье представлен API-интерфейс Beacon. Это очень маленький API, но он занимает определенную нишу. Надеюсь, вы сможете использовать его с пользой.