Key Takeaways

• Die Beacon -API bietet Webentwicklern eine L?sung, um kleine Datenmengen wie Analytik oder Diagnostik asynchron auf den Server zu senden, w?hrend die aktuelle Seite entl?dt, das Problem der potenziellen Verz?gerung oder des Verlusts wertvoller Informationen l?st.
• Die Beacon -API besteht aus einer Methode, SendBeacon, die dem Navigator -Objekt beigefügt ist. Es braucht zwei Parameter, die URL, um Daten an und die zu übermittelten Daten zu übermitteln. Die Daten werden über eine HTTP -Postanforderung übermittelt und k?nnen als ArrayBufferview, als Blob, Domstring oder Formdata -Objekt gesendet werden.
• Die Beacon -API wird von den wichtigsten Desktop -Browsern wie Chrome, Firefox und Oper, jedoch nicht in den neuesten Versionen von IE und Safari unterstützt. Für Browser ohne Unterstützung k?nnen Entwickler die Erkennung von Funktionen und den Fallback für ?ltere Methoden zum Senden von Daten zum Entladen von Seite verwenden.

Die Beacon -API erleichtert Webentwicklern, kleine Datenmengen wie Analytics- oder Diagnostikdaten asynchron zum Server zu senden, w?hrend die aktuelle Seite entl?dt. In diesem Artikel werden wir uns einige der Probleme ansehen, die die Beacon -API l?st, und Ihnen zeigen, wie Sie die API verwenden.

Ohne die Beacon -API kann das Senden von Daten an Ihren Server zurücksenden, wenn der Benutzer von einer Seite wegnavigiert, kann schwieriger sein als es scheint. Sie m?chten die n?chste Seite nicht vom Laden verz?gern, da dies die Erfahrung des Benutzers Ihrer Website sch?digen würde. Sie m?chten jedoch keine wertvollen Informationen verlieren, die dazu beitragen k?nnten, Ihre Website zu verbessern: Das Senden der Daten zu früh bedeutet m?glicherweise, dass Sie wertvolle Informationen verlieren, die Sie erfassen k?nnen, wenn Sie einen Bruch l?nger gewartet h?tten.

Eine typische

-L?sung , die Analysedaten an den Server sendet, da das Dokument entl?dt k?nnte:

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

Ein Ereignishandler von Entlade, der Daten über eine AJAX -Anforderung einreicht. Wenn das Ereignisentladungs ??-Ereignis entlastet, werden die Daten über die Funktion captureanalyticsdata erfasst und über eine AJAX -Anforderung an den Server gesendet. Beachten Sie, dass der dritte Parameter für xhr.open falsch ist und angibt, dass die AJAX -Anforderung

synchron ist. Browser ignorieren typischerweise asynchrone Anfragen, die w?hrend eines Entlastungsbehandels gestellt wurden, sodass eine solche AJAX -Anforderung synchron ist. Da es synchron ist, muss der Browser darauf warten, dass die Anfrage vor das Dokument abladen und die n?chste Seite anzeigen kann. Dieses zus?tzliche Warten kann zur Wahrnehmung schlechter Leistung führen.

Andere Techniken, die anstelle einer synchronen AJAX -Anforderung verwendet werden, umfassen das Einstellen des SRC eines Bildobjekts im Entladen von HANDLER. Der Browser wartet, bis das Bild geladen wird, bevor das Dokument entl?dt wird. W?hrend dieser Zeit k?nnen Daten an den Server übermittelt werden. Dies hat jedoch immer noch das gleiche Problem: Das Entladen des aktuellen Dokuments wird verz?gert, w?hrend die Anfrage, diesmal für das Bild, vervollst?ndigt wird, was zur Wahrnehmung schlechter Leistung führen kann.

