Che cos'è "sendBeacon"
Probabilmente conosci le due opzioni da utilizzare quando vuoi fare una richiesta da un client, come dalla tua app web progressiva: XMLHttpRequest o il più recente "fetch". Ma sapevi che esiste una terza opzione, progettata specificamente per l'invio di blocchi di dati molto piccoli come i dati di analisi? È una funzione chiamata "sendBeacon", disponibile nei browser moderni dall'oggetto "navigatore".
Come usare "sendBeacon"
L'utilizzo di questa funzione di richiesta appositamente creata per piccoli blocchi di dati è davvero semplice. Finché sono disponibili sia la funzione "navigatore" che "sendBeacon" sul navigatore, tutto ciò che devi fare è fornire un URL e il payload da inviare.
È possibile inviare i seguenti tipi di dati.
- ArrayBuffer
- ArrayBufferView
- Blob
- DOMString
- Dati modulo
- URLSearchParams
Ogni chiamata di "sendBeacon" trasmetterà una richiesta POST all'endpoint specificato.
async function track(payload: TrackPayload){
// We're using 'optional property access'
// for a simple and clean implementation.
//
// You could of course also use nested if(){ ... }.
await navigator?.sendBeacon?.('/track', payload);
}
// The following example is taken directly
// from the MDN page, linked in the addendum
// at the end of this page.
//
// It demonstrates the usage with the
// 'visibilitychange'-event when the user
// could close your web app.
document.addEventListener('visibilitychange', function logData() {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/log', analyticsData);
}
});
Cosa c'è di diverso
Il vantaggio principale di "sendBeacon" è che le tue richieste verranno effettivamente accodate dall'agente, ovvero dal browser che attualmente ha caricato il tuo client. Finché è disponibile una connessione di rete, i dati vengono inviati. Se nessun dato è disponibile o l'utente chiude la sua web app (prima che la richiesta possa essere inviata), il browser garantirà comunque che la richiesta venga eventualmente trasmessa.
Le altre funzioni di richiesta comuni non garantiscono che la tua richiesta venga inviata quando un utente chiude l'app Web (ad esempio chiudendo la scheda). Anche "sendBeacon" è completamente asincrono e non introduce alcun ritardo durante la navigazione in un'altra pagina della tua app Web, pur continuando a inviare i dati di analisi per la cronologia delle pagine dell'utente.
Migliora progressivamente la tua app web
Se disponi di un endpoint personalizzato per i dati di analisi, dovresti assolutamente provare questa nuova API. Tieni presente che un utente potrebbe chiamarti app Web con un browser che non supporta l'API (sebbene ciò sia altamente improbabile), quindi puoi migliorare progressivamente la tua app con un semplice controllo del supporto prima di utilizzarla.
