استراتيجيات-صندوق العمل

عندما تم تقديم عمال الخدمة لأول مرة، ظهرت مجموعة من استراتيجيات التخزين المؤقت الشائعة. استراتيجية التخزين المؤقت هي نمط يحدّد الطريقة التي ينشئ بها مشغّل الخدمات استجابة بعد تلقّي حدث استرجاع.

توفّر "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()".

ملاحظة: يمكنك الرجوع إلى تنفيذ المصدر الخاص بـ "StrategyHandler" للاطّلاع على جميع المعلَمات التي يقبلها كل إجراء

.

استراتيجية سباق مخصّصة لذاكرة التخزين المؤقت للشبكة

يستند المثال التالي إلى 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

    CacheFirst

• cacheName

  سلسلة

• fetchOptions

  RequestInit اختياري

• matchOptions

  CacheQueryOptions اختياري

• مكونات إضافية

  WorkboxPlugin[]

• _aانتظار الإكمال

  void

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

  (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • responseDone

    وعد<الرد>

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

  (handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    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

    CacheOnly

• cacheName

  سلسلة

• fetchOptions

  RequestInit اختياري

• matchOptions

  CacheQueryOptions اختياري

• مكونات إضافية

  WorkboxPlugin[]

• _aانتظار الإكمال

  void

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

  (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • responseDone

    وعد<الرد>

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

  (handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    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

    NetworkFirst

• cacheName

  سلسلة

• fetchOptions

  RequestInit اختياري

• matchOptions

  CacheQueryOptions اختياري

• المكوّنات الإضافية

  WorkboxPlugin[]

• _aانتظار الإكمال

  void

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

  (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • responseDone

    وعد<الرد>

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

  (handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    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

    NetworkOnly

• cacheName

  سلسلة

• fetchOptions

  RequestInit اختياري

• matchOptions

  CacheQueryOptions اختياري

• مكونات إضافية

  WorkboxPlugin[]

• _aانتظار الإكمال

  void

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

  (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • responseDone

    وعد<الرد>

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

  (handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    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

    StaleWhileRevalidate

• cacheName

  سلسلة

• fetchOptions

  RequestInit اختياري

• matchOptions

  CacheQueryOptions اختياري

• مكونات إضافية

  WorkboxPlugin[]

• _aانتظار الإكمال

  void

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

  (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • responseDone

    وعد<الرد>

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

  (handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    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 اختياري

• مكونات إضافية

  WorkboxPlugin[]

• _aانتظار الإكمال

  void

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

  (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • responseDone

    وعد<الرد>

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

  (handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • المعالج

    StrategyHandler

  • طلب

    الطلب

  • حدث

    ExtendableEvent

  • returns

    وعد<الرد>

• _الاسم_المعرِّف

  void

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

  (request: Request,handler: StrategyHandler)=> {...}

  • طلب

    الطلب

  • المعالج

    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)=> {...}

  • الإستراتيجية

    الاستراتيجية

  • الخيارات

    HandlerCallbackOptions

  • returns

    StrategyHandler

• حدث

  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[] اختيارية