A volte è utile inviare alcuni dati da una pagina web a un server web senza dover aspettare una risposta. Ad esempio, potremmo voler inviare dati analitici o diagnostici prima che l'utente esca dalla pagina.
In genere, l'invio di dati prima dell'uscita comportava l'ascolto dell'evento unload, perché l'invio della richiesta in qualsiasi momento prima comportava dati incompleti (ad es. potremmo aver perso un clic immediatamente prima dell'uscita).
L'avvertenza era che le richieste inviate al gestore unload dovevano essere sincrone, perché la maggior parte dei browser in genere ignora le richieste XMLHttpRequest asincrone effettuate in un gestore dell'unload.
Questo approccio rallenta la navigazione, poiché l'utente deve attendere la restituzione della richiesta prima che sia possibile visualizzare una nuova pagina.
L'API Beacon risolve questo problema consentendo di inviare in modo asincrono richieste HTTP con piccoli payload di dati da un browser a un server web, senza ritardare altro codice nell'evento di unload della pagina o influire sulle prestazioni della navigazione nella pagina successiva.
Il metodo navigator.sendBeacon() mette in coda i dati che devono essere trasmessi dal browser non appena possibile,
ma non rallenta la navigazione.
Restituisce true se il browser è in grado di aggiungere correttamente alla coda i dati per il trasferimento. In caso contrario, viene restituito false.
Supponiamo di avere a disposizione un endpoint del server per la ricezione dei dati di beaconing dalla nostra pagina a questo indirizzo:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Se aggiungiamo un metodo sendBeacon() nel gestore di eventi pagehide, l'endpoint riceverà i dati quando l'utente esce dalla pagina:
Se controlli la scheda della rete in Chrome DevTools e hai selezionato la casella di controllo Conserva log, quando esci dalla pagina vedrai una richiesta POST HTTP inviata all'endpoint sopra indicato.
In alternativa, puoi visitare la pagina di ispezione PutsReq per verificare se i dati del beacon sono stati ricevuti.
Esiste anche un elemento personalizzato Polymer che ti consente di inviare dati del beacon: <beacon-send>. Controllala all'indirizzo ebidel.github.io/beacon-send.