Comment envoyer de manière fiable des requêtes HTTP quand l’utilisateur quitte une page

• Il arrive parfois qu’on veuille enregistrer un log quand l’utilisateur navigue vers une autre page ou soumet un formulaire
• Mettre un fetch dans un événement de clic ne garantit pas que l’envoi aura bien lieu
• On peut donc essayer de faire le fetch, puis de naviguer en mettant la destination dans window.location, mais cela ne garantit rien non plus
  • XHR est asynchrone et non bloquant
• On peut utiliser await sur la Promise de fetch, mais cela a aussi des inconvénients
  • Le traitement devient plus lent, ce qui dégrade l’expérience utilisateur
  • Ce n’est pas aussi fiable qu’on pourrait l’espérer : impossible par exemple de gérer la fermeture de l’onglet du navigateur
• Le navigateur propose plusieurs options pour préserver une requête HTTP
  • Avec le flag keepalive de Fetch, la requête est maintenue même si la page est interrompue
  • Une fonction plus simple comme Navigator.sendBeacon()
  • Les navigateurs prennent aussi en charge l’attribut ping des balises a (inconvénient : utilisable uniquement sur les liens, et Firefox ne le prend pas en charge par défaut)
• Alors, que faut-il utiliser ?
  • Si possible, fetch() + keepalive
    • Pris en charge par 80 % des navigateurs
    • Permet d’envoyer des en-têtes personnalisés
    • Fonctionne aussi avec des requêtes GET
    • Compatible avec les anciens navigateurs
  • Cas où sendBeacon() est un bon choix
    • Pris en charge par 96 % des navigateurs
    • Quand on n’a pas besoin de beaucoup de personnalisation
    • Quand on préfère une API propre et élégante
    • Quand on ne veut pas entrer en concurrence avec d’autres requêtes prioritaires du navigateur