[Перевод] Регистрация действий с помощью API веб-маяков

внешний интерфейс сервер браузер Программа перевода самородков

Beacon API — это легкий и эффективный способ передачи информации с веб-страницы на сервер. Давайте посмотрим, как его использовать и чем он отличается от традиционных методов Ajax.

Beacon API — это веб-API на основе JavaScript для отправки небольших объемов данных из браузера на веб-сервер без ожидания ответа. В этой статье мы представим сценарии, в которых его можно использовать, его и другие подобные методы, такие какXMLHTTPRequest(«Ajax») отличается и как с ним начать.

Если вы знаете, почему вам следует использовать маяк, вы всегда можете сразу перейти кначинаячасть.

Для чего нужен Beacon API?

Beacon API используется для отправки небольших объемов данных на сервер, в то время какНе нужно ждать ответа. Последняя часть является ключевой и указывает, почему маяки так полезны — нашему коду никогда не нужно обрабатывать ответ, даже если сервер его отправляет. Beacon предназначен для отправки данных, а затем о них забывают. Я не ожидал ответа, и мы не получаем ответа.

Думайте об этом как об открытке, которую нужно отправить домой в отпуск. Вы помещаете на него небольшое количество данных (вроде «хотелось бы, чтобы вы были здесь» и «погода была хорошей»), кладете его в почтовый ящик и не ожидаете ответа. Никто не будет отвечать на открытку со словами: «Да, если бы я действительно был там, большое спасибо!»

Для современных веб-сайтов и приложений существует множество вариантов использования, которые попадают в эту модель обработки по принципу «отправил и забыл».

заставить процесс вести себятолько чтоДобро – непростая задача. Вот почему мы организовали **сеансы «Я так работаю»** — умный обмен файлами cookie с отличными результатами. Конечно этоРазрушение членских услугчасть.

Отслеживайте статистику и анализ данных

Первый вариант использования, который приходит на ум большинству людей, — это аналитика. Большое решение, такое как Google Analytics, может дать хороший обзор таких вещей, как посещения страниц, но что, если нам нужно что-то более персонализированное? Мы могли бы написать некоторый JavaScript для отслеживания того, что происходит на странице (возможно, как пользователь взаимодействует с компонентом или какую статью прочитали, прежде чем следовать совету CTA), но нам также нужно отправлять эти данные на сервер, когда пользователь уходит. страница. Beacon делает это идеально, потому что мы просто регистрируем данные и не нуждаемся в ответе.

Нет никаких причин, по которым мы не можем охватить рутинные задачи, которые обычно передаются Google Analytics, предоставляя данные на основе самих пользователей и возможностей их устройств и браузеров. Вы даже можете связать эту статистику с известными людьми, если пользователь вошел в сеанс. Какие бы данные вы ни собирали, вы можете использовать Beacon для отправки их обратно на сервер.

отлаживать и регистрировать

Другое полезное применение этого поведения — регистрация информации из кода JavaScript. Предположим, у вас на странице есть сложный интерактивный компонент, который отлично проходит все тесты, но иногда дает сбой в продакшене. Вы знаете, что произошел сбой, но у вас нет возможности увидеть сообщение об ошибке и начать отладку. Если вы можете пронюхать сам сбой из своего кода, вы можете собрать диагностику и использовать Beacon, чтобы отправить все это обратно для регистрации.

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

Разве мы уже не сделали это?

Я знаю, о чем ты думаешь. Ничего нового, верно? Уже более десяти лет мы можем использоватьXMLHTTPRequestОбщайтесь с сервером из браузера. Недавно у нас снова появился Fetch API, использующий более современный интерфейс на основе Promise, чтобы делать почти то же самое. В таком случае, зачем нам Beacon API?

Суть здесь в том, что поскольку мы не получаем ответа, браузер может поставить запрос в очередь и отправить его.неблокирующее выполнениелюбой другой код. Что касается браузера, то неважно, работает ли наш код до сих пор, или где код выполняется, потому что возвращать нечего, он может просто отправить HTTP-запрос в фоновый режим до тех пор, пока ему не будет удобно его отправить.

Это может означать ожидание низкой загрузки ЦП, простоя сети или отправку напрямую, когда это возможно. Важно то, что браузер ставит Beacon в очередь и немедленно возвращает управление. Это не испортит отправку Beacon.

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

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

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

Beacon справляется с этим, ставя запросы в очередь без блокировки, немедленно возвращая управление вашему коду. Затем браузер отвечает за отправку этого запроса в фоновом режиме без блокировки. Это делает все намного быстрее, что делает пользователей счастливее, и это заставляет нас всех работать.

начиная

Итак, мы поняли, что такое Beacon и зачем он нам нужен, так что давайте начнем с кода. Основы не могут быть проще:

let result = navigator.sendBeacon(url, data);

