بهبود حذف صفحه در XMLHttpRequest همزمان

Joe Medley

رایج است که یک صفحه یا برنامه در زمانی که کاربر آن را می‌بندد، تجزیه و تحلیل یا داده‌های دیگری ارسال نشده داشته باشد. برای جلوگیری از از دست دادن داده‌ها، برخی سایت‌ها از فراخوانی همزمان XMLHttpRequest() برای باز نگه داشتن صفحه یا برنامه تا زمان ارسال داده‌های آن به سرور استفاده می‌کنند. نه تنها راه‌های بهتری برای ذخیره داده‌ها وجود دارد، بلکه این تکنیک با به تأخیر انداختن بسته شدن صفحه تا چند ثانیه، یک تجربه کاربری بد ایجاد می‌کند.

این رویه باید تغییر کند و مرورگرها در حال واکنش به آن هستند. مشخصات XMLHttpRequest() از قبل برای منسوخ شدن و حذف شدن برنامه‌ریزی شده است. کروم ۸۰ اولین قدم را با غیرفعال کردن فراخوانی‌های همزمان در چندین رویداد، به ویژه beforeunload ، unload ، pagehide و visibilitychange هنگام اجرای آنها در زمان حذف، برمی‌دارد. وب‌کیت نیز اخیراً کامیتی را برای پیاده‌سازی همین تغییر رفتار دریافت کرده است.

من به طور خلاصه گزینه‌هایی را برای کسانی که برای به‌روزرسانی سایت‌های خود به زمان نیاز دارند شرح خواهم داد و جایگزین‌های XMLHttpRequest() را شرح خواهم داد.

انصراف‌های موقت

کروم می‌خواهد به توسعه‌دهندگان زمان بدهد تا وابستگی به XMLHttpRequest() را حذف کنند، بنابراین گزینه‌های انصراف موقت را ارائه داده‌ایم.

به یک دوره آزمایشی origin بپیوندید . با این کار، یک توکن مخصوص origin به هدرهای صفحه خود اضافه می‌کنید که فراخوانی‌های همزمان XMLHttpRequest() را فعال می‌کند. این گزینه کمی قبل از انتشار Chrome 89، در حدود مارس 2021، به پایان می‌رسد. مشتریان Enterprise Chrome همچنین می‌توانند از پرچم سیاست AllowSyncXHRInPageDismissal استفاده کنند که همزمان با آن به پایان می‌رسد.

جایگزین‌ها

صرف نظر از نحوه ارسال داده‌ها به سرور، بهتر است از انتظار برای تخلیه صفحه و ارسال همزمان همه داده‌ها خودداری کنید. گذشته از ایجاد یک تجربه کاربری بد، تخلیه در مرورگرهای مدرن غیرقابل اعتماد است و در صورت بروز مشکل، خطر از دست دادن داده‌ها را به همراه دارد. به طور خاص، رویدادهای تخلیه اغلب در مرورگرهای تلفن همراه اجرا نمی‌شوند زیرا راه‌های زیادی برای بستن یک تب یا مرورگر در سیستم عامل‌های تلفن همراه بدون اجرای رویداد unload وجود دارد. با XMLHttpRequest() ، استفاده از بارهای کوچک یک انتخاب بود. اکنون یک الزام است. هر دو جایگزین آن، همانطور که در مشخصات لازم است، محدودیت آپلود ۶۴ کیلوبایت در هر زمینه را دارند.

دریافت Keepalive

رابط برنامه‌نویسی کاربردی Fetch ابزاری قدرتمند برای مدیریت تعاملات سرور و رابطی سازگار برای استفاده در APIهای پلتفرم‌های مختلف فراهم می‌کند. از جمله گزینه‌های آن می‌توان به keepalive اشاره کرد که تضمین می‌کند یک درخواست، صرف نظر از باز بودن یا نبودن صفحه‌ای که آن را ایجاد کرده است، ادامه می‌یابد:

window.addEventListener('unload', {
  fetch('/siteAnalytics', {
    method: 'POST',
    body: getStatistics(),
    keepalive: true
  });
}

متد fetch() این مزیت را دارد که کنترل بیشتری بر آنچه به سرور ارسال می‌شود، دارد. چیزی که در مثال نشان نمی‌دهم این است که fetch() همچنین یک promise را برمی‌گرداند که با یک شیء Response حل می‌شود. از آنجایی که من سعی دارم از سر راه تخلیه صفحه کنار بروم، تصمیم گرفتم هیچ کاری با آن انجام ندهم.

SendBeacon()

SendBeacon() در واقع از رابط برنامه‌نویسی کاربردی Fetch در زیر بدنه خود استفاده می‌کند، به همین دلیل است که همان محدودیت حجم ۶۴ کیلوبایت را دارد و همچنین تضمین می‌کند که درخواست پس از تخلیه صفحه ادامه یابد. مزیت اصلی آن سادگی آن است. به شما امکان می‌دهد داده‌های خود را با یک خط کد ارسال کنید:

window.addEventListener('unload', {
  navigator.sendBeacon('/siteAnalytics', getStatistics());
}

نتیجه‌گیری

با افزایش دسترسی به تابع fetch() در مرورگرها، امیدواریم که XMLHttpRequest() از پلتفرم وب حذف شود. فروشندگان مرورگر موافقند که باید حذف شود، اما این کار زمان می‌برد. کنار گذاشتن یکی از بدترین موارد استفاده از آن، اولین قدمی است که تجربه کاربری را برای همه بهبود می‌بخشد.