Inviare dati statistici al server in JavaScript: il metodo sendBeacon()

Un problema comune quando si inviamo dati statistici al server dal frontend riguarda il fatto che se si utilizza AJAX molto spesso si va a creare un blocco nel caricamento della pagina. Fortunatamente esiste una soluzione nativa.

Il metodo navigator.sendBeacon() accetta due parametri:

  1. L'URL (relativo o assoluto) a cui inviare la richiesta.
  2. I dati da inviare, sotto forma di stringa, oggetto, FormData, Blob, ArrayBuffer, TypedArray, DataViewo un'instanza di URLSearchParams.

Questo metodo non effettua immediatamente la richiesta POST al server, ma la inserisce in una coda di esecuzione che il browser andrà ad eseguire in un secondo momento. Qui sta la differenza con AJAX, che esegue la richiesta immediatamente.

Immaginiamo di voler inviare al server l'identificativo del browser usato dal client leggendo la stringa della proprietà userAgent. Possiamo scrivere:

function sendStats() {
    navigator.sendBeacon('/stats', navigator.userAgent);
}

Possiamo eseguire questa funzione in un momento preciso del ciclo di vita di una pagina web, ad esempio quando l'utente ha terminato di interagire con la pagina stessa.

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    sendStats();
  }
});

Per questo tipo di scenario, gli eventi unload, beforeunload e pagehide si rivelano essere inefficienti e inaffidabili, soprattutto sui dispositivi mobile.

Conclusione

Il metodo sendBeacon() è pensato proprio per inviare dati statistici al server evitando di bloccare la pagina utilizzando AJAX. Essendo un metodo nativo, è particolarmente indicato come sostituto di AJAX.

Torna su