Como enviar requisições HTTP de forma confiável quando o usuário sai da página

• Às vezes, você quer registrar logs quando o usuário navega para outra página ou envia um formulário
• Colocar um fetch no evento de clique não garante que a requisição será enviada
• Então você pode tentar fazer o fetch e depois navegar definindo window.location, mas isso também não é garantido
  • Porque o XHR é assíncrono e não bloqueante
• Dá para usar await com a Promise do fetch, mas isso também tem desvantagens
  • O processamento fica mais lento e a experiência do usuário piora
  • Não é tão confiável quanto parece. Não dá para lidar com casos como fechar a aba do navegador
• Existem várias opções para pedir ao navegador que preserve a requisição HTTP
  • Ao usar a flag keepalive no Fetch, a requisição é mantida mesmo que a página seja interrompida
  • Uma função mais simples como Navigator.sendBeacon()
  • Os navegadores também oferecem suporte ao atributo ping na tag a (a desvantagem é que só pode ser usado em links, e o Firefox não oferece suporte por padrão)
• Então, o que usar?
  • Se possível, use fetch() + keepalive
    • Compatível com 80% dos navegadores
    • Permite enviar cabeçalhos personalizados
    • Também funciona com requisições GET
    • Dá suporte a navegadores mais antigos
  • sendBeacon() é uma boa opção quando
    • Compatível com 96% dos navegadores
    • Você não precisa de muita customização
    • Prefere uma API limpa e elegante
    • Não quer disputar prioridade com outras requisições do navegador