Die Beacon -API wurde erstellt, um diese Probleme zu l?sen. Es definiert eine Schnittstelle, mit der Entwickler kleine Datenmengen an den Webserver asynchron senden k?nnen. Es besteht nur aus einer Methode, SendBeacon, die dem Navigator -Objekt beigefügt ist. SendBeacon nimmt zwei Parameter vor, die URL, an die Sie Daten einreichen m?chten, und die zu übermittelten Daten:

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

Daten werden über eine HTTP -Postanforderung übermittelt und k?nnen als Arraybufferview, als Blob, Domstring oder Formdata -Objekt gesendet werden. Der Browser setzt sich an der Anfrage nach und sendet sie "zum frühesten verfügbaren Gelegenheit, kann jedoch die übertragung von Daten im Vergleich zu einem anderen Netzwerkverkehr priorisieren." (gem?? der W3C -Spezifikation). sendBeacon gibt true zurück, wenn die Daten erfolgreich an den Server übermittelt wurden, oder sonst falsch.

Unterstützung für Navigator.SendBeacon ist in den wichtigsten Desktop -Browsern anst?ndig. Sie werden feststellen, dass es in den aktuellen Versionen von Chrome, Firefox und Opera unterstützt wird, jedoch nicht in den neuesten Versionen von IE und Safari. Da Sie jedoch nicht garantieren k?nnen, dass es die Verfügbarkeit ist, ist es am besten, die Funktionserkennung und den Fallback für eine der alten Methoden zum Senden von Daten zum Entladen von Seite:

zu verwenden:

<span>window.addEventListener('unload', function(event) {
</span>  <span>var data = captureAnalyticsData(event);
</span>  <span>navigator.sendBeacon('/log', data);
</span><span>});</span>

Ich habe eine kleine Beispiel -App erstellt, mit der Sie die Beacon -API in Aktion sehen k?nnen. Sie müssen node.js installieren lassen, um den Server auszuführen. Das Beispiel ausführen:

Laden Sie die ZIP -Datei in einen Ordner Ihrer Wahl herunter und entpacken Sie, z. Beaconapi
?ffnen Sie Ihr Terminal und ?ndern Sie das Verzeichnis in den in Schritt 1 erstellten Ordner, z. CD/Pfad/to/Beaconapi
Geben Sie NPM -Installation ein und drücken Sie
Geben Sie jetzt debug = Beaconapi_demo ./bin/www ein und drücken
5. ?ffnen Sie einen Browser, der die Beacon -API unterstützt und auf http: // localhost: 3000
hinweisen

Sie sollten eine Seite sehen, die so aussieht:

In diesem Beispiel verwenden wir Chrome. ?ffnen Sie die Entwickler -Tools, wechseln Sie zur Registerkarte Netzwerk und kreuzen Sie das Kontrollk?stchen für das Log -Protokoll an. Filtern Sie die Ergebnisse so, dass Sie nur die anderen Anfragen sehen. Wenn Sie nun auf die Schaltfl?che Entladen klicken, sollten Sie die Anforderungen an /Protokollieren in den Entwicklungswerkzeugen sehen.

Schlussfolgerung

Dieser Artikel hat die Beacon -API eingeführt. Es ist eine sehr kleine API, füllt aber eine bestimmte Nische. Hoffentlich k?nnen Sie es gut genutzt.

h?ufig gestellte Fragen (FAQs) zu Beacon API

Was ist die Hauptfunktion der Beacon-API? Diese API ist besonders nützlich für das Senden von Analysedaten. Die Beacon -API stellt sicher, dass die Daten auch dann gesendet werden, wenn der Benutzer von der Seite wegnavigiert oder den Browser schlie?t. API wird verwendet, um Daten vom Client an den Server zu senden. Sie unterscheiden sich in ihren Anwendungsf?llen und Verhaltensweisen. AJAX wird normalerweise zum Abholen von Daten vom Server und zum Aktualisieren der Webseite verwendet, ohne sie neu zu laden. Andererseits wird die Beacon -API zum Senden von Daten an den Server, insbesondere an Analysetics -Daten, verwendet, ohne die Browsing -Erfahrung des Benutzers zu blockieren. Im Gegensatz zu AJAX stellt die Beacon -API sicher, dass die Daten auch dann gesendet werden, wenn der Benutzer von der Seite wegnavigiert oder den Browser schlie?t.

