Die Beacon-API ist eine JavaScript-basierte Schnittstelle für:
Senden einer kleinen Datenmenge vom Browser an den Server, ohne auf eine Antwort zu warten. In diesem Artikel werden wir untersuchen, in welchen Fällen die Beacon-API nützlich ist, wie sie sich von der Verwendung von XMLHTTPRequest (Ajax) für dieselben Zwecke unterscheidet und wie sie verwendet wird.
Warum brauchen wir eine andere API?
Die Beacon-API wird verwendet, um kleine Daten an den Server zu senden, ohne auf eine Antwort zu warten . Der letzte Teil der Aussage ist der interessanteste. Die Beacon-API wurde speziell entwickelt, um Daten zu senden und zu vergessen. Sie müssen keine Antwort erwarten, wie es niemals sein wird.
Eine Metapher mit Postkarten, das sind Karten, die sich gegenseitig senden / senden. In der Regel haben sie einen kleinen Text darüber geschrieben ("Wo bist du? Und ich bin lol auf See.", "Hier habe ich tolles Wetter, nicht wie in deinem Büro"), sie haben sie in die Post geworfen und vergessen. Niemand erwartete eine Antwort wie "Ich bin schon für dich gegangen", "Es ist wunderbar in meinem Büro."
Es gibt viele Fälle, in denen der Ansatz „Senden und Vergessen“ angemessen wäre.
Statistik-Tracking und analytische Informationen
Dies ist das erste, was mir in den Sinn kommt. Große Lösungen wie Google Analytics bieten einen guten Überblick über grundlegende Dinge. Aber wenn wir etwas individuelleres wollen? Wir müssen Code schreiben, um zu verfolgen, was auf der Seite passiert (wie Benutzer mit den Komponenten interagieren, wie weit sie scrollen, welche Seiten vor dem ersten Verkauf angezeigt wurden) und diese Daten dann an den Server senden, wenn der Benutzer die Seite verlässt. Beacon ist ideal für eine solche Aufgabe geeignet, da wir einfach Daten senden und keine Antwort vom Server benötigen.
Debuggen und Protokollieren
Eine andere Anwendung protokolliert Informationen aus JavaScript-Code. Stellen Sie sich eine Situation vor, in der Sie eine große Anwendung mit umfangreicher Benutzeroberfläche / UX haben. Alle Tests sind grün und der Fehler tritt regelmäßig bei dem Ihnen bekannten Profi auf. Sie können ihn jedoch aufgrund fehlender Informationen nicht ausführen. In diesem Fall können Sie Beacon zur Diagnose verwenden.
Tatsächlich kann jede Aufgabe mit der Protokollierung mit Beacon gelöst werden. Dies kann das Erstellen von Speicherpunkten in Spielen, das Sammeln von Informationen über die Verwendung neuer Funktionen, das Aufzeichnen von Testergebnissen usw. sein. Wenn dies im Browser geschieht und der Server davon erfahren soll, ist Beacon genau das Richtige für Sie.
Haben wir das nicht schon mal gemacht?
Ich weiß was du denkst. Nichts davon ist neu? Wir kommunizieren seit über 10 Jahren über XMLHTTPRequest mit dem Norden. Wir haben kürzlich damit begonnen, die Fetch-API zu verwenden, die genau das Gleiche tut, nur mit der neuen Promise-Oberfläche. Warum brauchen wir also eine andere Beacon-API?
Das Hauptmerkmal ist, dass wir keine Antwort vom Server benötigen. Der Browser kann die Anforderung in die Warteschlange stellen und Daten senden, ohne die Ausführung von Code zu blockieren. Da der Browser dies nutzt, spielt es für uns keine Rolle, ob der Code noch ausgeführt wird oder nicht. Der Browser sendet einfach stillschweigend Anforderungen an den Hintergrund.
C Die Beacon-API muss nicht auf den besten Moment für das CPU-Netzwerk warten. Das Hinzufügen einer Anfrage zur Warteschlange mithilfe von Beacon ist praktisch wertlos.
Um zu verstehen, warum dies wichtig ist, schauen Sie sich einfach an, wie und wo diese Logik normalerweise verwendet wird. Um beispielsweise zu messen, wie lange der Benutzer auf der Seite war, müssen wir eine Anfrage so nah wie möglich am Ende der Sitzung an den Server senden.
Dies erfolgt normalerweise beim unload oder vor dem beforeunload . Ein solcher Code kann die Ausführung blockieren, und wenn die Seite verzögert wird, wird auch das Laden der nächsten Seite verzögert. Dies führt zu nicht der besten UX.
Verstehst du, wie langsam HTTP-Anfragen sind? Und das Letzte, was Sie möchten, ist, die HTTP-Anforderung zwischen den Übergängen zu verschieben.
Testen der Beacon-API
Das grundlegende Anwendungsbeispiel ist sehr einfach:
let result = navigator.sendBeacon(url, data);
result boolescher Wert. Wenn der Browser die Anforderung zur Warteschlange hinzugefügt hat - true , wenn nicht false .
Verwenden von navigator.sendBeacon ()
navigator.sendBeacon akzeptiert zwei Parameter. Die erste ist die URL, an die die Anfrage gesendet wird, die zweite sind die Daten, die gesendet werden müssen. Die Anforderung hat die Form eines HTTP POST .
data - Dieser Parameter kann mehrere Datenformate akzeptieren, mit denen die Fetch-API arbeitet. Dies können Blob, BufferSource, FormData oder URLSearchParams usw. sein.
Ich verwende FormData gerne für einfache Schlüsselwertdaten. Es ist keine komplexe und einfach zu verwendende Klasse.
// URL let url = '/api/my-endpoint'; // FormData let data = new FormData(); data.append('hello', 'world'); let result = navigator.sendBeacon(url, data); if (result) { console.log(' !'); } else { console.log('.'); }
Browser-Unterstützung
Die Unterstützung für diese API ist ziemlich solide. Der einzige Browser, der dies nicht unterstützt, ist Internet Explorer (das habe ich nicht erwartet) und Opera Mini. Aber in Edge funktioniert alles. In den meisten Fällen gibt es Unterstützung, aber es ist besser, dies nur für den Fall zu überprüfen:
if (navigator.sendBeacon) { // Beacon } else { // XHR? }
Beispiel: Protokollierungszeit auf der Seite
Um dies alles in der Praxis zu sehen, erstellen wir ein einfaches System zur Berechnung der Zeit, die der Benutzer auf der Seite ist. Wenn die Seite geladen wird, sehen wir uns die Uhrzeit an und wenn sie verlässt, senden wir eine Anfrage vom Beginn der Anzeige und die aktuelle an den Server.
Da wir nur an der auf der Seite verbrachten Zeit interessiert sind und nicht an der Gegenwart, können wir mit performance.now() den Basiszeitstempel beim Laden der Seite abrufen:
let startTime = performance.now();
Lassen Sie uns ein kleines Stück Logik in eine benutzerfreundliche Funktion einwickeln:
let logVisit = function() { // Test that we have support if (!navigator.sendBeacon) return true; // URL to send the data to, eg let url = '/api/log-visit'; // Data to send let data = new FormData(); data.append('start', startTime); data.append('end', performance.now()); data.append('url', document.URL); // Let's go! navigator.sendBeacon(url, data); };
Schließlich müssen wir diese Funktion aufrufen, wenn der Benutzer die Seite verlässt. Der erste Gedanke war, unload zu verwenden, aber Safari auf Mac scheint die Anforderung aus Sicherheitsgründen zu blockieren. Daher ist es besser, vor dem beforeunload zu verwenden:
window.addEventListener('beforeunload', logVisit);
Wenn die Seite entladen wird (oder früher), wird unsere Funktion logVisit() aufgerufen und sendet eine Anfrage an den Server, wenn der Browser die Beacon-API unterstützt.
Ein paar Punkte
Da sich die meisten Probleme, für die die Beacon-API verwendet wird, auf die Verfolgung von Aktivitäten beziehen, ist es wichtig, den sozialen und rechtlichen Teil dieser gesamten Küche zu beachten.
DSGVO
Denken Sie daran.
DNT: NICHT VERFOLGEN
Darüber hinaus verfügen Browser über eine Option, mit der Benutzer angeben können, dass ihre Aktivitäten nicht verfolgt werden sollen. Do Not Track sendet einen HTTP-Header, der folgendermaßen aussieht:
DNT: 1
Wenn Sie Daten verfolgen, die den Benutzer anzeigen können, und der Anforderungsheader DNT: 1 , ist es besser, auf den Benutzer zu hören und keine Daten zu speichern. Mit PHP kann dies beispielsweise wie folgt überprüft werden:
if (!empty($_SERVER['HTTP_DNT'])) {
Abschließend
Die Beacon-API ist in der Tat eine sehr bequeme Möglichkeit, Daten an den Server zu senden, insbesondere im Zusammenhang mit der Protokollierung. Die Browserunterstützung ist ausreichend und ermöglicht es Ihnen, Informationen einfach zu protokollieren, ohne negative Auswirkungen auf die Leistung und Reaktionsfähigkeit Ihrer Benutzeroberfläche zu haben. Die Nichtblockierung dieser Anforderungen spielt dabei eine sehr gute Rolle, sie ist viel schneller als die Alternativen XHR und Fetch.
