Wat is "sendBeacon"
U ken waarskynlik die twee opsies om te gebruik wanneer u 'n versoek van 'n kliënt wil rig, soos van u progressiewe webprogram: XMLHttpRequest of die nuwer 'haal'. Maar het u geweet dat daar 'n derde opsie is, spesifiek ontwerp om baie klein stukkies data soos analitiese data te stuur? Dit is 'n funksie genaamd 'sendBeacon', wat in moderne blaaiers beskikbaar is vanaf die 'navigator' -objek.
Hoe om 'sendBeacon' te gebruik
Die gebruik van hierdie doelgeboude versoekfunksie vir klein stukkies data is regtig eenvoudig. Solank as wat beide die "navigator" sowel as die "sendBeacon" -funksie op die navigator beskikbaar is, hoef u net 'n URL sowel as 'n vrag te verskaf.
U kan die volgende tipes data stuur.
- ArrayBuffer
- ArrayBufferView
- Blob
- DOMString
- FormData
- URLSearchParams
Elke oproep van "sendBeacon" stuur 'n POST-versoek na die gespesifiseerde eindpunt.
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);
}
});
Wat is anders
Die grootste voordeel van 'sendBeacon' is dat u versoek in werklikheid deur die agent in die ry geplaas word, wat beteken dat die blaaier u kliënt tans gelaai het. Solank daar 'n netwerkverbinding beskikbaar is, word die data dan gestuur. As daar geen data beskikbaar is nie of die gebruiker u web -app sluit (voordat die versoek gestuur kon word), sal die blaaier steeds waarborg dat die versoek uiteindelik gestuur sal word.
Die ander, algemene versoekfunksies waarborg nie dat u versoek gestuur sal word as 'n gebruiker die webprogram sluit nie (byvoorbeeld deur die oortjie te sluit). 'sendBeacon' is ook heeltemal asynchroon en bied geen vertraging wanneer u na 'n ander bladsy in u webprogram navigeer nie, terwyl u steeds die analitiese data vir die gebruiker se bladsygeskiedenis stuur.
Verbeter u webprogram geleidelik
As u 'n pasgemaakte eindpunt vir analitiese data het, moet u beslis hierdie nuwe API probeer. Hou in gedagte dat 'n gebruiker u 'n webprogram kan noem met 'n blaaier wat nie die API ondersteun nie (alhoewel dit hoogs onwaarskynlik is), sodat u u app geleidelik kan verbeter met 'n eenvoudige kontrole vir ondersteuning voordat u dit gebruik.
