Mi az a "sendBeacon"
Valószínűleg ismeri a két lehetőséget, amelyet akkor kell használni, ha kérést szeretne kérni egy ügyféltől, például a progresszív webes alkalmazásából: vagy az XMLHttpRequest, vagy az újabb "letöltés". De tudtad, hogy van egy harmadik lehetőség is, amelyet kifejezetten nagyon kis adatdarabok, például elemzési adatok küldésére terveztek? Ez egy "sendBeacon" nevű funkció, amely a modern böngészőkben a "navigátor" objektumból érhető el.
A "sendBeacon" használata
Ennek a célra kialakított kérési funkciónak a használata kis adatdarabokhoz nagyon egyszerű. Amíg mind a "navigátor", mind a "sendBeacon" -funkció elérhető a navigátoron, mindössze annyit kell tennie, hogy megadja az URL-t és a küldendő hasznos terhet.
A következő típusú adatokat küldheti el.
- ArrayBuffer
- ArrayBufferView
- Folt
- DOMString
- FormData
- URLSearchParams
A "sendBeacon" minden hívása POST kérést továbbít a megadott végpontra.
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);
}
});
Miben más
A "sendBeacon" fő előnye, hogy kéréseit valóban az ügynök sorba állítja, vagyis a böngésző által, amely jelenleg betölti az ügyfelet. Amíg elérhető a hálózati kapcsolat, az adatok elküldésre kerülnek. Ha nem állnak rendelkezésre adatok, vagy a felhasználó bezárja webes alkalmazását (mielőtt a kérést elküldték volna), a böngésző továbbra is garantálja, hogy a kérés végül el lesz küldve.
A többi, gyakori kérési funkció nem garantálja, hogy a kérés akkor kerül elküldésre, amikor a felhasználó bezárja a webes alkalmazást (például a lap bezárásával). A "sendBeacon" szintén teljesen aszinkron, és nem okoz késedelmet, amikor a webes alkalmazás egy másik oldalára navigál, miközben továbbra is elküldi az elemzési adatokat a felhasználó oldalelőzményeihez.
Folyamatosan javítsa webes alkalmazását
Ha egyéni végpontja van az elemzési adatokhoz, feltétlenül próbálja ki ezt az új API -t. Kérjük, ne feledje, hogy a felhasználó hívhatja Önt webalkalmazásnak olyan böngészővel, amely nem támogatja az API -t (bár ez nagyon valószínűtlen), ezért fokozatosan fejlesztheti az alkalmazást a támogatás egyszerű ellenőrzésével, mielőtt használná.
