Manchmal möchten Sie den Server möglicherweise darüber informieren, dass der Benutzer die Seite verlässt. Dies ist beispielsweise nützlich, um nicht gespeicherte Bilder zu bereinigen, die vorübergehend auf dem Server gespeichert sind, um diesen Benutzer als "offline" zu markieren oder um zu protokollieren, wenn die Sitzung beendet ist.
In der Vergangenheit haben Sie eine AJAX-Anforderung in der beforeunload
Funktion gesendet , dies hat jedoch zwei Probleme. Wenn Sie eine asynchrone Anforderung senden, gibt es keine Garantie dafür, dass die Anforderung korrekt ausgeführt wird. Wenn Sie eine synchrone Anfrage senden, ist diese zuverlässiger, aber der Browser bleibt hängen, bis die Anfrage abgeschlossen ist. Wenn dies eine langsame Anfrage ist, wäre dies eine große Unannehmlichkeit für den Benutzer.
Zum Glück haben wir jetzt navigator.sendBeacon()
. Mithilfe dieser sendBeacon()
Methode werden die Daten asynchron an den Webserver übertragen, wenn der Benutzeragent die Möglichkeit dazu hat, ohne das Entladen zu verzögern oder die Leistung der nächsten Navigation zu beeinträchtigen. Dies löst alle Probleme bei der Übermittlung von Analysedaten: Die Daten werden zuverlässig gesendet, asynchron gesendet und haben keinen Einfluss auf das Laden der nächsten Seite. Hier ist ein Beispiel für seine Verwendung:
window.addEventListener("unload", logData, false);
function logData() {
navigator.sendBeacon("/log.php", analyticsData);
}
sendBeacon()
wird unterstützt in:
- Kante 14
- Firefox 31
- Chrome 39
- Safari 11.1
- Oper 26
- iOS Safari 11.4
Es wird derzeit NICHT unterstützt in:
- Internet Explorer
- Opera Mini
Hier ist eine Polyfüllung für sendBeacon (), falls Sie Unterstützung für nicht unterstützte Browser hinzufügen müssen. Wenn die Methode im Browser nicht verfügbar ist, wird stattdessen eine synchrone AJAX-Anforderung gesendet.