عندما تم تقديم عمال الخدمة لأول مرة، ظهرت مجموعة من استراتيجيات التخزين المؤقت الشائعة. استراتيجية التخزين المؤقت هي نمط يحدّد الطريقة التي ينشئ بها مشغّل الخدمات استجابة بعد تلقّي حدث استرجاع.
توفّر "workbox-strategies
" استراتيجيات التخزين المؤقت الأكثر شيوعًا، ما يسهّل
تطبيقها على مشغّل الخدمات.
لن ندخل في تفاصيل كثيرة خارج نطاق الاستراتيجيات التي يدعمها Workbox، ولكن يمكنك معرفة المزيد في كتاب الطبخ بلا إنترنت.
استخدام الاستراتيجيات
في الأمثلة التالية، سنوضّح لك كيفية استخدام استراتيجيات التخزين المؤقت في Workbox مع workbox-routing
. هناك بعض الخيارات التي يمكنك تحديدها مع كل استراتيجية يتم تناولها في قسم "إعداد الاستراتيجيات" في هذا المستند.
في قسم الاستخدام المتقدم، سنتناول كيفية استخدام استراتيجيات التخزين المؤقت مباشرةً بدون workbox-routing
.
إعادة التحقق من الصحة القديمة
يتيح لك نمط Stal- While-re تقدمها إمكانية الردّ على الطلب في أسرع وقت ممكن من خلال استخدام استجابة مخزّنة مؤقتًا إن أمكن، والعودة إلى طلب الشبكة إذا لم يكن مخزَّنًا مؤقتًا. ثم يتم استخدام طلب الشبكة لتحديث ذاكرة التخزين المؤقت. وعلى عكس بعض عمليات التنفيذ التي تتطلب إعادة التحقق من الصحة القديمة، ستعمل هذه الاستراتيجية دائمًا على تقديم طلب إعادة التحقق، بغض النظر عن عمر الاستجابة المخزَّنة مؤقتًا.
هذه استراتيجية شائعة إلى حد ما حيث لا يكون توفُّر أحدث الموارد ضروريًا للتطبيق.
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/images/avatars/'),
new StaleWhileRevalidate()
);
ذاكرة التخزين المؤقت أولاً (ذاكرة التخزين المؤقت رجوع إلى الشبكة)
وستعتمد تطبيقات الويب بلا إنترنت بشكل كبير على ذاكرة التخزين المؤقت، ولكن بالنسبة إلى الأصول غير الضرورية والتي يمكن تخزينها مؤقتًا بشكل تدريجي، فإن التخزين المؤقت أولاً هو الخيار الأفضل.
إذا كانت هناك استجابة في ذاكرة التخزين المؤقت، فسيتم تنفيذ الطلب باستخدام الاستجابة المخزنة مؤقتًا ولن يتم استخدام الشبكة على الإطلاق. وإذا لم تكن هناك استجابة مخزّنة مؤقتًا، سيتم تنفيذ الطلب من خلال طلب الشبكة وسيتم تخزين الاستجابة مؤقتًا بحيث يتم عرض الطلب التالي مباشرةً من ذاكرة التخزين المؤقت.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(({request}) => request.destination === 'style', new CacheFirst());
الشبكة أولاً (إعادة الشبكة إلى ذاكرة التخزين المؤقت)
بالنسبة إلى الطلبات التي يتم تعديلها بشكل متكرر، تكون استراتيجية الشبكة أولاً هي الحل المثالي. وسيحاول تلقائيًا جلب أحدث رد من الشبكة. إذا كان الطلب ناجحًا، فسيتم وضع الاستجابة في ذاكرة التخزين المؤقت. وإذا تعذّر على الشبكة عرض استجابة، سيتم استخدام الاستجابة المخزَّنة مؤقتًا.
import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/social-timeline/'),
new NetworkFirst()
);
الشبكة فقط
إذا كنت بحاجة إلى تنفيذ طلبات معيّنة من الشبكة، عليك استخدام الشبكة فقط.
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());
ذاكرة التخزين المؤقت فقط
وتضمن استراتيجية التخزين المؤقت فقط الحصول على الردود من ذاكرة التخزين المؤقت. يعد هذا أقل شيوعًا في مربع العمل، ولكن يمكن أن يكون مفيدًا إذا كانت لديك خطوة تخزين مسبق خاصة بك.
import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());
تكوين الإستراتيجيات
تتيح لك جميع الاستراتيجيات ضبط ما يلي:
- اسم ذاكرة التخزين المؤقت المراد استخدامها في الإستراتيجية.
- قيود انتهاء صلاحية ذاكرة التخزين المؤقت للاستخدام في الاستراتيجية.
- مجموعة من المكوّنات الإضافية التي سيتم استدعاء طرق مراحل نشاطها لها عند جلب طلب وتخزينه مؤقتًا.
تغيير ذاكرة التخزين المؤقت المستخدمة من خلال استراتيجية
يمكنك تغيير استراتيجية ذاكرة التخزين المؤقت المستخدمة من خلال توفير اسم ذاكرة تخزين مؤقت. ويكون هذا مفيدًا إذا كنت تريد فصل الأصول للمساعدة في تصحيح الأخطاء.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
})
);
استخدام المكوّنات الإضافية
يتضمّن Workbox مجموعة من المكوّنات الإضافية التي يمكن استخدامها مع هذه الاستراتيجيات.
- workbox-background-sync
- workbox-broadcast-update
- workbox-cacheable-response
- workbox-expiration
- workbox-range-requests
لاستخدام أي من هذه المكوّنات الإضافية (أو مكوّن إضافي مخصّص)، ما عليك سوى تمرير
مثيلات إلى الخيار plugins
.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
// Only cache requests for a week
maxAgeSeconds: 7 * 24 * 60 * 60,
// Only cache 10 requests.
maxEntries: 10,
}),
],
})
);
الاستراتيجيات المخصّصة
بالإضافة إلى ضبط الاستراتيجيات، يسمح لك Workbox بإنشاء استراتيجياتك المخصّصة.
ويمكن إجراء ذلك من خلال استيراد الفئة الأساسية Strategy
وتوسيع نطاقها من workbox-strategies
:
import {Strategy} from 'workbox-strategies';
class NewStrategy extends Strategy {
_handle(request, handler) {
// Define handling logic here
}
}
في هذا المثال، يتم استخدام handle()
كاستراتيجية طلب لتحديد منطق معالجة محدد. هناك استراتيجيتان للطلب يمكن استخدامهما:
handle()
: نفِّذ استراتيجية طلب وعرض عنصرPromise
يمكن حلّه باستخدامResponse
، واستدعاء جميع طلبات معاودة الاتصال للمكوّنات الإضافية ذات الصلة.handleAll()
: يشبهhandle()
، ولكنه يعرض كائنPromise
. الطريقة الأولى مكافئة لما تعرضهhandle()
والثانية سيتم التعامل معها عند اكتمال الوعود التي تمت إضافتها إلىevent.waitUntil()
ضمن الاستراتيجية.
يتم استدعاء كلتا استراتيجيتَي الطلب من خلال مَعلمتَين:
request
: السمةRequest
التي ستعرض الاستراتيجية ردًّا عليها.handler
: مثيلStrategyHandler
يتم إنشاؤه تلقائيًا للاستراتيجية الحالية.
إنشاء استراتيجية جديدة
في ما يلي مثال على استراتيجية جديدة تُعيد تطبيق سلوك "NetworkOnly
":
class NewNetworkOnlyStrategy extends Strategy {
_handle(request, handler) {
return handler.fetch(request);
}
}
لاحظ كيف يتم استدعاء handler.fetch()
بدلاً من طريقة fetch
الأصلية. توفر الفئة StrategyHandler
عددًا من إجراءات الاسترجاع وذاكرة التخزين المؤقت التي يمكن استخدامها عند استخدام handle()
أو handleAll()
:
fetch
: يجلب طلبًا معيّنًا ويستدعي طرق مراحل نشاط المكوّن الإضافيrequestWillFetch()
وfetchDidSucceed()
وfetchDidFail()
cacheMatch
: يطابق طلبًا من ذاكرة التخزين المؤقت، ويستدعي طريقتَي دورة حياة المكوّن الإضافيcacheKeyWillBeUsed()
وcachedResponseWillBeUsed()
.cachePut
: وضع زوج طلب/استجابة في ذاكرة التخزين المؤقت واستدعاء طرق مراحل دورة حياة المكوّن الإضافيcacheKeyWillBeUsed()
وcacheWillUpdate()
وcacheDidUpdate()
fetchAndCachePut
: يستدعي الرقمfetch()
ويشغِّلcachePut()
في الخلفية على الردّ الذي أنشأهfetch()
.hasCallback
: للحصول على معاودة الاتصال كإدخال وعرض قيمة "صحيح" إذا كانت الإستراتيجية تحتوي على مكون إضافي واحد على الأقل مع معاودة الاتصال المحددة.runCallbacks
: تؤدي هذه السمة إلى تشغيل جميع استدعاءات المكوّنات الإضافية التي تطابق اسم معيّن، من خلال تمرير كائن مَعلمة معيّن (تم دمجه مع حالة المكوّن الإضافي الحالية) كوسيطة الوحيدة.iterateCallbacks
: تقبل معاودة الاتصال وعرض تكرار قابل للتكرار لاستدعاءات مكونات إضافية مطابقة، حيث يتم لف كل استدعاء بحالة المعالج الحالي (أي عند استدعاء كل استدعاء، سيتم دمج أي معلمة تمررها من كائن مع الحالة الحالية للمكوّن الإضافي).waitUntil
: يضيف هذا الحقل وعودًا بتمديد فترة صلاحية الحدث المرتبط بالطلب الذي تتم معالجته (عادةً ما تكونFetchEvent
).doneWaiting
: يتم عرض وعد يتم حله بعد إقرار جميع الوعود التي تم تمريرها إلى "waitUntil()
".destroy
: يتم إيقاف الاستراتيجية ويتم على الفور حلّ أي وعود في انتظار المراجعة من "waitUntil()
".
استراتيجية سباق مخصّصة لذاكرة التخزين المؤقت للشبكة
يستند المثال التالي إلى cache-network-race من دليل الطهي بلا إنترنت (الذي لا يوفره Workbox)، ولكنه يذهب إلى أبعد من ذلك ويتم دائمًا تحديث ذاكرة التخزين المؤقت بعد طلب ناجح من الشبكة. هذا في مثال على استراتيجية أكثر تعقيدًا تستخدم إجراءات متعددة.
import {Strategy} from 'workbox-strategies';
class CacheNetworkRace extends Strategy {
_handle(request, handler) {
const fetchAndCachePutDone = handler.fetchAndCachePut(request);
const cacheMatchDone = handler.cacheMatch(request);
return new Promise((resolve, reject) => {
fetchAndCachePutDone.then(resolve);
cacheMatchDone.then(response => response && resolve(response));
// Reject if both network and cache error or find no response.
Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
results => {
const [fetchAndCachePutResult, cacheMatchResult] = results;
if (
fetchAndCachePutResult.status === 'rejected' &&
!cacheMatchResult.value
) {
reject(fetchAndCachePutResult.reason);
}
}
);
});
}
}
الاستخدام المتقدّم
إذا كنت تريد استخدام الاستراتيجيات في منطق استرجاعك الخاص للأحداث، يمكنك استخدام فئات الاستراتيجيات لتنفيذ طلب من خلال استراتيجية محدّدة.
على سبيل المثال، لاستخدام استراتيجية "القديمة أثناء إعادة التحقق"، يمكنك إجراء ما يلي:
self.addEventListener('fetch', event => {
const {request} = event;
const url = new URL(request.url);
if (url.origin === location.origin && url.pathname === '/') {
event.respondWith(new StaleWhileRevalidate().handle({event, request}));
}
});
يمكنك العثور على قائمة بالصفوف المتاحة في المستندات المرجعية لاستراتيجيات إطار العمل.
الأنواع
CacheFirst
تنفيذ استراتيجية طلب التخزين المؤقت أولاً.
إنّ استخدام استراتيجية "ذاكرة التخزين المؤقت أولاً" مفيد لمواد العرض التي تمت مراجعتها،
مثل عناوين URL مثل /styles/example.a8f5f1.css
، لأنّه يمكن تخزينها مؤقتًا لفترات زمنية طويلة.
إذا تعذّر طلب الشبكة ولم يكن هناك أي تطابق في ذاكرة التخزين المؤقت، سيؤدي ذلك إلى إنشاء
استثناء WorkboxError
.
أماكن إقامة
-
الدالة الإنشائية
void
تنشئ مثيلاً جديدًا للاستراتيجية وتعيّن جميع خصائص الخيارات الموثقة كخصائص مثيلات عامة.
ملاحظة: إذا كانت فئة الاستراتيجية المخصّصة توسّع فئة الاستراتيجية الأساسية ولا تحتاج إلى أكثر من هذه الخصائص، لن تحتاج إلى تعريف دالة الإنشاء الخاصة بها.
تبدو الدالة
constructor
على النحو التالي:(options?: StrategyOptions) => {...}
-
الخيارات
StrategyOptions اختيارية
-
returns
-
-
cacheName
سلسلة
-
fetchOptions
RequestInit اختياري
-
matchOptions
CacheQueryOptions اختياري
-
مكونات إضافية
-
_aانتظار الإكمال
void
تبدو الدالة
_awaitComplete
على النحو التالي:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
وعد<الرد>
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
تبدو الدالة
_getResponse
على النحو التالي:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
وعد<الرد>
-
-
اسم الحساب
void
نفِّذ استراتيجية طلب وعرض علامة
Promise
التي ستتم معالجتها باستخدام عنصرResponse
، ما يؤدي إلى استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.عند تسجيل مثيل استراتيجية في Workbox
workbox-routing.Route
، يتم استدعاء هذه الطريقة تلقائيًا عندما يتطابق المسار.ويمكن أيضًا استخدام هذه الطريقة في مستمع
FetchEvent
مستقل من خلال تمريرها إلىevent.respondWith()
.تبدو الدالة
handle
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
وعد<الرد>
-
-
handleAll
void
على غرار
workbox-strategies.Strategy~handle
، ولكن بدلاً من عرض عنصرPromise
يؤدّي إلىResponse
، فإنّه سيعرض مجموعة من الوعود[response, done]
، حيث تساوي القيمة الأولى (response
) ما يعرضهhandle()
، والثاني عبارة عن وعد سيتم حله بعد اكتمال أي وعود تمت إضافتها إلىevent.waitUntil()
كجزء من تنفيذ الاستراتيجية.يمكنك انتظار وعود "
done
" لضمان اكتمال أي جهد إضافي تؤديه الاستراتيجية (عادةً ما يتم تخزين الردود في ذاكرة التخزين المؤقت).تبدو الدالة
handleAll
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
[Promise<Response>, Promise<void>]
يَعد صف [Response, Done] الذي يمكن استخدامه لتحديد وقت حل الاستجابة وكذلك الوقت الذي أكمل فيه المعالج جميع عمله.
-
CacheOnly
تنفيذ استراتيجية طلب ذاكرة التخزين المؤقت فقط.
هذه الفئة مفيدة إذا كنت تريد الاستفادة من أيٍ من مكونات Workspace الإضافية.
إذا لم يكن هناك أي تطابق في ذاكرة التخزين المؤقت، سيؤدي ذلك إلى إنشاء استثناء WorkboxError
.
أماكن إقامة
-
الدالة الإنشائية
void
تنشئ مثيلاً جديدًا للاستراتيجية وتعيّن جميع خصائص الخيارات الموثقة كخصائص مثيلات عامة.
ملاحظة: إذا كانت فئة الاستراتيجية المخصّصة توسّع فئة الاستراتيجية الأساسية ولا تحتاج إلى أكثر من هذه الخصائص، لن تحتاج إلى تعريف دالة الإنشاء الخاصة بها.
تبدو الدالة
constructor
على النحو التالي:(options?: StrategyOptions) => {...}
-
الخيارات
StrategyOptions اختيارية
-
returns
-
-
cacheName
سلسلة
-
fetchOptions
RequestInit اختياري
-
matchOptions
CacheQueryOptions اختياري
-
المكوّنات الإضافية
-
_aانتظار الإكمال
void
تبدو الدالة
_awaitComplete
على النحو التالي:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
وعد<الرد>
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
تبدو الدالة
_getResponse
على النحو التالي:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
وعد<الرد>
-
-
اسم الحساب
void
نفِّذ استراتيجية طلب وعرض علامة
Promise
التي ستتم معالجتها باستخدام عنصرResponse
، ما يؤدي إلى استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.عند تسجيل مثيل استراتيجية في Workbox
workbox-routing.Route
، يتم استدعاء هذه الطريقة تلقائيًا عندما يتطابق المسار.ويمكن أيضًا استخدام هذه الطريقة في مستمع
FetchEvent
مستقل من خلال تمريرها إلىevent.respondWith()
.تبدو الدالة
handle
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
وعد<الرد>
-
-
handleAll
void
على غرار
workbox-strategies.Strategy~handle
، ولكن بدلاً من عرض عنصرPromise
يؤدّي إلىResponse
، فإنّه سيعرض مجموعة من الوعود[response, done]
، حيث تساوي القيمة الأولى (response
) ما يعرضهhandle()
، والثاني عبارة عن وعد سيتم حله بعد اكتمال أي وعود تمت إضافتها إلىevent.waitUntil()
كجزء من تنفيذ الاستراتيجية.يمكنك انتظار وعود "
done
" لضمان اكتمال أي جهد إضافي تؤديه الاستراتيجية (عادةً ما يتم تخزين الردود في ذاكرة التخزين المؤقت).تبدو الدالة
handleAll
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
[Promise<Response>, Promise<void>]
يَعد صف [Response, Done] الذي يمكن استخدامه لتحديد وقت حل الاستجابة وكذلك الوقت الذي أكمل فيه المعالج جميع عمله.
-
NetworkFirst
تنفيذ استراتيجية طلب الشبكة أولاً.
بشكل تلقائي، ستعمل هذه الاستراتيجية على تخزين الردود التي تتضمّن رمز حالة 200 مؤقتًا، بالإضافة إلى الردود المبهمة. والردود المعتمة هي طلبات من مصادر متعددة لا تتيح فيها الاستجابة CORS.
إذا تعذّر طلب الشبكة ولم يكن هناك أي تطابق في ذاكرة التخزين المؤقت، سيؤدي ذلك إلى إنشاء
استثناء WorkboxError
.
أماكن إقامة
-
الدالة الإنشائية
void
تبدو الدالة
constructor
على النحو التالي:(options?: NetworkFirstOptions) => {...}
-
الخيارات
NetworkFirstOptions اختيارية
-
returns
-
-
cacheName
سلسلة
-
fetchOptions
RequestInit اختياري
-
matchOptions
CacheQueryOptions اختياري
-
مكونات إضافية
-
_aانتظار الإكمال
void
تبدو الدالة
_awaitComplete
على النحو التالي:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
وعد<الرد>
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
تبدو الدالة
_getResponse
على النحو التالي:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
وعد<الرد>
-
-
اسم الحساب
void
نفِّذ استراتيجية طلب وعرض علامة
Promise
التي ستتم معالجتها باستخدام عنصرResponse
، ما يؤدي إلى استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.عند تسجيل مثيل استراتيجية في Workbox
workbox-routing.Route
، يتم استدعاء هذه الطريقة تلقائيًا عندما يتطابق المسار.ويمكن أيضًا استخدام هذه الطريقة في مستمع
FetchEvent
مستقل من خلال تمريرها إلىevent.respondWith()
.تبدو الدالة
handle
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
وعد<الرد>
-
-
handleAll
void
على غرار
workbox-strategies.Strategy~handle
، ولكن بدلاً من عرض عنصرPromise
يؤدّي إلىResponse
، فإنّه سيعرض مجموعة من الوعود[response, done]
، حيث تساوي القيمة الأولى (response
) ما يعرضهhandle()
، والثاني عبارة عن وعد سيتم حله بعد اكتمال أي وعود تمت إضافتها إلىevent.waitUntil()
كجزء من تنفيذ الاستراتيجية.يمكنك انتظار وعود "
done
" لضمان اكتمال أي جهد إضافي تؤديه الاستراتيجية (عادةً ما يتم تخزين الردود في ذاكرة التخزين المؤقت).تبدو الدالة
handleAll
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
[Promise<Response>, Promise<void>]
يَعد صف [Response, Done] الذي يمكن استخدامه لتحديد وقت حل الاستجابة وكذلك الوقت الذي أكمل فيه المعالج جميع عمله.
-
NetworkFirstOptions
أماكن إقامة
-
cacheName
سلسلة اختيارية
-
fetchOptions
RequestInit اختياري
-
matchOptions
CacheQueryOptions اختياري
-
networkTimeoutSeconds
الرقم اختياري
-
المكوّنات الإضافية
WorkboxPlugin[] اختيارية
NetworkOnly
تنفيذ استراتيجية طلبات للشبكة فقط.
هذه الفئة مفيدة إذا كنت تريد الاستفادة من أيٍ من مكونات Workspace الإضافية.
إذا تعذّر طلب الشبكة، سيؤدي ذلك إلى إنشاء استثناء WorkboxError
.
أماكن إقامة
-
الدالة الإنشائية
void
تبدو الدالة
constructor
على النحو التالي:(options?: NetworkOnlyOptions) => {...}
-
الخيارات
NetworkOnlyOptions اختيارية
-
returns
-
-
cacheName
سلسلة
-
fetchOptions
RequestInit اختياري
-
matchOptions
CacheQueryOptions اختياري
-
مكونات إضافية
-
_aانتظار الإكمال
void
تبدو الدالة
_awaitComplete
على النحو التالي:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
وعد<الرد>
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
تبدو الدالة
_getResponse
على النحو التالي:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
وعد<الرد>
-
-
اسم الحساب
void
نفِّذ استراتيجية طلب وعرض علامة
Promise
التي ستتم معالجتها باستخدام عنصرResponse
، ما يؤدي إلى استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.عند تسجيل مثيل استراتيجية في Workbox
workbox-routing.Route
، يتم استدعاء هذه الطريقة تلقائيًا عندما يتطابق المسار.ويمكن أيضًا استخدام هذه الطريقة في مستمع
FetchEvent
مستقل من خلال تمريرها إلىevent.respondWith()
.تبدو الدالة
handle
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
وعد<الرد>
-
-
handleAll
void
على غرار
workbox-strategies.Strategy~handle
، ولكن بدلاً من عرض عنصرPromise
يؤدّي إلىResponse
، فإنّه سيعرض مجموعة من الوعود[response, done]
، حيث تساوي القيمة الأولى (response
) ما يعرضهhandle()
، والثاني عبارة عن وعد سيتم حله بعد اكتمال أي وعود تمت إضافتها إلىevent.waitUntil()
كجزء من تنفيذ الاستراتيجية.يمكنك انتظار وعود "
done
" لضمان اكتمال أي جهد إضافي تؤديه الاستراتيجية (عادةً ما يتم تخزين الردود في ذاكرة التخزين المؤقت).تبدو الدالة
handleAll
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
[Promise<Response>, Promise<void>]
يَعد صف [Response, Done] الذي يمكن استخدامه لتحديد وقت حل الاستجابة وكذلك الوقت الذي أكمل فيه المعالج جميع عمله.
-
NetworkOnlyOptions
أماكن إقامة
-
fetchOptions
RequestInit اختياري
-
networkTimeoutSeconds
الرقم اختياري
-
مكونات إضافية
WorkboxPlugin[] اختيارية
StaleWhileRevalidate
تنفيذ استراتيجية طلب قديم أثناء إعادة التحقق.
ويتم طلب الموارد من كل من ذاكرة التخزين المؤقت والشبكة على التوازي. وستستجيب الاستراتيجية بالنسخة المخزنة مؤقتًا إن توفرت، وإلا فانتظر استجابة الشبكة. يتم تحديث ذاكرة التخزين المؤقت باستجابة الشبكة مع كل طلب ناجح.
بشكل تلقائي، ستعمل هذه الاستراتيجية على تخزين الردود التي تتضمّن رمز حالة 200 مؤقتًا، بالإضافة إلى الردود المبهمة. والردود المعتمة هي طلبات من مصادر متعددة لا تتيح فيها الاستجابة CORS.
إذا تعذّر طلب الشبكة ولم يكن هناك أي تطابق في ذاكرة التخزين المؤقت، سيؤدي ذلك إلى إنشاء
استثناء WorkboxError
.
أماكن إقامة
-
الدالة الإنشائية
void
تبدو الدالة
constructor
على النحو التالي:(options?: StrategyOptions) => {...}
-
الخيارات
StrategyOptions اختيارية
-
returns
-
-
cacheName
سلسلة
-
fetchOptions
RequestInit اختياري
-
matchOptions
CacheQueryOptions اختياري
-
مكونات إضافية
-
_aانتظار الإكمال
void
تبدو الدالة
_awaitComplete
على النحو التالي:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
وعد<الرد>
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
تبدو الدالة
_getResponse
على النحو التالي:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
وعد<الرد>
-
-
اسم الحساب
void
نفِّذ استراتيجية طلب وعرض علامة
Promise
التي ستتم معالجتها باستخدام عنصرResponse
، ما يؤدي إلى استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.عند تسجيل مثيل استراتيجية في Workbox
workbox-routing.Route
، يتم استدعاء هذه الطريقة تلقائيًا عندما يتطابق المسار.ويمكن أيضًا استخدام هذه الطريقة في مستمع
FetchEvent
مستقل من خلال تمريرها إلىevent.respondWith()
.تبدو الدالة
handle
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
وعد<الرد>
-
-
handleAll
void
على غرار
workbox-strategies.Strategy~handle
، ولكن بدلاً من عرض عنصرPromise
يؤدّي إلىResponse
، فإنّه سيعرض مجموعة من الوعود[response, done]
، حيث تساوي القيمة الأولى (response
) ما يعرضهhandle()
، والثاني عبارة عن وعد سيتم حله بعد اكتمال أي وعود تمت إضافتها إلىevent.waitUntil()
كجزء من تنفيذ الاستراتيجية.يمكنك انتظار وعود "
done
" لضمان اكتمال أي جهد إضافي تؤديه الاستراتيجية (عادةً ما يتم تخزين الردود في ذاكرة التخزين المؤقت).تبدو الدالة
handleAll
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
[Promise<Response>, Promise<void>]
يَعد صف [Response, Done] الذي يمكن استخدامه لتحديد وقت حل الاستجابة وكذلك الوقت الذي أكمل فيه المعالج جميع عمله.
-
Strategy
فئة أساسية مختصرة يجب أن تشملها جميع فئات الاستراتيجيات الأخرى:
أماكن إقامة
-
الدالة الإنشائية
void
تنشئ مثيلاً جديدًا للاستراتيجية وتعيّن جميع خصائص الخيارات الموثقة كخصائص مثيلات عامة.
ملاحظة: إذا كانت فئة الاستراتيجية المخصّصة توسّع فئة الاستراتيجية الأساسية ولا تحتاج إلى أكثر من هذه الخصائص، لن تحتاج إلى تعريف دالة الإنشاء الخاصة بها.
تبدو الدالة
constructor
على النحو التالي:(options?: StrategyOptions) => {...}
-
الخيارات
StrategyOptions اختيارية
-
returns
-
-
cacheName
سلسلة
-
fetchOptions
RequestInit اختياري
-
matchOptions
CacheQueryOptions اختياري
-
مكونات إضافية
-
_aانتظار الإكمال
void
تبدو الدالة
_awaitComplete
على النحو التالي:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
وعد<الرد>
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
تبدو الدالة
_getResponse
على النحو التالي:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
وعد<الرد>
-
-
_الاسم_المعرِّف
void
تبدو الدالة
_handle
على النحو التالي:(request: Request, handler: StrategyHandler) => {...}
-
طلب
الطلب
-
المعالج
-
returns
وعد<الرد>
-
-
اسم الحساب
void
نفِّذ استراتيجية طلب وعرض علامة
Promise
التي ستتم معالجتها باستخدام عنصرResponse
، ما يؤدي إلى استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.عند تسجيل مثيل استراتيجية في Workbox
workbox-routing.Route
، يتم استدعاء هذه الطريقة تلقائيًا عندما يتطابق المسار.ويمكن أيضًا استخدام هذه الطريقة في مستمع
FetchEvent
مستقل من خلال تمريرها إلىevent.respondWith()
.تبدو الدالة
handle
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
وعد<الرد>
-
-
handleAll
void
على غرار
workbox-strategies.Strategy~handle
، ولكن بدلاً من عرض عنصرPromise
يؤدّي إلىResponse
، فإنّه سيعرض مجموعة من الوعود[response, done]
، حيث تساوي القيمة الأولى (response
) ما يعرضهhandle()
، والثاني عبارة عن وعد سيتم حله بعد اكتمال أي وعود تمت إضافتها إلىevent.waitUntil()
كجزء من تنفيذ الاستراتيجية.يمكنك انتظار وعود "
done
" لضمان اكتمال أي جهد إضافي تؤديه الاستراتيجية (عادةً ما يتم تخزين الردود في ذاكرة التخزين المؤقت).تبدو الدالة
handleAll
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
[Promise<Response>, Promise<void>]
يَعد صف [Response, Done] الذي يمكن استخدامه لتحديد وقت حل الاستجابة وكذلك الوقت الذي أكمل فيه المعالج جميع عمله.
-
StrategyHandler
فئة يتم إنشاؤها في كل مرة يستدعي فيها مثيل الاستراتيجية workbox-strategies.Strategy~handle
أو
workbox-strategies.Strategy~handleAll
التي تلفّ جميع إجراءات الجلب والتخزين المؤقت حول عمليات استدعاء المكوّن الإضافي وتتتبّع وقت "اكتمال" الاستراتيجية (أي أنّه تم حلّ جميع وعود event.waitUntil()
المُضافة).
أماكن إقامة
-
الدالة الإنشائية
void
ينشئ مثيلاً جديدًا مرتبطًا بالاستراتيجية التي تم تمريرها والحدث الذي يعالج الطلب.
تقوم الدالة الإنشائية أيضًا بتهيئة الحالة التي سيتم تمريرها إلى كل من المكوّنات الإضافية التي تعالج هذا الطلب.
تبدو الدالة
constructor
على النحو التالي:(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
الألعاب الاستراتيجية
-
الخيارات
-
returns
-
-
event
ExtendableEvent
-
params
أي اختياري
-
طلب
الطلب
-
url
عنوان URL اختياري
-
cacheMatch
void
يطابق طلبًا من ذاكرة التخزين المؤقت (ويستدعي أي طرق استدعاء سارية للمكوّن الإضافي) باستخدام
cacheName
وmatchOptions
وplugins
المحدد في كائن الإستراتيجية.يتم استدعاء طرق مراحل نشاط المكوّنات الإضافية التالية عند استخدام هذه الطريقة:
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
تبدو الدالة
cacheMatch
على النحو التالي:(key: RequestInfo) => {...}
-
مفتاح
RequestInfo
الطلب أو عنوان URL المراد استخدامه كمفتاح ذاكرة التخزين المؤقت.
-
returns
وعد<الرد>
الردّ المطابق في حال العثور عليه
-
cachePut
void
تعمل هذه السياسة على وضع زوج طلب/استجابة في ذاكرة التخزين المؤقت (واستدعاء أيّ طرق قابلة للتطبيق لمعاودة الاتصال بالمكوّن الإضافي) باستخدام
cacheName
وplugins
المحدّدَين في كائن الاستراتيجية.يتم استدعاء طرق مراحل نشاط المكوّنات الإضافية التالية عند استخدام هذه الطريقة:
- cacheKeyWillByUsed()
- cacheWillUpdate()
- cacheDidUpdate()
تبدو الدالة
cachePut
على النحو التالي:(key: RequestInfo, response: Response) => {...}
-
مفتاح
RequestInfo
الطلب أو عنوان URL المراد استخدامه كمفتاح ذاكرة التخزين المؤقت.
-
رد
الإجابة
الاستجابة لذاكرة التخزين المؤقت.
-
returns
Promise<boolean>
false
إذا تسببت cacheWillUpdate في عدم تخزين الاستجابة مؤقتًا، وtrue
بخلاف ذلك.
-
destroy
void
يتم إيقاف تنفيذ الاستراتيجية وحلّ أي وعود
waitUntil()
معلّقة.تبدو الدالة
destroy
على النحو التالي:() => {...}
-
doneWaiting
void
عرض وعد يتم حله بعد إقرار جميع الوعود بـ
workbox-strategies.StrategyHandler~waitUntil
.ملاحظة: أي عمل يتم تنفيذه بعد تسوية
doneWaiting()
يجب تمريره يدويًا إلى طريقةwaitUntil()
الخاصة بالحدث (وليس طريقةwaitUntil()
لهذا المعالج)، وإلا سيتم إنهاء سلسلة محادثات مشغّل الخدمة قبل اكتمال العمل.تبدو الدالة
doneWaiting
على النحو التالي:() => {...}
-
returns
Promise<void>
-
-
fetch
void
يجلب طلبًا معينًا (ويستدعي أي طرق معاودة اتصال للمكوّن الإضافي) باستخدام
fetchOptions
(لطلبات عدم التنقل) وplugins
المحدد في الكائنStrategy
.يتم استدعاء طرق مراحل نشاط المكوّنات الإضافية التالية عند استخدام هذه الطريقة:
requestWillFetch()
fetchDidSucceed()
fetchDidFail()
تبدو الدالة
fetch
على النحو التالي:(input: RequestInfo) => {...}
-
مصدر الإدخال
RequestInfo
عنوان URL أو طلب الاسترجاع
-
returns
وعد<الرد>
-
fetchAndCachePut
void
تؤدي الطلبات
this.fetch()
و (في الخلفية) إلى تشغيلthis.cachePut()
على الاستجابة التي أنشأهاthis.fetch()
.يستدعي استدعاء
this.cachePut()
تلقائيًاthis.waitUntil()
، لذا لن تحتاج إلى استدعاءwaitUntil()
يدويًا في الحدث.تبدو الدالة
fetchAndCachePut
على النحو التالي:(input: RequestInfo) => {...}
-
مصدر الإدخال
RequestInfo
الطلب أو عنوان URL المطلوب استرجاعه وتخزينه مؤقتًا.
-
returns
وعد<الرد>
-
-
getCacheKey
void
يفحص قائمة المكوّنات الإضافية الخاصة بمعاودة الاتصال
cacheKeyWillBeUsed
وينفّذ أيًا من عمليات معاودة الاتصال هذه التي تم العثور عليها في التسلسل. يتم التعامل مع الكائنRequest
الأخير الذي يعرضه المكوّن الإضافي الأخير باعتباره مفتاح ذاكرة التخزين المؤقت لقراءات ذاكرة التخزين المؤقت و/أو عمليات كتابتها. إذا لم يتم تسجيل أي استدعاءات للمكوّن الإضافيcacheKeyWillBeUsed
، يتم عرض الطلب الذي تم تمريره بدون تعديلتبدو الدالة
getCacheKey
على النحو التالي:(request: Request, mode: "read"
| "write"
) => {...}-
طلب
الطلب
-
الوضع
"read"
| "الكتابة"
-
returns
تقديم وعد<الطلب>
-
-
hasCallback
void
تعرض true إذا كانت الإستراتيجية تحتوي على مكون إضافي واحد على الأقل مع معاودة الاتصال المحددة.
تبدو الدالة
hasCallback
على النحو التالي:(name: C) => {...}
-
اسم
C
اسم معاودة الاتصال المطلوب التحقّق منه.
-
returns
boolean
-
-
iterateCallbacks
void
تقبل معاودة الاتصال وتعرض نسخة قابلة للتكرار من استدعاءات مكونات إضافية مطابقة، حيث يتم التفاف كل استدعاء بحالة المعالج الحالي (أي عند استدعاء كل استدعاء، سيتم دمج أي معلمة كائن تمرّرها مع الحالة الحالية للمكوّن الإضافي).
تبدو الدالة
iterateCallbacks
على النحو التالي:(name: C) => {...}
-
اسم
C
اسم معاودة الاتصال المطلوب تشغيلها
-
returns
المنشئ<NonNullable<indexedAccess>anyunknown>
-
-
runCallbacks
void
تعمل على تشغيل جميع استدعاءات المكونات الإضافية التي تطابق الاسم المعني، بالترتيب، مع تمرير كائن المعلمة المحدد (دمجه مع حالة المكون الإضافي الحالية) باعتباره الوسيطة الوحيدة.
ملاحظة: بما أنّ هذه الطريقة تشغِّل كل المكوّنات الإضافية، فهي لا تتناسب مع الحالات التي تتطلّب تطبيق القيمة المعروضة لمعاودة الاتصال قبل استدعاء عملية معاودة الاتصال التالية. انظر
workbox-strategies.StrategyHandler#iterateCallbacks
أدناه للاطّلاع على كيفية التعامل مع هذا الطلب.تبدو الدالة
runCallbacks
على النحو التالي:(name: C, param: Omit<indexedAccess"state"
>) => {...}-
اسم
C
اسم معاودة الاتصال المطلوب تشغيله داخل كل مكوّن إضافي.
-
مَعلمة
Omit<indexedAccess"state"
>الكائن الذي يتم تمريره كمعلمة الأولى (فقط) عند تنفيذ كل استدعاء. سيتم دمج هذا الكائن مع حالة المكون الإضافي الحالية قبل تنفيذ معاودة الاتصال.
-
returns
Promise<void>
-
-
waitUntil
void
إضافة وعود إلى [وعود إطالة المدة الزمنية]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
لحدث الحدث المرتبط بالطلب الذي يتم التعامل معه (عادةً ما تكونFetchEvent
).ملاحظة: لا يزال بإمكانك الانتظار
workbox-strategies.StrategyHandler~doneWaiting
لمعرفة موعد حلّ جميع الوعود المُضافة.تبدو الدالة
waitUntil
على النحو التالي:(promise: Promise<T>) => {...}
-
وعد
Promise<T>
وعد بالإضافة إلى الوعود بتمديد العمر للحدث الذي أدى إلى تشغيل الطلب.
-
returns
Promise<T>
-
StrategyOptions
أماكن إقامة
-
cacheName
سلسلة اختيارية
-
fetchOptions
RequestInit اختياري
-
matchOptions
CacheQueryOptions اختياري
-
مكونات إضافية
WorkboxPlugin[] اختيارية