Wie man zuverlässig HTTP-Anfragen sendet, wenn der Benutzer die Seite verlässt

• Manchmal möchte man Logs hinterlassen, wenn Benutzer zu einer anderen Seite wechseln oder ein Formular absenden
• fetch in ein Klick-Event zu packen garantiert nicht, dass die Anfrage wirklich gesendet wird
• Deshalb versucht man es manchmal mit fetch und navigiert danach über window.location, aber auch das ist keine Garantie
  • XHR ist asynchron und nicht blockierend
• Man kann fetch zwar mit await auf das Promise warten lassen, aber das hat Nachteile
  • Die Verarbeitung wird langsamer und verschlechtert die User Experience
  • Es ist nicht so zuverlässig wie erwartet. Dinge wie das Schließen des Browser-Tabs lassen sich damit nicht abfangen
• Es gibt mehrere Optionen, mit denen man den Browser anweisen kann, die HTTP-Anfrage beizubehalten
  • Verwendet man beim Fetch das keepalive-Flag, bleibt die Anfrage auch dann erhalten, wenn die Seite beendet wird
  • Eine einfachere Funktion wie Navigator.sendBeacon()
  • Browser unterstützen auch das ping-Attribut bei a-Tags (Nachteil: nur für Links nutzbar, Firefox unterstützt es standardmäßig nicht)
• Was sollte man also verwenden?
  • Wenn möglich fetch() + keepalive
    • Wird von 80 % der Browser unterstützt
    • Eigene Header können gesendet werden
    • Auch mit GET-Anfragen nutzbar
    • Unterstützt auch ältere Browser
  • sendBeacon() ist gut geeignet, wenn
    • Es von 96 % der Browser unterstützt wird
    • Man nicht viele Anpassungsmöglichkeiten braucht
    • Man eine saubere und elegante API bevorzugt
    • Man nicht mit anderen Browser-Anfragen niedriger Priorität konkurrieren möchte