Cómo enviar solicitudes HTTP de forma confiable cuando el usuario abandona la página

• A veces hay casos en los que quieres dejar un registro cuando el usuario navega a otra página o envía un formulario
• Poner un fetch dentro del evento de clic no garantiza que se envíe sí o sí
• Por eso, se intenta hacer el fetch y luego navegar asignando window.location, pero eso tampoco está garantizado
  • Porque XHR es asíncrono y no bloqueante
• Se podría resolver usando await con la Promise de fetch, pero también tiene desventajas
  • El procesamiento se vuelve más lento y la experiencia de usuario empeora
  • No es tan confiable como parece. No puede manejar casos como cuando se cierra la pestaña del navegador
• Hay varias opciones para indicarle al navegador que preserve la solicitud HTTP
  • Si usas la bandera keepalive en Fetch, la solicitud se mantiene aunque la página se interrumpa
  • Una función más simple como Navigator.sendBeacon()
  • Los navegadores también soportan el atributo ping en la etiqueta a (la desventaja es que solo puede usarse en enlaces, y FF no lo soporta por defecto)
• Entonces, ¿qué conviene usar?
  • Si es posible, fetch() + keepalive
    • Lo soporta el 80% de los navegadores
    • Permite enviar encabezados personalizados
    • También puede usarse con solicitudes GET
    • Soporta navegadores antiguos
  • sendBeacon() es una buena opción cuando
    • Lo soporta el 96% de los navegadores
    • No necesitas mucha personalización
    • Prefieres una API limpia y elegante
    • No quieres competir con otras solicitudes prioritarias del navegador