کاهش ناوبری با تاخیر
معمول است که یک صفحه یا برنامه در زمانی که کاربر آن را می بندد، تجزیه و تحلیل یا سایر داده های ارسال نشده داشته باشد. برای جلوگیری از از دست دادن داده ها، برخی از سایت ها از فراخوانی همزمان با XMLHttpRequest() استفاده می کنند تا صفحه یا برنامه را تا زمانی که داده های آن به سرور ارسال شود باز نگه دارد. نه تنها راه های بهتری برای ذخیره داده ها وجود دارد، بلکه این تکنیک با به تاخیر انداختن بسته شدن صفحه تا چند ثانیه، تجربه کاربری بدی ایجاد می کند.
این روش باید تغییر کند و مرورگرها در حال پاسخگویی هستند. مشخصات XMLHttpRequest() قبلاً برای منسوخ شدن و حذف برنامه ریزی شده است. Chrome 80 اولین گام را با غیرمجاز کردن تماس‌های همزمان در چندین کنترل کننده رویداد، به‌ویژه beforeunload ، unload ، pagehide ، و visibilitychange زمانی که در رد کردن فعال می‌شوند، برمی‌دارد. WebKit همچنین اخیراً commitی را برای اجرای همان تغییر رفتار ارائه کرده است.
در این مقاله من به طور خلاصه گزینه هایی را برای کسانی که به زمان نیاز دارند تا سایت های خود را به روز کنند و جایگزین های XMLHttpRequest() را شرح می دهم.
انصراف های موقت
کروم به سادگی نمی‌خواهد به XMLHttpRequest() متصل شود، به همین دلیل است که چند گزینه انصراف موقت در دسترس است. برای سایت‌های موجود در اینترنت، یک آزمایش اولیه در دسترس است . با این کار، یک توکن مخصوص مبدا را به سرصفحه های صفحه خود اضافه می کنید که فراخوانی های همزمان XMLHttpRequest() را فعال می کند. این گزینه اندکی قبل از ارسال Chrome 89، در مارس 2021 پایان می‌یابد. مشتریان سازمانی Chrome می‌توانند از پرچم خط‌مشی AllowSyncXHRInPageDismissal نیز استفاده کنند که در همان زمان به پایان می‌رسد.
جایگزین، گزینه ها
صرف نظر از اینکه چگونه داده ها را به سرور ارسال می کنید، بهتر است از منتظر ماندن تا بارگیری صفحه برای ارسال همه داده ها به یکباره خودداری کنید. جدا از ایجاد یک تجربه کاربری بد، دانلود کردن در مرورگرهای مدرن غیرقابل اعتماد است و در صورت بروز مشکل در خطر از دست دادن اطلاعات است. به طور خاص، رویدادهای بارگیری اغلب در مرورگرهای تلفن همراه فعال نمی‌شوند، زیرا راه‌های زیادی برای بستن برگه یا مرورگر در سیستم‌عامل‌های تلفن همراه بدون unload رویداد بارگیری وجود دارد. با XMLHttpRequest() استفاده از بارهای کوچک یک انتخاب بود. حالا این یک نیاز است. هر دو گزینه جایگزین آن دارای محدودیت آپلود 64 کیلوبایت در هر زمینه هستند، همانطور که در مشخصات لازم است.
Kealive را واکشی کنید
Fetch API ابزاری قوی برای مقابله با تعاملات سرور و یک رابط سازگار برای استفاده در APIهای پلتفرم مختلف ارائه می دهد. یکی از گزینه‌های آن keepalive است که تضمین می‌کند که درخواست همچنان باز بماند یا نباشد:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
روش fetch() این مزیت را دارد که کنترل بیشتری بر آنچه به سرور ارسال می شود دارد. چیزی که در مثال نشان نمی‌دهم این است که fetch() نیز یک وعده را برمی‌گرداند که با یک شی Response حل می‌شود. از آنجایی که سعی می کنم از مسیر تخلیه صفحه خارج شوم، ترجیح دادم کاری با آن انجام ندهم.
SendBeacon()
SendBeacon() در واقع از Fetch API در زیر هود استفاده می کند، به همین دلیل است که همان محدودیت بارگذاری 64 کیلوبایتی را دارد و همچنین تضمین می کند که درخواست پس از بارگیری صفحه ادامه می یابد. مزیت اصلی آن سادگی آن است. این به شما امکان می دهد داده های خود را با یک خط کد ارسال کنید:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
نتیجه
با افزایش در دسترس بودن fetch() در بین مرورگرها، XMLHttpRequest() امیدواریم در مقطعی از پلتفرم وب حذف شود. فروشندگان مرورگر موافق هستند که باید حذف شود، اما زمان می برد. منسوخ کردن یکی از بدترین موارد استفاده آن اولین قدمی است که تجربه کاربری را برای همه بهبود می بخشد.
عکس متیو همیلتون در Unsplash