A volte è utile inviare alcuni dati da una pagina web a un server web senza dover attendere una risposta. Ad esempio, potremmo voler inviare dati di analisi o diagnostica prima che l'utente esca da una pagina.
In genere, l'invio dei dati prima dell'uscita prevedeva l'ascolto dell'evento unload, poiché l'invio della richiesta in un momento precedente avrebbe comportato dati incompleti, ad esempio potremmo aver perso un clic avvenuto appena prima dell'uscita.
Il problema era che le richieste inviate nel gestore dello scollegamento dovevano essere sincrone, perché la maggior parte dei browser in genere ignora le richieste XMLHttpRequest asincrone effettuate in un gestore dello scollegamento.
Questo approccio rallenta la navigazione, poiché l'utente deve attendere il ritorno della richiesta prima che una nuova pagina possa essere visualizzata.
L'API Beacon risolve questo problema consentendoti 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 svuotamento della pagina o influire sulle prestazioni della navigazione alla pagina successiva.
Il metodo navigator.sendBeacon() mette in coda i dati da trasmettere dal browser il prima possibile, ma non rallenta la navigazione.
Restituisce true se il browser è in grado di mettere in coda correttamente i dati per il trasferimento. In caso contrario, restituisce false.
Supponiamo di avere un endpoint del server disponibile per la ricezione degli indicatori della nostra pagina all'indirizzo:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Se aggiungiamo un metodo sendBeacon() nel gestore degli eventi pagehide,
l'endpoint riceverà i dati quando l'utente esce dalla pagina:
Se esamini la scheda Rete in Strumenti per sviluppatori di Chrome con la casella di controllo Conserva i log selezionata, vedrai una richiesta POST HTTP all'endpoint sopra indicato che viene inviata quando esci dalla pagina.
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 i dati dei beacon: <beacon-send>. Dai un'occhiata all'indirizzo ebidel.github.io/beacon-send.