Navigator.sendBeacon()

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der 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, 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.
Bearbeiterentwurf Initial definition

Browser Kompatibilität

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

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Oliver_Schafeld
 Zuletzt aktualisiert von: Oliver_Schafeld,