وصول خيارات ذاكرة التخزين المؤقت إلى Chrome 54

إذا كنت تستخدم واجهة برمجة التطبيقات Cache Storage API، إمّا من داخل مشغّل الخدمات أو من تطبيقات الويب مباشرةً عبر window.caches، نحمل لك خبرًا سارًّا: بدءًا من إصدار 54 من Chrome، تتوافق مجموعة CacheQueryOptions الكاملة، ما يسهّل العثور على الردود المخزّنة مؤقتًا التي تبحث عنها.

ما هي الخيارات المتاحة؟

يمكن ضبط الخيارات التالية في أي مكالمة على CacheStorage.match() أو Cache.match(). في حال عدم ضبط هذه السياسة، يتم ضبطها تلقائيًا على false (أو undefined لمدة cacheName)، ويمكنك استخدام خيارات متعددة في مكالمة واحدة مع match().

ignoreSearch

يؤدي هذا إلى توجيه خوارزمية المطابقة لتجاهل جزء البحث من عنوان URL، والمعروف أيضًا باسم مَعلمات طلب البحث لعنوان URL. ويمكن أن يكون هذا مفيدًا عندما يكون لديك عنوان URL مصدر يحتوي على مَعلمات طلب بحث تُستخدم لتتبع الإحصاءات على سبيل المثال، ولكنها ليست ذات أهمية من حيث تحديد مورد بشكلٍ فريد في ذاكرة التخزين المؤقت. على سبيل المثال، وقع الكثير من الناس فريسة لمشغل الخدمات التالي "gotcha":

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

self.addEventListener('fetch', event => {
  // Make sure this is a navigation request before responding.
  if (event.request.mode === 'navigation') {
    event.respondWith(
      caches.match(event.request) || fetch(event.request)
    );
  }
});

يعمل هذا النوع من الرموز على النحو المتوقع عندما ينتقل المستخدم مباشرةً إلى index.html، ولكن ماذا لو كان تطبيق الويب الخاص بك يستخدم مزوّد تحليلات لتتبُّع الروابط الواردة، وينتقل المستخدم إلى index.html?utm_source=some-referral؟ بشكل تلقائي، لن يؤدي تمرير index.html?utm_source=some-referral إلى caches.match() إلى عرض إدخال index.html. ولكن إذا تم ضبط ignoreSearch على true، يمكنك استرداد الاستجابة المخزّنة مؤقتًا التي تتوقعها بغض النظر عن معلَمات طلب البحث التي تم ضبطها:

caches.match(event.request, {ignoreSearch: true})

cacheName

تكون ميزة cacheName مفيدة عندما يكون لديك عدة ذاكرات مؤقتة وتريد الحصول على استجابة مخزّنة في ذاكرة تخزين مؤقت واحدة محدّدة. استخدام هذه الميزة يمكن أن يجعل استعلاماتك أكثر كفاءة (لأنه لا يتعين على المتصفح سوى التحقق من داخل ذاكرة تخزين مؤقت واحدة، بدلاً من فحصها جميعًا) ويسمح لك باسترداد استجابة معينة لعنوان URL معين عندما قد تشتمل ذاكرات تخزين مؤقت متعددة على عنوان URL هذا كمفتاح. لن يكون للقاعدة cacheName أي تأثير إلا عند استخدامها مع CacheStorage.match()، وليس مع Cache.match()، لأنّ Cache.match() يعمل على وحدة تخزين واحدة باسم "نسخة مخزّنة مؤقتًا".

// The following are functionally equivalent:
caches.open('my-cache')
  .then(cache => cache.match('index.html'));

// or...
caches.match('index.html', {cacheName: 'my-cache'});

ignoreMethod وignoreVary

إنّ الترميزَين ignoreMethod وignoreVary أكثر تخصّصًا بعض الشيء من ignoreSearch وcacheName، ولكنهما يخدمان أغراضًا معيّنة.

تسمح لك ignoreMethod بتمرير عنصر Request يتضمن أي method (POST، PUT، وما إلى ذلك) كأول مَعلمة لـ match(). عادةً، لا يُسمح إلا بطلبات GET أو HEAD.

// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});

// This will never match anything.
caches.match(postRequest);

// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});

في حال ضبط السياسة على true، تعني السمة ignoreVary أنّه سيتم تنفيذ عمليات البحث في ذاكرة التخزين المؤقت بدون مراعاة أي عناوين Vary يتم ضبطها في الاستجابات المخزّنة مؤقتًا. وإذا كنت تعرف أنك لا تتعامل مع الردود المخزّنة مؤقتًا التي تستخدم العنوان Vary، فلا داعي للقلق بشأن تعيين هذا الخيار.

المتصفحات المتوافقة

"CacheQueryOptions" ليست مناسبة إلا في المتصفّحات التي تتوافق مع Cache Storage API. إلى جانب المتصفحات المستندة إلى Chrome وChromium، يقتصر ذلك حاليًا على Firefox، الذي يتوافق في الأصل مع CacheQueryOptions.

يمكن للمطوّرين الذين يريدون استخدام CacheQueryOptions في إصدارات Chrome السابقة للإصدار 54 الاستفادة من رمز polyfill المقدَّم من آرثر ستوليar.