Navigator.sendBeacon()

Experimental: Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Die navigator.sendBeacon() Methode dient dazu, kleinere Datenmengen asynchron per HTTP vom User Agent zum Server zu senden.

Syntax

navigator.sendBeacon(url, data);

Parameter

url
Der url Parameter steht f√ľr die ermittelte URL, an die data zu senden ist. 
data
Der Parameter data enth√§lt zu √ľbermittelnde Daten der Art ArrayBufferView (en-US), Blob, DOMString oder FormData.

R√ľckgabewerte

Die sendBeacon() Methode gibt true zur√ľck, falls der User Agent erfolgreich war, data zum Transfer bereit zu stellen. Andernfalls ist der R√ľckgabewert false.

Beschreibung

Diese Methode erf√ľllt Bed√ľrfnisse von Analyse- und Diagnostik-Code, der regelm√§√üig versucht, Daten an den Server zu senden bevor der unload Vorgang einer Seite abgeschlossen ist. Daten schon fr√ľher zu senden, k√∂nnte eine unvollst√§ndige Datensammlung bewirken.
Bislang war es f√ľr Entwickler schwierig, sicherzustellen, dass Daten w√§hrend eines unload Vorgangs tats√§chlich gesendet wurden.

√úblicherweise ignorieren User Agenten asynchrone XMLHttpRequests in einem unload Anweisungsblock. Dieses Problem wird in Analytik- und Diagnostik-Code oft umgangen, indem in einem unload oder beforeunload Anweisungsblock ein synchroner XMLHttpRequest zum Datenversand genutzt wird.
Ein synchroner XMLHttpRequest zwingt den User Agenten den unload Vorgang des Dokuments zu verz√∂gern, sodass jedoch die weitere Navigation langsamer wirkt. Der Eindruck einer schlechten Ladezeit der Folgeseite l√§st sich dabei nicht verhindern.

Es gibt weitere Techniken, die Daten√ľbermittlung zu erm√∂glichen. Eine besteht darin, den unload Vorgang zu verz√∂gern, indem man ein image Element erzeugt und dessen src Attribut innerhalb des unload Anweisungsblocks √§ndert. Da die meisten User Agenten den unload Vorgang verz√∂gern werden bis das Nachladen des Bildes abgeschlossen ist, k√∂nnen so w√§hrenddessen noch Daten √ľbermittelt werden.
Noch eine andere Technnik verwendet eine einige Sekunden lange wirkungsfreie (noop) Schleife innerhalb des unload Anweisungsblocks, die das unload verz√∂gert und zwischenzeitliche Daten√ľbermittlung zum Server erm√∂glicht.

Diese alternativen Techniken stellen allerdings nicht nur schlechte Programmiermuster dar. Einige sind schlicht unzuverlässig und erzeugen den Eindruck schlechter Seitenladezeiten.

Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der versucht, Daten an den Server zu schicken mittels synchronem XMLHttpRequest innerhalb des unload Anweisungsblocks. Dies resultiert in einer Verzögerung des unload Vorgangs der Seite.

window.addEventListener('unload', logData, false);

function logData() {
    var client = new XMLHttpRequest();
    client.open("POST", "/log", false); // der dritte Parameter bewirkt synchrones xhr
    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    client.send(analyticsData);
}

Durch Verwendung der sendBeacon() Methode werden Daten asynchron an den Server gesendet sobald der User Agent Gelegenheit dazu hat und zwar ohne das unload bzw. das Laden der nächsten Seite zu verzögen.

Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der Daten zum Server sendet mittels sendBeacon()Methode. 

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

Spezifikation

Spezifikation Status Kommentar
Beacon
Die Definition von 'sendBeacon()' in dieser Spezifikation.
Anwärter Empfehlung Initial definition

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 39.0 31 (31) Nicht unterst√ľtzt 26 Nicht unterst√ľtzt
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support Nicht unterst√ľtzt 40.0 31.0 (31) 2.5 Nicht unterst√ľtzt Nicht unterst√ľtzt Nicht unterst√ľtzt 42.0

Siehe auch