Was ist "sendBeacon"?
Sie kennen wahrscheinlich die beiden Optionen, die Sie verwenden müssen, wenn Sie eine Anfrage von einem Client stellen möchten, z. B. von Ihrer progressiven Webanwendung: entweder XMLHttpRequest oder das neuere "fetch". Aber wussten Sie, dass es eine dritte Option gibt, die speziell für das Senden sehr kleiner Datenblöcke wie Analysedaten entwickelt wurde? Es ist eine Funktion namens "sendBeacon", die in modernen Browsern über das "Navigator"-Objekt verfügbar ist.
So verwenden Sie "sendBeacon"
Die Verwendung dieser speziell entwickelten Anfragefunktion für kleine Datenblöcke ist wirklich einfach. Solange sowohl die "Navigator"- als auch die "sendBeacon"-Funktion des Navigators verfügbar ist, müssen Sie nur eine URL sowie die zu sendende Nutzlast angeben.
Sie können die folgenden Arten von Daten senden.
- ArrayBuffer
- ArrayBufferView
- Klecks
- DOMString
- Formulardaten
- URLSuchparameter
Jeder Aufruf von "sendBeacon" sendet eine POST-Anfrage an den angegebenen Endpunkt.
async function track(payload: TrackPayload){
// We're using 'optional property access'
// for a simple and clean implementation.
//
// You could of course also use nested if(){ ... }.
await navigator?.sendBeacon?.('/track', payload);
}
// The following example is taken directly
// from the MDN page, linked in the addendum
// at the end of this page.
//
// It demonstrates the usage with the
// 'visibilitychange'-event when the user
// could close your web app.
document.addEventListener('visibilitychange', function logData() {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/log', analyticsData);
}
});
Was ist unterschiedlich
Der Hauptvorteil von "sendBeacon" besteht darin, dass Ihre Anfragen tatsächlich vom Agenten in die Warteschlange gestellt werden, dh von dem Browser, der gerade Ihren Client geladen hat. Solange eine Netzwerkverbindung vorhanden ist, werden die Daten dann gesendet. Wenn keine Daten verfügbar sind oder der Benutzer Ihre Web-App schließt (bevor die Anfrage hätte gesendet werden können), garantiert der Browser dennoch, dass die Anfrage eventuell übermittelt wird.
Die anderen, gängigen Anfragefunktionen garantieren nicht, dass Ihre Anfrage gesendet wird, wenn ein Benutzer die Web-App schließt (z. B. durch Schließen des Tabs). "sendBeacon" ist außerdem vollständig asynchron und führt zu keiner Verzögerung beim Navigieren zu einer anderen Seite in Ihrer Web-App, während gleichzeitig die Analysedaten für den Seitenverlauf des Benutzers gesendet werden.
Verbessern Sie Ihre Web-App nach und nach
Wenn Sie einen benutzerdefinierten Endpunkt für Analysedaten haben, sollten Sie diese neue API unbedingt ausprobieren. Beachten Sie, dass ein Benutzer Ihre Web-App möglicherweise mit einem Browser aufruft, der die API nicht unterstützt (obwohl dies sehr unwahrscheinlich ist), sodass Sie Ihre App schrittweise verbessern können, indem Sie vor der Verwendung einfach nach Unterstützung suchen.
