Einführung in die Beacon -API

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!