Результатом является логическое значение, возвращаемое, если браузер принял и поставил запрос в очередь.true, если во время этого процесса возникла проблема, вернитеfalse.

использоватьnavigator.sendBeacon()

navigator.sendBeaconПринимает два параметра. Первый параметр — запрашиваемый URL. Запрос выполняется как HTTP POST, отправляя любые данные, указанные во втором параметре.

Параметры данных могут быть в любом из множества форматов, которые берутся непосредственно из Fetch API. может бытьBlob,ОдинBufferSource,FormDataилиURLSearchParams- Практически любой тип тела запроса, используемый при создании запроса с помощью Fetch.

Для основных данных типа "ключ-значение" мне нравится использоватьFormDataПоскольку это не сложно, его легко прочитать.

// 将数据发送目标 URL
let url = '/api/my-endpoint';
    
// 创建一个新的 FormData 并添加一个键值对
let data = new FormData();
data.append('hello', 'world');
    
let result = navigator.sendBeacon(url, data);
    
if (result) { 
  console.log('Successfully queued!');
} else {
  console.log('Failure.');
}

Поддержка браузера

Браузер поддерживает Beacon хорошо, за исключением Internet Explorer (который работает в Edge) и Opera Mini. Это должно работать для большинства применений, но при использованииnavigator.sendBeaconТакже стоит заранее протестировать поддержку (браузера).

很简单就能做到：

    if (navigator.sendBeacon) {
      // Beacon 代码
    } else {
      // 没有 Beacon或许可以回退到 XHR？
    }

Если маяк недоступен, а запрос важен, вы можете вернуться к методам блокировки, таким как XHR. В зависимости от вашей аудитории и целей вы также можете игнорировать его.

Пример: регистрация времени, проведенного на странице

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

Поскольку нас интересует только затраченное время (а не фактическое время), мы можем использоватьperformance.now()чтобы получить базовую временную метку, когда страница была загружена.

let startTime = performance.now();

Если мы поместим журнал в функцию, мы сможем вызывать ее, когда страница выгружается.

let logVisit = function() {
  // 测试我们拥有 Beacon 支持
  if (!navigator.sendBeacon) return true;
      
  // 数据发送的URL的例子
  let url = '/api/log-visit';
      
  // 要发送的数据
  let data = new FormData();
  data.append('start', startTime);
  data.append('end', performance.now());
  data.append('url', document.URL);
      
  // 出发！
  navigator.sendBeacon(url, data);
};

Наконец, нам нужно вызвать эту функцию, когда пользователь покидает страницу. Я инстинктивно хочу использоватьunloadсобытие, но Safari на Mac блокирует запрос с предупреждением о безопасности, поэтому здесь мы используемbeforeunloadбыло бы лучше.

window.addEventListener('beforeunload', logVisit);

Когда страница выгружается (или вот-вот выгрузится), нашlogVisit()Функция будет называться. Если браузер поддерживает API Beacon, наш маяк будет отправлен.

(Обратите внимание, что без поддержки Beacon мы возвращаемtrue, делая вид, что все в порядке. вернутьfalseотменит событие и прервет выгрузку страницы. Тогда не повезло. )

Примечания по отслеживанию

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

GDPR

Мы можем рассмотреть недавние законы GDPR в Европе, которые связаны с электронной почтой, но, конечно, эти законы также предусматривают хранение любых форм персональных данных. Если вы знаете, кто ваши пользователи, и можете идентифицировать их сеансы, вам следует проверить, какие действия вы регистрируете и как они соотносятся с вашими заявленными условиями использования.

Обычно нам не нужно отслеживать столько данных, сколько нам говорят разработчики. предпочтительно преднамеренныйНе делайтеХраните информацию, которая может быть использована для идентификации пользователей, а затем уменьшите вероятность того, что что-то испортится.

DNT: Do Not Track

В дополнение к юридическим требованиям в большинстве браузеров есть настройка, которая позволяет пользователям выразить желание не отслеживаться. Do Not Track отправит такой HTTP-заголовок с запросом:

DNT: 1

Если вы регистрируете данные, которые могут отслеживать конкретного пользователя, и пользователь отправляет положительное числоDNTзаголовок, то лучше следовать пожеланиям пользователя и анонимизировать эти данные или вообще не отслеживать их.

Например, в PHP вы можете легко обнаружить этот заголовок следующим образом:

if (!empty($_SERVER['HTTP_DNT'])) { 
  // 用户不想被跟踪…… 
}

Суммировать

Beacon API — очень полезный способ вернуть данные со страницы на сервер, особенно для таких вещей, как журналы. Поддержка браузеров обширна и позволяет беспрепятственно регистрировать данные, не оказывая негативного влияния на работу пользователя в Интернете и производительность веб-сайта. Неблокирующий характер запросов означает, что производительность намного выше, чем у альтернатив, таких как XHR и Fetch.

Если вы хотите узнать больше об API Beacon, стоит посетить следующие сайты.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории