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

Jeff Posnick

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

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

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

ignoreSearch

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

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، يعني ذلك أنّ عمليات البحث في ذاكرة التخزين المؤقت ستتم بدون مراعاة أي عناوين Vary تم ضبطها في الإجابات المخزّنة مؤقتًا.ignoreVary إذا كنت تعلم أنّك لا تتعامل مع استجابات محفوظة مؤقتًا تستخدم العنوان Vary، لا داعي للقلق بشأن ضبط هذا الخيار.

دعم المتصفح

لا يكون الخيار CacheQueryOptions متاحًا إلا في المتصفّحات التي تتيح استخدام واجهة برمجة التطبيقات Cache Storage API. بالإضافة إلى متصفّحات Chrome والمتصفحات المستندة إلى Chromium، يقتصر ذلك حاليًا على Firefox الذي يتيح استخدام CacheQueryOptions بشكلٍ تلقائي.

يمكن للمطوّرين الذين يريدون استخدام CacheQueryOptions في إصدارات Chrome الأقدم من 54 الاستفادة من مجموعة polyfill، وذلك بفضل آرثر ستولار.