Soms is het handig om bepaalde gegevens van een webpagina naar een webserver te sturen zonder dat u op antwoord hoeft te wachten. We willen bijvoorbeeld analyse- of diagnostische gegevens indienen voordat de gebruiker een pagina verlaat.
Normaal gesproken betekende het verzenden van gegevens vóór het afsluiten het luisteren naar de unload gebeurtenis, omdat het eerder verzenden van het verzoek zou resulteren in onvolledige gegevens - we zouden bijvoorbeeld een klik kunnen hebben gemist die vlak voor het afsluiten plaatsvond. Het voorbehoud was dat de verzoeken die in de unload-handler werden verzonden, synchroon moesten zijn, omdat de meeste browsers doorgaans asynchrone XMLHttpRequests negeren die in een unload-handler zijn gemaakt. Deze aanpak vertraagt de navigatie, omdat de gebruiker moet wachten tot het verzoek terugkomt voordat een nieuwe pagina kan worden weergegeven.
De Beacon API lost dit probleem op door u asynchroon HTTP-verzoeken met kleine gegevenspayloads van een browser naar een webserver te laten verzenden, zonder andere code in de unload-gebeurtenis van de pagina te vertragen of de prestaties van de volgende paginanavigatie te beïnvloeden.
De methode navigator.sendBeacon() plaatst de gegevens die door de browser moeten worden verzonden zo snel mogelijk in de wachtrij, maar vertraagt de navigatie niet. Het retourneert true als de browser de gegevens met succes in de wachtrij kan plaatsen voor overdracht. Anders retourneert het false .
Laten we zeggen dat we een servereindpunt beschikbaar hebben voor het ontvangen van bakengegevens van onze pagina op dit adres:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Als we een methode sendBeacon() toevoegen aan de gebeurtenishandler pagehide , ontvangt het eindpunt de gegevens wanneer de gebruiker de pagina verlaat:
Als u het netwerktabblad in Chrome DevTools inspecteert terwijl het selectievakje Logboeken behouden is aangevinkt, ziet u dat er een HTTP POST-verzoek naar het bovenstaande eindpunt wordt verzonden wanneer u de pagina verlaat.
Als alternatief kunt u de PutsReq-inspectiepagina bezoeken om te zien of de bakengegevens zijn ontvangen.
Er is ook een aangepast Polymer- element waarmee u bakengegevens kunt verzenden - <beacon-send> . Bekijk het op ebidel.github.io/beacon-send .