تعديلات على cache.addAll() وImportScripts() لإدخال التعديلات في الإصدار Chrome 71

Jeff Posnick

ينبغي على مطوّري البرامج الذين يستخدمون عاملي الخدمات وواجهة برمجة تطبيقات التخزين في ذاكرة التخزين المؤقت البحث عن الرمزين تغييرات صغيرة في الإصدار 71 من Chrome. يجلب كلا التغييرين عملية تنفيذ Chrome لمزيد من التوافق مع المواصفات والمتصفحات الأخرى.

عدم السماح باستيراد دالة importScripts() غير المتزامنة

importScripts() تخبر النص البرمجي لمشغِّل الخدمات الرئيسي بإيقاف التنفيذ الحالي مؤقتًا له وتنزيل رمز إضافي من عنوان URL معيّن وتشغيله حتى اكتماله في النطاق العام الحالي. بمجرد الانتهاء من ذلك، يتم استئناف تنفيذ النص البرمجي لعامل الخدمة الرئيسي. يكون importScripts() مفيدًا عندما كنت تريد تقسيم النص البرمجي لعامل الخدمة الرئيسي إلى أجزاء أصغر لأسباب تنظيمية، أو سحب رمز جهة خارجية لإضافة وظائف إلى مشغّل الخدمات لديك.

تحاول المتصفّحات الحد من مشاكل الأداء المحتملة المتمثلة في "تنزيل وتشغيل بعض رمز عن طريق التخزين المؤقت التلقائي لأي عنصر تم سحبه عبر importScripts()، ما يعني أنه بعد التنزيل الأولي، مع استهلاك قدر ضئيل جدًا من النفقات العامة في تنفيذ الرموز البرمجية المستوردة.

ولكي ينجح ذلك، يحتاج المتصفّح إلى معرفة أنّه لن تكون هناك أي "مفاجأة". تم استيراد الرمز إلى مشغّل الخدمات بعد التثبيت. وفقًا لمواصفات مشغّل الخدمات، من المفترض أن يعمل استدعاء importScripts() فقط أثناء التنفيذ المتزامن للمستوى الأعلى النص البرمجي لمشغل الخدمة، أو إذا لزم الأمر، بشكل غير متزامن داخل معالج install.

قبل الإصدار 71 من Chrome، كان الاتصال بـ importScripts() بشكل غير متزامن خارج معالِج install. عملك. بدءًا من الإصدار 71 من Chrome، ستلاحظ أنّ هذه المكالمات طرح استثناء بيئة تشغيل (ما لم يتم استيراد عنوان 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 إلى جانب مشغّل الخدمات، هناك تغيير بسيط آخر في الإصدار 71 من Chrome ليتوافق مع المواصفات ذات الصلة عندما يكون عنوان URL نفسه تم تمريره عدة مرات إلى مكالمة واحدة cache.addAll()، المواصفات تشير إلى أنه ينبغي رفض الوعد المردود عليه.

قبل الإصدار 71 من Chrome، لم يتم اكتشاف ذلك، وكان يتم تجاهل عناوين URL المكرّرة بشكلٍ فعال.

يُعد هذا التسجيل مقدمة للإصدار 72 من Chrome، فبدلاً من مجرّد تحذير مسجَّل، سيتم الزحف إلى عناوين 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، فمن المحتمل أنك اكتشفته عدم الاتساق وحدثت التعليمة البرمجية. ولكن من المحتمل ألا تكون قد لاحظت هذا في المتصفحات الأخرى، فإننا أردنا إبراز التغيير قبل تغيير سلوك Chrome.