Beacon API

window.addEventListener('unload', function() {
  navigator.sendBeacon(url, data);
});

Podpora v prohlížečích

• Chrome 39
• Firefox 31
• Opera 26

Využití

V některých případech je potřeba poslat na server nějaká data před opuštěním stránky, typicky:

1. Uložení rozepsaných dat na server k uživatelskému profilu.

2. Skripty pro monitorování návštěvnosti / chování na webu potřebují požadavek před opuštěním k zaznamenání určením konce návštěvy.

Situace před Beacon API nabízela cca 3 způsoby řešení.

1. Data průběžně posílat na základě časovače. To zvýší počet požadavků a není jisté, že se odešle aktuální stav.

2. Odeslat data asynchronně AJAXem před opuštěním stránky (událost unload). Prohlížeče ale často takový obsah nestihnou odeslat.

3. Odeslat data synchronně (zajistí to třetí parametr u metody open u XMLHttpRequestu nastavený na false):

   var xhr = new XMLHttpRequest();
   xhr.open('GET', '/ulozit.php?data=něco', false);
   xhr.send(null);

   Nevýhoda je v tom, že na tento požadavek bude prohlížeč čekat.

Ukázka použití

Beacon API tedy umožní spolehlivě uložit potřebný obsah bez blokování opuštění stránky (unload).

Metoda navigator.sendBeacon má dva parametry – adresu skriptu a data. Data je také možné pochopitelně přidat na přímo do URL. Požadavek na ukládací skript se přes sendBeacon odesílá metodou POST.

function log() {
  navigator.sendBeacon(
    "ulozit.php", 
    JSON.stringify(
      {
        'prvni': 'hodnota',
        'druha': 'jiná hodnota'
      }
    )
  );
}

Tuto funkci log je potom vhodné použít před opuštěním stránky (onload).

window.addEventListener('unload', log);

Ale nic nebrání jejímu použití při kliknutí na tlačítko – zkrátka u akcí, kde nepotřebujeme odpověď.

<button onclick="log()">
  Tlačítko
</button>

Zpracování dat v PHP

Dostat se k datům odeslaných výše uvedenou JS funkcí log a připsat je do souboru může v PHP vypadat následovně:

$payload = file_get_contents('php://input');
$data = json_decode($payload, true);
file_put_contents(
  "data.txt", 
  date('H:i:s') . ": " . $data['prvni'] . $data['druha'] . "\n", 
  FILE_APPEND
);

Použití v Google Analytics

V nástroji pro měření návštěvností – Google Analytics je možné předat parametr useBeacon, který v podporovaných prohlížečích použije Beacon API.

ga('send', 'event', 
  'click', 
  'download-me', 
  {useBeacon: true}
);

Zaslání požadavku do GA před opuštěním stránky jde potom docílit zkombinováním useBeacon s událostí unload.

window.addEventListener('unload', function() {
  ga('send', 'event', 
    'Unload', 
    location.pathname,  
    {useBeacon: true}
  );
});

Odkazy jinam

• Zabránění zavření stránky událostí onbeforeunload
• W3C: Beacon API
• MDN: navigator.sendBeacon()