بهینه‌سازی‌هایی در cache.addAll() و importScripts() که در Chrome 71 ارائه می‌شوند

توسعه دهندگانی که از Service Workers و Cache Storage API استفاده می کنند باید مواظب دو تغییر کوچک باشند که در Chrome 71 اعمال می شود. هر دو تغییر، اجرای Chrome را با مشخصات s و سایر مرورگرها مطابقت می دهد.

غیرمجاز کردن importScripts ناهمزمان()

importScripts() به اسکریپت اصلی سرویس‌گر شما می‌گوید که اجرای فعلی خود را موقتاً متوقف کند، کد اضافی را از یک URL معین دانلود کند و آن را تا تکمیل در محدوده جهانی فعلی اجرا کند. پس از انجام این کار، اسکریپت main service worker اجرا را از سر می گیرد. وقتی می‌خواهید اسکریپت اصلی سرویس‌کار خود را به دلایل سازمانی به قطعات کوچک‌تر تقسیم کنید، یا کد شخص ثالث را برای افزودن قابلیت به سرویس‌کار خود وارد کنید، importScripts() مفید است.

مرورگرها سعی می‌کنند با ذخیره خودکار هر چیزی که از طریق importScripts() کشیده می‌شود، مشکلات احتمالی عملکرد «دانلود و اجرای برخی کدهای همزمان» را کاهش دهند، به این معنی که پس از دانلود اولیه، هزینه‌های سربار بسیار کمی در اجرای کد وارد شده وجود دارد.

با این حال، برای اینکه این کار کار کند، مرورگر باید بداند که پس از نصب اولیه، هیچ کد «غافلگیرکننده» وارد سرویس‌کار نخواهد شد. طبق مشخصات سرویس‌کار ، فراخوانی importScripts() تنها در طول اجرای همزمان اسکریپت سرویس‌کار سطح بالا یا در صورت نیاز، به‌صورت ناهمزمان در داخل کنترل‌کننده install کار می‌کند.

قبل از Chrome 71، فراخوانی importScripts() به صورت ناهمزمان خارج از کنترل کننده install کار می کرد. از Chrome 71 شروع می‌شود ، این تماس‌ها یک استثنا در زمان اجرا ایجاد می‌کنند (مگر اینکه همان URL قبلاً در یک کنترل‌کننده install وارد شده باشد)، که با رفتار مرورگرهای دیگر مطابقت دارد.

به جای کدهای زیر:

// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
  importScripts('my-fetch-logic.js');
  event.respondWith(self.customFetchLogic(event));
});

کد کارمند سرویس شما باید به شکل زیر باشد:

// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
  event.respondWith(self.customFetchLogic(event));
});

منسوخ شدن URL های مکرر ارسال شده به cache.addAll()

اگر از Cache Storage API در کنار یک سرویس‌کار استفاده می‌کنید، تغییر کوچک دیگری در Chrome 71 وجود دارد تا با مشخصات مربوطه هماهنگ شود. هنگامی که یک URL یکسان چندین بار به یک فراخوانی به cache.addAll() ارسال می‌شود، مشخصات می‌گوید که قولی که توسط تماس برگشت داده می‌شود باید رد شود.

قبل از Chrome 71، این مورد شناسایی نشد و URL های تکراری به طور موثر نادیده گرفته می شدند.

تصویری از پیام هشدار در کنسول کروم
با شروع در Chrome 71، یک پیام هشدار وارد شده به کنسول خواهید دید.

این گزارش‌گیری مقدمه‌ای برای Chrome 72 است، جایی که به‌جای یک هشدار ثبت‌شده، URL‌های تکراری منجر به رد cache.addAll() می‌شود. اگر cache.addAll() به عنوان بخشی از یک زنجیره وعده که به InstallEvent.waitUntil() فراخوانی می کنید، همانطور که معمول است، این رد ممکن است باعث شود که سرویس کار شما نصب نشود.

در اینجا این است که چگونه ممکن است با مشکل مواجه شوید:

const urlsToCache = [
  '/index.html',
  '/main.css',
  '/app.js',
  '/index.html', // Oops! This is listed twice and should be removed.
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
  );
});

این محدودیت فقط برای URL های واقعی که به cache.addAll() ارسال می شوند اعمال می شود، و ذخیره آنچه در نهایت دو پاسخ معادل هستند که URL های متفاوتی دارند - مانند '/' و '/index.html' - باعث رد نمی شود.

اجرای سرویس کارمند خود را به طور گسترده آزمایش کنید

کارگران سرویس به طور گسترده در تمام مرورگرهای اصلی "همیشه سبز" در این مرحله پیاده سازی می شوند. اگر به طور منظم برنامه وب پیشرو خود را با تعدادی از مرورگرها آزمایش می کنید، یا اگر تعداد قابل توجهی کاربر دارید که از Chrome استفاده نمی کنند، احتمالاً قبلاً ناسازگاری را تشخیص داده اید و کد خود را به روز کرده اید. اما به احتمال زیاد شما متوجه این رفتار در سایر مرورگرها نشده‌اید، می‌خواهیم قبل از تغییر رفتار کروم، این تغییر را اعلام کنیم.