Workbox-cacheable-response

عند تخزين مواد العرض في ذاكرة التخزين المؤقت في وقت التشغيل، لا تتوفّر قاعدة واحدة يناسب الجميع لتحديد ما إذا كانت الاستجابة المقدَّمة "صالحة" ومؤهّلة لحفظها وإعادة استخدامها.

توفّر وحدة workbox-cacheable-response طريقة معيارية لتحديد ما إذا كان يجب تخزين الرد مؤقتًا استنادًا إلى رمز الحالة الرقمي الخاص به أو إلى توفّر عنوان له قيمة معيّنة أو مزيج من الخيارين.

التخزين المؤقت استنادًا إلى رموز الحالة

يمكنك ضبط استراتيجية Workspace لاعتبار مجموعة من رموز الحالة مؤهَّلة للتخزين المؤقت من خلال إضافة مثيل CacheableResponsePlugin إلى معلَمة plugins للاستراتيجية:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) =>
    url.origin === 'https://third-party.example.com' &&
    url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

تُعلم هذه الإعدادات Workbox بأنّه عند معالجة الاستجابات للطلبات الواردة في https://third-party.example.com/images/، يتم تخزين أي طلبات مؤقتًا تتضمّن رمز الحالة 0 أو 200.

التخزين المؤقت استنادًا إلى العناوين

يمكنك إعداد استراتيجية صندوق العمل للتحقّق من توفّر قيم عناوين معيّنة كمعايير لإضافتها إلى ذاكرة التخزين المؤقت عن طريق ضبط الكائن headers عند إنشاء المكوِّن الإضافي:

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

عند معالجة الردود الخاصة بعناوين URL للطلبات التي تحتوي على /path/to/api/، ألق نظرة على العنوان المسمى X-Is-Cacheable (والذي سيضيفه الخادم إلى الاستجابة). إذا كان هذا العنوان موجودًا، وتم ضبطه على قيمة "صحيح"، يمكن تخزين الاستجابة مؤقتًا.

إذا تم تحديد عدة عناوين، يجب أن يتطابق رأس واحد فقط مع القيم المرتبطة.

التخزين المؤقت استنادًا إلى العناوين ورموز الحالة

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

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200, 404],
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

ما هي الإعدادات التلقائية؟

إذا كنت تستخدم إحدى الاستراتيجيات المضمّنة في Workbox بدون ضبط cacheableResponse.CacheableResponsePlugin بشكل صريح، سيتم استخدام المعايير التلقائية التالية لتحديد ما إذا كان يجب تخزين استجابة تم تلقّيها من الشبكة في ذاكرة التخزين المؤقت:

  • stale WhileReRequest وnetworkFirst: تُعتبر الردود التي تحمل الحالة 0 (أي استجابات مبهمة) أو 200 قابلة للتخزين المؤقت.
  • cacheFirst: تُعتبر الردود التي تحمل الحالة 200 قابلة للتخزين المؤقت.

لا يتم استخدام عناوين الاستجابة تلقائيًا لتحديد قابلية التخزين المؤقت.

ما سبب وجود إعدادات افتراضية مختلفة؟

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

وبالنسبة إلى الاستراتيجيات التي تتضمّن بعض الطرق لتحديث الاستجابة المخزَّنة مؤقتًا، مثل stal whileRe أغانٍ وnetworkFirst، يتم التخفيف من مخاطر تخزين استجابة خطأ عابرة بسبب أنّه في المرة القادمة التي يتم فيها تحديث ذاكرة التخزين المؤقت، نأمل أن يتم استخدام استجابة مناسبة وناجحة.

بالنسبة إلى الاستراتيجيات التي تتضمن التخزين المؤقت لأول استجابة تم تلقيها وإعادة استخدام تلك الاستجابة المخزّنة مؤقتًا إلى أجل غير مسمى، تكون تداعيات خطأ عابر للتخزين المؤقت وإعادة استخدامه أكثر شدّة. إذا كان هناك خطأ في الجانب الآمن بشكل تلقائي، سترفض cacheFirst حفظ الاستجابة ما لم تكن تحتوي على رمز الحالة 200.

الاستخدام المتقدّم

إذا كنت تريد استخدام منطق التخزين المؤقت نفسه خارج استراتيجية Workbox، يمكنك استخدام الفئة CacheableResponse مباشرةً.

import {CacheableResponse} from 'workbox-cacheable-response';

const cacheable = new CacheableResponse({
  statuses: [0, 200],
  headers: {
    'X-Is-Cacheable': 'true',
  },
});

const response = await fetch('/path/to/api');

if (cacheable.isResponseCacheable(response)) {
  const cache = await caches.open('api-cache');
  cache.put(response.url, response);
} else {
  // Do something when the response can't be cached.
}

الأنواع

CacheableResponse

تسمح لك هذه الفئة بإعداد قواعد تحدّد رموز الحالة و/أو العناوين التي يجب أن تتوفّر حتى يتم اعتبار Response قابلة للتخزين المؤقت.

أماكن إقامة

  • الدالة الإنشائية

    void

    لإنشاء مثيل CacheableResponse جديد، يجب توفير سمة واحدة على الأقل من سمات config.

    إذا تم تحديد كل من statuses وheaders، يجب استيفاء الشرطَين حتى تُعتبر Response قابلة للتخزين المؤقت.

    تبدو الدالة constructor على النحو التالي: 

    (config?: CacheableResponseOptions)=> {...}

  • isResponseCacheable

    void

    لفحص استجابة لمعرفة ما إذا كانت قابلة للتخزين المؤقت أم لا، استنادًا إلى إعدادات هذا الكائن.

    تبدو الدالة isResponseCacheable على النحو التالي: 

    (response: Response)=> {...}

    • رد

      الإجابة

      الرد الذي يتم التحقق من قابلية التخزين المؤقت.

    • returns

      boolean

      true إذا كان Response قابلاً للتخزين المؤقت، وfalse بخلاف ذلك.

CacheableResponseOptions

أماكن إقامة

  • headers

    الكائن اختياري

  • الحالات

    number[] اختيارية

CacheableResponsePlugin

صف ينفذ عملية معاودة الاتصال خلال دورة حياة cacheWillUpdate ويسهل هذا إضافة عمليات التحقق من قابلية التخزين المؤقت إلى الطلبات التي يتم إجراؤها من خلال استراتيجيات Workbox المدمجة.

أماكن إقامة

  • الدالة الإنشائية

    void

    لإنشاء مثيل CacheableResponsePlugin جديد، يجب توفير سمة واحدة على الأقل من سمات config.

    إذا تم تحديد كل من statuses وheaders، يجب استيفاء الشرطَين حتى تُعتبر Response قابلة للتخزين المؤقت.

    تبدو الدالة constructor على النحو التالي: 

    (config: CacheableResponseOptions)=> {...}