Às vezes, é útil enviar alguns dados de uma página da Web para um servidor da Web sem a necessidade de aguardar uma resposta. Por exemplo, podemos enviar dados de análise ou diagnóstico antes que o usuário saia de uma página.
Normalmente, o envio de dados antes da saída envolvia a detecção do evento unload,
porque enviar a solicitação mais cedo resultaria em dados incompletos.
Por exemplo, um clique pode ter sido perdido antes da saída.
A ressalva é que as solicitações enviadas no gerenciador de descarregamento precisavam
ser síncronas, porque a maioria dos navegadores normalmente ignora XMLHttpRequests assíncronos feitas em um gerenciador de descarregamento.
Essa abordagem deixa a navegação mais lenta, já que o usuário precisa
esperar a solicitação voltar para que uma nova página seja renderizada.
A API Beacon resolve esse problema permitindo que você envie de maneira assíncrona solicitações HTTP com pequenos payloads de dados de um navegador para um servidor da Web, sem atrasar outros códigos no evento de descarregamento da página nem afetar o desempenho da navegação seguinte.
O método navigator.sendBeacon() coloca os dados na fila a serem
transmitidos pelo navegador o mais rápido possível,
mas não atrasa a navegação.
Ela retornará true se o navegador conseguir enfileirar os dados para transferência. Caso contrário, retornará false.
Imagine que temos um endpoint do servidor disponível para receber dados de beacon da nossa página neste endereço:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Se adicionarmos um método sendBeacon() no manipulador de eventos pagehide, o endpoint receberá os dados quando o usuário sair da página:
Se você inspecionar a guia de rede no Chrome DevTools com a caixa de seleção preserve logs marcada, vai encontrar uma solicitação HTTP POST para o endpoint acima sendo enviada quando sair da página.
Se preferir, acesse a página de inspeção do PutsReq para ver se os dados do beacon foram recebidos.
Há também um elemento personalizado Polymer que permite enviar dados de beacon: <beacon-send>. Confira em ebidel.github.io/beacon-send.