Workbox-cacheable-response

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

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

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

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

  • instale whileReVerifyate and networkFirst: ردود تتضمّن الحالة 0 (أي ردود غير واضحة) أو 200 يمكن اعتبارها قابلة للتخزين المؤقت.
  • cacheFirst: إنّ الاستجابات التي تحمل الحالة 200 تُعتبر قابلة للتخزين المؤقت.

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

لماذا هناك إعدادات تلقائية مختلفة؟

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

وبالنسبة إلى الاستراتيجيات التي تتضمن بعض وسائل تحديث الاستجابة المخزّنة مؤقتًا، مثل stale whileRe validate و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 قابلاً للتخزين المؤقت.

أماكن إقامة

  • طريقة وضع التصميم

    فراغ

    لإنشاء مثيل cacheableResponse جديد، يجب تقديم ما لا يقل عن إحدى سمات config.

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

    تبدو دالة constructor كما يلي: 

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

  • isResponseCacheable

    فراغ

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

    تبدو دالة isResponseCacheable كما يلي: 

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

    • رد

      الرد

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

    • returns

      منطقي

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

CacheableResponseOptions

أماكن إقامة

  • الرؤوس

    العنصر اختياري

  • statuses

    number[] اختياري

CacheableResponsePlugin

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

أماكن إقامة

  • طريقة وضع التصميم

    غير صالح

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

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

    تبدو دالة constructor كما يلي: 

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