Wysyłanie danych typu beacon w Chrome 39

Ewa Gasperowicz

Czasami warto wysłać część danych ze strony internetowej na serwer WWW bez konieczności oczekiwania na odpowiedź. Możemy na przykład przesłać dane analityczne i diagnostyczne, zanim użytkownik opuści stronę.

Wysyłanie danych przed wyjściem wiąże się zwykle z odsłuchiwaniem zdarzenia unload, ponieważ wysłanie żądania w dowolnym momencie spowodowałoby zebranie niepełnych danych, np. pominięcie kliknięcia, które miało miejsce tuż przed wyjściem. Trzeba jednak pamiętać, że żądania wysyłane w module unload muszą być synchroniczne, ponieważ większość przeglądarek zwykle ignoruje asynchroniczne żądania XMLHttpRequest wysyłane w ramach wyładowywania. To podejście spowalnia nawigację, ponieważ użytkownik musi czekać na powrót żądania, zanim będzie można wyrenderować nową stronę.

Interfejs Beacon API rozwiązuje ten problem, umożliwiając asynchroniczne wysyłanie żądań HTTP z małymi ładunkami danych z przeglądarki do serwera WWW bez opóźniania innego kodu w zdarzeniu wyładowania strony i nie wpływania na wydajność następnej nawigacji po stronie.

Metoda navigator.sendBeacon() umieszcza w kolejce dane tak szybko, jak to możliwe, ale nie spowalnia nawigacji. Zwraca wartość true, jeśli przeglądarce udało się umieścić dane w kolejce do przeniesienia. W przeciwnym razie zwraca wartość false.

Załóżmy, że mamy punkt końcowy serwera do odbierania danych beaconów z naszej strony pod tym adresem:

https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop

Jeśli dodamy metodę sendBeacon() w module obsługi zdarzeń pagehide, punkt końcowy będzie otrzymywać dane, gdy użytkownik opuści stronę:

Jeśli sprawdzisz kartę sieci w Narzędziach deweloperskich w Chrome z zaznaczonym polem wyboru Zachowaj dzienniki, po opuszczeniu strony zobaczysz żądanie HTTP POST wysyłane do tego punktu końcowego.

Możesz też otworzyć stronę inspekcji PutsReq, aby sprawdzić, czy dane beaconów zostały odebrane.

Dostępny jest też element niestandardowy Polymer, który pozwala przesyłać dane z beaconu – <beacon-send>. Wypróbuj na stronie ebidel.github.io/beacon-send.