navigator.sendBeacon în JavaScript

navigator.sendBeacon(url, date)

Ce face navigator.sendBeacon

O cerere fetch pornită când utilizatorul închide fila poate fi anulată. sendBeacon pune datele într-o coadă pe care browserul o trimite oricum, în fundal, ca cerere POST. Nu primești răspunsul.

Returnează true dacă datele au fost acceptate în coadă. Se trimite de obicei în evenimentul visibilitychange (când pagina devine ascunsă), mai sigur decât unload pe telefoane. Alternativa modernă: fetch(url, { method: "POST", keepalive: true }).

Parametri

Parametru	Descriere
url	Adresa la care se trimit datele.
date	Opțional. Text, Blob, FormData, URLSearchParams sau octeți.

Ce returnează

true sau false.

Exemple

Exemplul 1: Timpul petrecut pe pagină

const inceput = performance.now();

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState !== "hidden") return;
  const date = JSON.stringify({ pagina: location.pathname, secunde: Math.round((performance.now() - inceput) / 1000) });
  console.log(navigator.sendBeacon("/api/statistici", new Blob([date], { type: "application/json" })));
});

Rezultat în browser

true

Greșeli frecvente

• Trimiți cu sendBeacon date mari (zeci de KB). Browserele limitează mărimea și returnează false.

Comenzi înrudite

• fetch: Trimite o cerere HTTP la un server și primește răspunsul, fără reîncărcarea paginii.
• Blob / File: Un bloc de date imuabil, cu tip MIME (Blob), sau un fișier cu nume și dată (File).
• requestIdleCallback: Rulează o funcție când browserul nu are nimic important de făcut; pentru sarcini care pot aștepta.