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.
Wyjątek polegał na tym, że żądania wysyłane w obiekcie funkcji obsługi ładowania muszą być synchroniczne, ponieważ większość przeglądarek zwykle ignoruje asynchroniczne żądania XMLHttpRequest wysyłane w obiekcie funkcji obsługi ładowania.
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 innych kodów w zdarzeniu rozładowania strony ani 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 na karcie sieci w Narzędziach dla programistów w Chrome zaznaczysz pole wyboru zachowaj dzienniki, po opuszczeniu strony zobaczysz wysłane żądanie HTTP POST do podanego powyżej punktu końcowego.
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.