A API Beacon é uma interface baseada em JavaScript para:
enviando uma pequena quantidade de dados para o servidor a partir do navegador, sem aguardar uma resposta. Neste artigo, consideraremos em que casos a API Beacon será útil, como ela difere do XMLHTTPRequest (Ajax) para os mesmos propósitos e como usá-la.
Por que precisamos de outra API?
A API Beacon é usada para enviar pequenos dados para o servidor sem aguardar uma resposta . A última parte da declaração é a mais interessante. A API Beacon foi projetada especificamente para enviar dados e esquecê-los. Não há necessidade de esperar uma resposta, como nunca será.
Uma metáfora com cartões postais, são cartões que as pessoas enviam / enviam umas às outras. Como regra geral, eles escreveram um pequeno texto sobre eles ("Onde você está? E eu sou uma garotinha no mar.", "Aqui estou com um ótimo clima, não como no seu escritório"), eles jogaram pelo correio e esqueceram. Ninguém esperava uma resposta como "Eu já fui para você", "É maravilhoso no meu escritório".
Existem muitos casos em que a abordagem "enviar e esquecer" seria apropriada.
Rastreamento estatístico e informações analíticas
Esta é a primeira coisa que vem à mente. Grandes soluções como o Google Analytics podem fornecer uma boa visão geral de coisas básicas. Mas se queremos algo mais personalizado? Precisamos escrever um código para rastrear o que está acontecendo na página (como os usuários interagem com os componentes, quão longe eles rolam, quais páginas foram exibidas antes da primeira venda) e, em seguida, envia esses dados para o servidor quando o usuário sai da página. O Beacon é ideal para essa tarefa, pois simplesmente enviamos dados e não precisamos de uma resposta do servidor.
Depuração e Log
Outro aplicativo está registrando informações do código JavaScript. Imagine uma situação em que você tenha um aplicativo grande com UI / UX avançado. Todos os testes são verdes e o erro é exibido periodicamente no profissional que você conhece, mas não pode fazê-lo por falta de informações. Nesse caso, você pode usar o Beacon para diagnóstico.
De fato, qualquer tarefa com registro pode ser resolvida usando o Beacon. Isso pode ser a criação de pontos de economia em jogos, coleta de informações sobre o uso de novas funcionalidades, registro de resultados de testes e assim por diante. Se isso é algo que acontece no navegador e você deseja que o servidor saiba sobre isso, o Beacon é o que você precisa.
Nós não fizemos isso antes?
Eu sei o que você está pensando. Nada disso é novo? Estamos nos comunicando com o norte através do XMLHTTPRequest há mais de 10 anos. Recentemente, começamos a usar a API Fetch, que de fato faz o mesmo, apenas com a nova interface Promise. Então, por que precisamos de outra API Beacon?
A principal característica é que não precisamos de uma resposta do servidor. O navegador pode enfileirar a solicitação e enviar dados sem bloquear a execução de qualquer código. Como o navegador aproveita isso, não importa para nós se o código ainda está em execução ou não, o navegador simplesmente envia silenciosamente solicitações para o plano de fundo.
A API C Beacon não precisa esperar o melhor momento para a rede da CPU. Apenas adicionar uma solicitação à fila usando beacon é praticamente inútil.
Para entender por que isso é importante, basta ver como e onde essa lógica geralmente é usada. Por exemplo, para medir quanto tempo o usuário está na página, precisamos enviar uma solicitação ao servidor o mais próximo possível do final da sessão.
Isso geralmente é feito no unload ou beforeunload unload . Esse código pode bloquear a execução e, se a página estiver atrasada, o carregamento da próxima página também ficará atrasado. Isso leva a não o melhor UX.
Você entende como as solicitações HTTP são lentas? E a última coisa que você deseja é enviar a solicitação HTTP entre as transições.
Tentando a API Beacon
O exemplo de uso básico é muito simples:
let result = navigator.sendBeacon(url, data);
result valor booleano. Se o navegador adicionou a solicitação à fila - true , se não for false .
Usando navigator.sendBeacon ()
navigator.sendBeacon aceita dois parâmetros. O primeiro é o URL para o qual a solicitação será enviada, o segundo são os dados que devem ser enviados. A solicitação tem a forma de HTTP POST .
data - esse parâmetro pode aceitar vários formatos de dados, com os quais a API Fetch trabalha. Pode ser Blob, BufferSource, FormData ou URLSearchParams, etc.
Eu gosto de usar o FormData para dados simples de valor-chave, não é uma classe complexa e fácil de usar.
// 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(' !'); } else { console.log('.'); }
Suporte do navegador
O suporte para esta API é bastante sólido. O único navegador que não suporta é o Internet Explorer (eu não esperava isso) e o Opera Mini. Mas no Edge tudo funciona. Na maioria dos casos, há suporte, mas é melhor verificar apenas no caso:
if (navigator.sendBeacon) { // Beacon } else { // XHR? }
Exemplo: tempo de registro gasto na página
Para ver tudo isso na prática, vamos criar um sistema simples para calcular o tempo que o usuário está na página. Quando a página é carregada, analisamos o horário e, quando ele sai, enviamos uma solicitação desde o início da visualização e a atual para o servidor.
Como estamos interessados apenas no tempo gasto na página e não no presente, podemos usar o performance.now() para obter o registro de data e hora base ao carregar a página:
let startTime = performance.now();
Vamos agrupar um pequeno pedaço de lógica em uma função fácil de usar:
let logVisit = function() { // Test that we have support if (!navigator.sendBeacon) return true; // URL to send the data to, eg let url = '/api/log-visit'; // Data to send let data = new FormData(); data.append('start', startTime); data.append('end', performance.now()); data.append('url', document.URL); // Let's go! navigator.sendBeacon(url, data); };
Finalmente, precisamos chamar essa função quando o usuário sair da página. O primeiro pensamento foi usar o unload , mas o Safari no Mac parece bloquear a solicitação por motivos de segurança. Portanto, é melhor usar beforeunload :
window.addEventListener('beforeunload', logVisit);
Quando a página é descarregada (ou antes), nossa função logVisit() será chamada e, se o navegador suportar a API Beacon, enviará uma solicitação ao servidor.
Alguns pontos
Como a maioria dos problemas para os quais a API Beacon será usada gira em torno do rastreamento de atividades, será importante observar a parte social e legal de toda essa cozinha.
GDPR
Apenas lembre-se disso.
DNT: NÃO ACOMPANHE
Além disso, os navegadores têm uma opção que permite que os usuários indiquem que não desejam que suas atividades sejam rastreadas. Do Not Track envia um cabeçalho HTTP parecido com este:
DNT: 1
Se você estiver rastreando dados que podem indicar o usuário e o cabeçalho da solicitação possui DNT: 1 , é melhor ouvir o usuário e não salvar nenhum dado. Por exemplo, usando PHP, isso pode ser verificado da seguinte forma:
if (!empty($_SERVER['HTTP_DNT'])) {
Em conclusão
A API Beacon é realmente uma maneira muito conveniente de enviar dados para o servidor, especialmente no contexto do log. O suporte ao navegador está em um nível suficientemente bom e permite que você registre facilmente qualquer informação sem consequências negativas para o desempenho e a capacidade de resposta da sua interface do usuário. A natureza não-bloqueadora desses pedidos desempenha um papel muito bom nisso; é muito mais rápido que as alternativas XHR e Fetch.