Wie kann ich die Beacon -API in meiner Webanwendung verwenden? Um die Beacon -API in Ihrer Webanwendung zu verwenden, k?nnen Sie die Methode Navigator.SendBeacon () verwenden. Diese Methode nimmt zwei Argumente an: die URL, um die Daten an und die zu senden. Die Daten k?nnen ein FormularData -Objekt, ein Blob, ein Arraybufferview oder ein urlSearchParams -Objekt sein. Hier ist ein Beispiel:

var data = new FormData ();

data.append ('Name', 'John Doe'); );

Was sind die Vorteile der Verwendung der Beacon -API? Zun?chst k?nnen Sie Daten auf nicht blockierende Weise an den Server senden, was bedeutet, dass sie sich nicht auf das Browsing-Erlebnis des Benutzers auswirken. Zweitens wird sichergestellt, dass die Daten auch dann gesendet werden, wenn der Benutzer von der Seite wegnavigiert oder den Browser schlie?t. Dies macht es ideal für das Senden von Analysedaten, die am Ende der Benutzersitzung gesendet werden k?nnen, ohne den Datenverlust zu riskieren. Die Beschr?nkung der Beacon -API besteht darin, dass sie kein Feedback darüber gibt, ob die Daten erfolgreich vom Server empfangen wurden. Dies bedeutet, dass Sie es nicht für kritische Daten verwenden k?nnen, die eine Best?tigung des Empfangs erfordern. Darüber hinaus wird die Beacon -API nicht in allen Browsern unterstützt, daher müssen Sie m?glicherweise einen Fallback für Browser bereitstellen, der es nicht unterstützt. Die Beacon -API gibt kein Feedback darüber, ob die Daten erfolgreich vom Server empfangen wurden. Wenn die Daten beispielsweise aufgrund von Netzwerkproblemen nicht gesendet werden k?nnen, wird die API nicht das Senden der Daten erneut eingerichtet. Aus diesem Grund wird empfohlen, die Beacon-API für nicht kritische Daten zu verwenden, für die keine Best?tigung des Empfangs erforderlich ist.

Kann ich die Beacon -API verwenden, um Daten an eine andere Dom?ne zu senden? Der Server muss jedoch CORs unterstützen (Cross-Origin-Ressourcenfreigabe) und so konfiguriert werden, dass sie Cross-Origin-Anfragen aus Ihrer Dom?ne akzeptieren.

Wird die Beacon-API in allen Browsern unterstützt? Beacon API wird in den meisten modernen Browsern unterstützt, darunter Chrome, Firefox, Safari und Edge. Es wird jedoch im Internet Explorer nicht unterstützt. Sie k?nnen den aktuellen Browser -Support auf Websites wie Can I verwenden.

Kann ich gro?e Datenmengen mit der Beacon -API senden? wie Analysedaten. Obwohl die Datenmenge, die Sie senden k?nnen, keine harte Begrenzung gibt, kann das Senden gro?er Datenmengen auf die Netzwerkleistung des Benutzers ausgewirkt. Daher wird empfohlen, die Beacon-API zum Senden kleiner Mengen nicht kritischer Daten zu verwenden.

Kann ich eine Beacon-Anfrage stornieren? abgesagt. Die Beacon -API bietet keine M?glichkeit, eine Beacon -Anfrage zu stornieren oder rückg?ngig zu machen. Dies ist ein weiterer Grund, warum es empfohlen wird, die Beacon-API für nicht kritische Daten zu verwenden, für die keine Empfangsbest?tigung erforderlich ist.

Das obige ist der detaillierte Inhalt vonEinführung in die Beacon -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!