Czasami wygodnie jest wysłać dane ze strony internetowej na serwer WWW bez konieczności oczekiwania na odpowiedź. Możemy na przykład chcieć przesłać dane analityczne lub diagnostyczne, zanim użytkownik opuści stronę.
Przesyłanie danych przed wyjściem z aplikacji wymagało odsłuchiwania zdarzenia unload
, ponieważ wysłanie żądania w dowolnym wcześniejszym momencie spowodowałoby niekompletne dane, np. mogliśmy przeoczyć kliknięcie, które nastąpiło tuż przed wyjściem.
Ostrzeżenie dotyczyło tego, że żądania wysyłane w obiekcie funkcji unload handler muszą być synchroniczne, ponieważ większość przeglądarek zwykle ignoruje asynchroniczne żądania XMLHttpRequest wysyłane w obiekcie funkcji unload handler.
Takie podejście spowalnia nawigację, ponieważ użytkownik musi czekać na odpowiedź na żądanie, zanim nowa strona zostanie wyrenderowana.
Interfejs Beacon API rozwiązuje ten problem, umożliwiając asynchroniczne wysyłanie żądań HTTP z małymi ładunkami danych z przeglądarki na serwer WWW bez opóźniania innego kodu w zdarzeniu rozładowania strony lub wpływania na wydajność nawigacji do następnej strony.
Metoda navigator.sendBeacon()
umieszcza dane w kolejce, aby przeglądarka mogła je jak najszybciej przesłać, ale nie spowalnia nawigacji.
Zwraca wartość true
, jeśli przeglądarka może umieścić dane w kolejce do przeniesienia. W przeciwnym razie zwraca wartość false
.
Załóżmy, że mamy punkt końcowy serwera, który służy do odbierania danych beacona z naszej strony o tym adresie:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Jeśli dodamy metodę sendBeacon()
w obiekcie pagehide
, punkt końcowy otrzyma dane, gdy użytkownik opuści stronę:
Jeśli w Narzędziach dla programistów Chrome otworzysz kartę Sieć, na której zaznaczona jest opcja Zachowaj dzienniki, po przejściu z tej strony zobaczysz wysłane do tego punktu końcowego żądanie HTTP POST.
Możesz też otworzyć stronę inspekcji PutsReq, aby sprawdzić, czy dane z beacona zostały odebrane.
Dostępny jest też element niestandardowy Polymer, który umożliwia wysyłanie danych z beacona – <beacon-send>
. Znajdziesz go na stronie ebidel.github.io/beacon-send.