Reliably sending a request when the user leaves the page

Posted . Visible to the public.

Websites möchten oft Analysedaten oder Diagnosedaten an den Server senden, wenn der Benutzer mit der Seite fertig ist. Der zuverlässigste Weg, dies zu tun, ist das Senden der Daten beim visibilitychange-Ereignis:

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData)
  }
})

Achtung: das visibilitychange-Event Show archive.org snapshot ist nur indirekt mit dem Schließen einer Seite verbunden:

Dieses Ereignis wird mit einem visibilityState von hidden ausgelöst, wenn ein Benutzer

  • zu einer neuen Seite navigiert,
  • Tabs wechselt,
  • den Tab schließt,
  • den Browser minimiert oder schließt oder
  • auf Mobilgeräten: vom Browser zu einer anderen App wechselt.

Der Übergang zu hidden ist das letzte Ereignis, das für die Seite zuverlässig beobachtbar ist, daher sollten Entwickler es als wahrscheinliches Ende der Benutzersitzung betrachten (zum Beispiel für das Senden von Analysedaten).

Dominik Schöler
Last edit
Dominik Schöler
License
Source code in this card is licensed under the MIT License.
Posted by Dominik Schöler to makandra dev (2025-09-12 15:01)