Manchmal ist es praktisch, Daten von einer Webseite an einen Webserver zu senden, ohne auf eine Antwort warten zu müssen. So können wir beispielsweise Analyse- oder Diagnosedaten senden, bevor der Nutzer eine Seite verlässt.
Normalerweise musste beim Senden von Daten vor dem Verlassen der Website das unload-Ereignis überwacht werden, da eine frühere Anfrage zu unvollständigen Daten geführt hätte. So könnte beispielsweise ein Klick, der kurz vor dem Verlassen der Website erfolgt ist, übersehen werden.
Der Haken dabei war, dass die im Unload-Handler gesendeten Anfragen synchron sein mussten, da die meisten Browser asynchrone XMLHttpRequests in einem Unload-Handler 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.
Die Beacon API löst dieses Problem, da Sie damit asynchron HTTP-Anfragen mit kleinen Datennutzlasten von einem Browser an einen Webserver senden können, ohne anderen Code im Unload-Ereignis der Seite zu verzögern oder die Leistung der nächsten Seitennavigation zu beeinträchtigen.
Bei der navigator.sendBeacon()-Methode werden die Daten so schnell wie möglich in die Warteschlange für die Übertragung durch den Browser gestellt, die Navigation wird dadurch aber nicht verlangsamt.
Es wird true zurückgegeben, wenn der Browser die Daten zur Übertragung in die Warteschlange aufnehmen kann. Andernfalls wird false zurückgegeben.
Angenommen, wir haben einen Serverendpunkt zum Empfangen von Beacon-Daten von unserer Seite unter dieser Adresse:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Wenn wir dem Ereignis-Handler pagehide die Methode sendBeacon() hinzufügen, erhält der Endpunkt die Daten, wenn der Nutzer die Seite verlässt:
Wenn Sie in den Chrome DevTools den Tab „Netzwerk“ mit aktiviertem Kästchen Protokolle beibehalten aufrufen, sehen Sie, dass eine HTTP-POST-Anfrage an den oben genannten Endpunkt gesendet wird, wenn Sie die Seite verlassen.
Alternativ können Sie die Seite PutsReq-Prüfseite aufrufen, um zu sehen, ob die Beacon-Daten empfangen wurden.
Es gibt auch ein benutzerdefiniertes Polymer-Element, mit dem Sie Beacon-Daten senden können: <beacon-send>. Sie finden es unter ebidel.github.io/beacon-send.