برنامه های کاربردی وب اغلب نیاز به صدور درخواست هایی دارند که رویدادها، به روز رسانی های وضعیت و تجزیه و تحلیل را به یک یا چند سرور گزارش می دهند. چنین درخواست‌هایی معمولاً نیازی به پردازش پاسخ روی کلاینت ندارند (برای مثال، منجر به 204 یا 200 کد پاسخ HTTP با بدنه پاسخ خالی می‌شود) و نباید برای منابع شبکه و محاسباتی با سایر عملیات‌های با اولویت بالا مانند واکشی منابع رقابت کنند. ، برای درج کردن، اجرای انیمیشن ها و غیره واکنش نشان دهید. با این حال، این درخواست‌های یک‌طرفه (بیکن‌ها) همچنین مسئول ارائه داده‌های کاربردی و اندازه‌گیری حیاتی هستند و توسعه‌دهندگان را مجبور می‌کنند از روش‌های گران قیمت برای اطمینان از تحویل آنها استفاده کنند:
-
توسعه دهندگان به جای ترتیب دادن و تأخیر در تحویل، تحویل فوری هر چراغ را انتخاب می کنند، زیرا این امر نرخ تحویل بهتری را ارائه می دهد. به تعویق انداختن تحویل می تواند به این معنی باشد که درخواست beacon ممکن است زمان کافی برای تکمیل موفقیت آمیز نداشته باشد، که منجر به از دست رفتن داده های مهم برنامه می شود.
-
توسعه‌دهندگان تصمیم می‌گیرند درخواست‌های مسدودسازی را از طریق XMLHttpRequest همزمان، درج حلقه‌های اشغال بدون عملیات یا استفاده از تکنیک‌های دیگری که مانع از انجام عملیات حساس زمانی توسط عامل کاربر (مانند کلیک کردن، بارگیری، و سایر کنترل‌کننده‌ها) شود و به تجربه کاربر آسیب برساند، صادر کنند. رفتار مسدود کردن برای ارائه نرخ تحویل بهبود یافته با جلوگیری از لغو درخواست توسط عامل کاربر و سیستم عامل در صورت تخلیه، تعلیق یا حذف صفحه توسط سیستم استفاده می شود.
عدم تطابق بین الزامات تحویل و پردازش بالا، اکثر توسعه‌دهندگان را با انتخاب دشوار و پذیرش گسترده تکنیک‌های مسدودسازی که تجربه کاربر را کاهش می‌دهند، قرار می‌دهد. این مشخصات رابطی را تعریف می‌کند که توسعه‌دهندگان وب می‌توانند از آن برای برنامه‌ریزی تحویل ناهمزمان و بدون مسدود کردن داده‌ها استفاده کنند که اختلاف منابع با سایر عملیات‌های حساس زمانی را به حداقل می‌رساند، در حالی که اطمینان حاصل می‌کند که چنین درخواست‌هایی همچنان پردازش شده و به مقصد تحویل می‌شوند:
- درخواست‌های Beacon برای اجتناب از رقابت با عملیات‌های حساس زمانی و درخواست‌های شبکه با اولویت بالاتر اولویت‌بندی می‌شوند.
- درخواست‌های Beacon را می‌توان به‌طور مؤثری توسط عامل کاربر جمع‌بندی کرد تا مصرف انرژی در دستگاه‌های تلفن همراه را بهینه کند.
- درخواست‌های Beacon تضمین می‌شوند که قبل از بارگیری صفحه شروع می‌شوند و می‌توانند بدون نیاز به مسدود کردن درخواست‌ها یا تکنیک‌های دیگری که پردازش رویدادهای تعاملی کاربر را مسدود می‌کنند، تا تکمیل شوند.
ارسال یک فانوس دریایی ساده است (در حال حاضر در تمام مرورگرهای مدرن!)
- درخواست های Beacon نیازی به پاسخ ندارند. این تفاوت بزرگی با درخواست‌های معمولی XHR یا واکشی است که در آن مشتری (مرورگر) منتظر پاسخ از طرف سرور است.
- درخواست های Beacon قبلا آغاز شده است برای بارگیری صفحه، حتی وقتی مرورگر را می بندید.
- درخواست‌های Beacon بدون نیاز به درخواست قفل کامل می‌شوند (مثلاً XHR).
- درخواست های Beacon از روش HTTP POST استفاده می کنند.
navigator.sendBeacon('/url-que-vai-receber-o-dado', data);
اجرای بزرگتر!
//evento não bloqueante! Não bloqueia o loop de eventos do JS no cliente!
function reportEvent(event) {
var data = JSON.stringify({
event: event,
time: performance.now()
});
navigator.sendBeacon('/collector', data);
}
// emite beacon sem bloqueio com análise de sessão da página
// transições para o estado de segundo plano (Page Visibility API)
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
var sessionData = buildSessionReport();
navigator.sendBeacon('/url', sessionData);
}
});
درخواست‌هایی که از طریق متد sendBeacon () آغاز می‌شوند، کار حساس زمانی را مسدود نمی‌کنند یا با آن رقابت نمی‌کنند، می‌توانند توسط عامل کاربر برای بهبود کارایی شبکه اولویت‌بندی شوند و نیاز به استفاده از عملیات مسدودسازی برای اطمینان از تحویل داده‌های beacon را از بین ببرند.
OBS:
متد sendBeacon() توانایی سفارشی کردن روش درخواست، ارائه هدرهای درخواست سفارشی، یا تغییر سایر ویژگی های پردازش درخواست و پاسخ را ارائه نمی دهد. برنامه هایی که برای چنین درخواست هایی به تنظیمات غیر پیش فرض نیاز دارند باید از API استفاده کنند [ FETCH ] با keepalive روی true تنظیم شده است.
هنگامی که یک صفحه بارگیری می شود (به عنوان مثال بسته شدن مرورگر، پیمایش صفحه، و غیره) بیکن ها برای ارسال داده ها به سرور مفید هستند.
if (navigator.sendBeacon) {
// faça a magica acontecer
navigator.sendBeacon('/collector', Data);
} else {
// esse navegador não tem beacon
// use XHR ou fetch
}
فرمت های پذیرفته شده توسط beacon برای ارسال
- ArrayBufferView
- لکه
- DOMStringou
- FormData داده ها اختیاری هستند!
موارد استفاده کنید
- بدانید کاربر چه مدت در یک جلسه صرف کرده است!
- کنترل های UI که توسط کاربران استفاده می شود چیست!
- هر نوع اطلاعات تله متری دیگری که باید گرفته شود!
محدودیتی برای داده هایی که می توان با استفاده از Beacon API به سرور ارسال کرد وجود دارد. با این حال، این محدودیت در همه مرورگرها و عوامل کاربر یکسان نیست.
آیا قبلاً از API استفاده می کنید؟
منابع:
https://www.w3.org/TR/beacon/
https://javascript.plainenglish.io/save-your-analytics-data-with-the-beacon-and-pagevisibility-apis-f7d6a01087c4
