Manchmal ist es praktisch, einige Daten von einer Webseite an einen Webserver zu senden, ohne auf eine Antwort warten zu müssen. So können beispielsweise Analyse- oder Diagnosedaten gesendet werden, bevor der Nutzer eine Seite verlässt.
Zum Senden von Daten vor dem Exit wird normalerweise das unload-Ereignis überwacht, weil dies zu unvollständigen Daten führen würde, wenn ein Klick unmittelbar vor dem Exit erfolgt ist.
Allerdings mussten die im Unload-Handler gesendeten Anfragen synchron sein, da die meisten Browser asynchrone XMLHttpRequests, die in einem Unload-Handler ausgeführt wurden, in der Regel ignorieren.
Dieser Ansatz verlangsamt die Navigation, da der Nutzer warten muss, bis die Anfrage zurückkommt, bevor eine neue Seite gerendert werden kann.
Mit der Beacon API lässt sich dieses Problem lösen, da Sie HTTP-Anfragen mit kleinen Nutzdatenlasten asynchron von einem Browser an einen Webserver senden können, ohne dass beim Unload-Ereignis anderer Code auf der Seite eine Verzögerung bei der nächsten Seitennavigation angewendet wird.
Die Methode navigator.sendBeacon() stellt die vom Browser zu übertragenden Daten in die Warteschlange, verlangsamt jedoch die Navigation nicht.
Wenn der Browser die Daten zur Übertragung in die Warteschlange stellen kann, wird true zurückgegeben. Andernfalls wird false zurückgegeben.
Angenommen, wir haben einen Serverendpunkt, um Beacon-Daten von unserer Seite unter dieser Adresse zu empfangen:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Wenn wir dem Event-Handler pagehide die Methode sendBeacon() hinzufügen, empfängt der Endpunkt die Daten, wenn der Nutzer die Seite verlässt:
Wenn Sie in den Chrome-Entwicklertools den Tab „Network“ (Netzwerk) und das Häkchen bei Preserve Logs (Logs beibehalten) aktivieren und Sie die Seite verlassen, sehen Sie, dass eine HTTP-POST-Anfrage an den obigen Endpunkt gesendet wird.
Alternativ können Sie die Prüfseite PutsReq aufrufen, um zu sehen, ob die Beacon-Daten empfangen wurden.
Mit dem benutzerdefinierten Polymer-Element können Sie Beacon-Daten senden: <beacon-send>. Sie finden es unter ebidel.github.io/beacon-send.