عند تخزين مواد العرض أثناء التشغيل، لا تتوفّر قاعدة موحّدة تحدّد ما إذا كان الردّ معيّن هو "صالح" ومؤهّل للحفظ وإعادة الاستخدام.
توفّر وحدة 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) => {...}
-
config
CacheableResponseOptions اختياري
-
returns
-
-
isResponseCacheable
فراغ
تتحقّق من ردّ لمعرفة ما إذا كان يمكن تخزينه مؤقتًا أم لا، استنادًا إلى إعدادات هذا العنصر.
تبدو دالة
isResponseCacheable
كما يلي:(response: Response) => {...}
-
رد
الرد
يشير هذا المصطلح إلى الاستجابة التي يتم حفظ إمكانية تخزينها في ذاكرة التخزين المؤقت. تم وضع علامة فيه.
-
returns
منطقي
true
إذا كانResponse
قابلاً للتخزين المؤقت، وfalse
بخلاف ذلك
-
CacheableResponseOptions
أماكن إقامة
-
الرؤوس
العنصر اختياري
-
statuses
number[] اختياري
CacheableResponsePlugin
صف ينفّذ معاودة الاتصال لمراحل نشاط cacheWillUpdate
. هذا يجعل من
التي تتيح لك إضافة عمليات تحقّق من قابلية التخزين المؤقت إلى الطلبات التي يتم إجراؤها من خلال أداة Workbox
والاستراتيجيات.
أماكن إقامة
-
طريقة وضع التصميم
غير صالح
لإنشاء مثيل جديد من CacheableResponsePlugin، يجب تقديم على الأقل إحدى سمات
config
.في حال تحديد كل من
statuses
وheaders
، يجب استيفاء كلا الشرطين لكي يتم اعتبارResponse
قابلاً للتخزين المؤقت.تبدو دالة
constructor
كما يلي:(config: CacheableResponseOptions) => {...}
-
config
-
returns
-