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

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

يوفّر workbox-strategies أكثر استراتيجيات التخزين المؤقت شيوعًا، ما يسهِّل وتطبيقها في مشغّل الخدمات لديك.

لن ندخل في تفاصيل كثيرة خارج الاستراتيجيات المعتمدة في Workbox، لكن يمكنك الاطّلاع على مزيد من المعلومات في "كتاب الطبخ بلا إنترنت".

استخدام الاستراتيجيات

سنعرض لك في الأمثلة التالية كيفية استخدام التخزين المؤقت في Workbox الاستراتيجية مع workbox-routing. هناك بعض الخيارات التي يمكنك تحديدها لكل استراتيجية تم تناولها في إعداد قسم "الاستراتيجيات" في هذا المستند.

في قسم "الاستخدام المتقدّم"، سنُطلعك على كيفية استخدام استراتيجيات التخزين المؤقت مباشرةً بدون workbox-routing.

قديمة أثناء إعادة التحقّق

الرسم البياني قديم أثناء إعادة التحقّق

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

تعتبر هذه استراتيجية شائعة إلى حد ما حيث يكون وجود أحدث الموارد ليس مهمًا للتطبيق.

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 مجموعة من المكوّنات الإضافية التي يمكن استخدامها مع هذه الاستراتيجيات.

لاستخدام أي من هذه المكونات الإضافية (أو مكون إضافي مخصص)، ما عليك سوى تمرير على الخيار 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.

أماكن إقامة

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

    فراغ

    تنشئ مثيلاً جديدًا للاستراتيجية وتضبط كل الخيارات الموثَّقة الخصائص كخصائص مثيل عامة.

    ملاحظة: إذا وسعت إحدى فئات الاستراتيجية المخصّصة فئة الاستراتيجية الأساسية لا تحتاج إلى أكثر من هذه الخصائص، فهي لا تحتاج إلى تحديد خاصيتها الدالة الإنشائية.

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

    (options?: StrategyOptions) => {...}

  • cacheName

    سلسلة

  • fetchOptions

    RequestInit اختياري

  • matchOptions

    cacheQueryOptions اختياري

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

    WorkboxPlugin[]

  • _awaitComplete

    فراغ

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

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

    • responseDone

      Promise&lt;Response&gt;

    • المعالج

      StrategyHandler

    • طلب

      الطلب

    • event

      ExtendableEvent

    • returns

      وعود <باطلة>

  • _getResponse

    فراغ

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

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

    • returns

      Promise&lt;Response&gt;

  • مؤشر

    فراغ

    تنفيذ استراتيجية طلب وعرض Promise التي سيتم حلها مع Response، مع استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.

    عند تسجيل مثيل استراتيجية في Workbox workbox-routing.Route، يتم ضبط هذه الطريقة تلقائيًا يتم استدعاؤه عند تطابق المسار.

    ويمكن استخدام هذه الطريقة في FetchEvent مستقلّ. المستمع من خلال تمريره إلى event.respondWith().

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      Promise&lt;Response&gt;

  • handleAll

    فراغ

    تشبه workbox-strategies.Strategy~handle، لكن بدلاً من عرض عنصر Promise الذي يؤدي إلى Response، ستعيد صفًا من الوعود [response, done]، حيث كانت تساوي القيمة (response) ما تعرضه القيمة handle()، الوعد بأن يتم حله بمجرد إضافة أي وعود تمت إضافتها إلى اكتملت الاستراتيجية "event.waitUntil()".

    يمكنك انتظار الوعد done لضمان إجراء أي عمل إضافي من قِبل اكتمال الإستراتيجية (عادةً ما تكون الردود في ذاكرة التخزين المؤقت) بنجاح.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      [وعد <ردّ>، وعد<باطل>]

      صف [response, Done] التي يمكن استخدامها لتحديد متى يتم حل الاستجابة وكذلك عندما يكمل المعالج كل عمله.

CacheOnly

تنفيذ للتخزين المؤقت فقط إستراتيجية الطلب.

هذه الفئة مفيدة إذا كنت تريد الاستفادة من أي المكوّنات الإضافية لمربع العمل.

في حال عدم العثور على نتيجة مطابقة في ذاكرة التخزين المؤقت، سيؤدي ذلك إلى ظهور استثناء WorkboxError.

أماكن إقامة

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

    فراغ

    تنشئ مثيلاً جديدًا للاستراتيجية وتضبط كل الخيارات الموثَّقة الخصائص كخصائص مثيل عامة.

    ملاحظة: إذا وسعت إحدى فئات الاستراتيجية المخصّصة فئة الاستراتيجية الأساسية لا تحتاج إلى أكثر من هذه الخصائص، فهي لا تحتاج إلى تحديد خاصيتها الدالة الإنشائية.

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

    (options?: StrategyOptions) => {...}

  • cacheName

    سلسلة

  • fetchOptions

    RequestInit اختياري

  • matchOptions

    cacheQueryOptions اختياري

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

    WorkboxPlugin[]

  • _awaitComplete

    فراغ

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

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

    • responseDone

      Promise&lt;Response&gt;

    • المعالج

      StrategyHandler

    • طلب

      الطلب

    • event

      ExtendableEvent

    • returns

      وعود <باطلة>

  • _getResponse

    فراغ

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

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

    • returns

      Promise&lt;Response&gt;

  • مؤشر

    فراغ

    تنفيذ استراتيجية طلب وعرض Promise التي سيتم حلها مع Response، مع استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.

    عند تسجيل مثيل استراتيجية في Workbox workbox-routing.Route، يتم ضبط هذه الطريقة تلقائيًا يتم استدعاؤه عند تطابق المسار.

    ويمكن استخدام هذه الطريقة في FetchEvent مستقلّ. المستمع من خلال تمريره إلى event.respondWith().

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      Promise&lt;Response&gt;

  • handleAll

    فراغ

    تشبه workbox-strategies.Strategy~handle، لكن بدلاً من عرض عنصر Promise الذي يؤدي إلى Response، ستعيد صفًا من الوعود [response, done]، حيث كانت تساوي القيمة (response) ما تعرضه القيمة handle()، الوعد بأن يتم حله بمجرد إضافة أي وعود تمت إضافتها إلى اكتملت الاستراتيجية "event.waitUntil()".

    يمكنك انتظار الوعد done لضمان إجراء أي عمل إضافي من قِبل اكتمال الإستراتيجية (عادةً ما تكون الردود في ذاكرة التخزين المؤقت) بنجاح.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      [وعد <ردّ>، وعد<باطل>]

      صف [response, Done] التي يمكن استخدامها لتحديد متى يتم حل الاستجابة وكذلك عندما يكمل المعالج كل عمله.

NetworkFirst

يمكن أن يؤدي تنفيذ الشبكة أولاً إستراتيجية الطلب.

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

وإذا فشل طلب الشبكة، ولم تكن هناك مطابقة لذاكرة التخزين المؤقت، فسيتم باستثناء WorkboxError.

أماكن إقامة

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

    فراغ

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

    (options?: NetworkFirstOptions) => {...}

  • cacheName

    سلسلة

  • fetchOptions

    RequestInit اختياري

  • matchOptions

    cacheQueryOptions اختياري

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

    WorkboxPlugin[]

  • _awaitComplete

    فراغ

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

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

    • responseDone

      Promise&lt;Response&gt;

    • المعالج

      StrategyHandler

    • طلب

      الطلب

    • event

      ExtendableEvent

    • returns

      وعود <باطلة>

  • _getResponse

    فراغ

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

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

    • returns

      Promise&lt;Response&gt;

  • مؤشر

    فراغ

    تنفيذ استراتيجية طلب وعرض Promise التي سيتم حلها مع Response، مع استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.

    عند تسجيل مثيل استراتيجية في Workbox workbox-routing.Route، يتم ضبط هذه الطريقة تلقائيًا يتم استدعاؤه عند تطابق المسار.

    ويمكن استخدام هذه الطريقة في FetchEvent مستقلّ. المستمع من خلال تمريره إلى event.respondWith().

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      Promise&lt;Response&gt;

  • handleAll

    فراغ

    تشبه workbox-strategies.Strategy~handle، لكن بدلاً من عرض عنصر Promise الذي يؤدي إلى Response، ستعيد صفًا من الوعود [response, done]، حيث كانت تساوي القيمة (response) ما تعرضه القيمة handle()، الوعد بأن يتم حله بمجرد إضافة أي وعود تمت إضافتها إلى اكتملت الاستراتيجية "event.waitUntil()".

    يمكنك انتظار الوعد done لضمان إجراء أي عمل إضافي من قِبل اكتمال الإستراتيجية (عادةً ما تكون الردود في ذاكرة التخزين المؤقت) بنجاح.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      [وعد <ردّ>، وعد<باطل>]

      صف [response, Done] التي يمكن استخدامها لتحديد متى يتم حل الاستجابة وكذلك عندما يكمل المعالج جميع أعماله.

NetworkFirstOptions

أماكن إقامة

  • cacheName

    سلسلة اختيارية

  • fetchOptions

    RequestInit اختياري

  • matchOptions

    cacheQueryOptions اختياري

  • networkTimeoutSeconds

    الرقم اختياري

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

    WorkboxPlugin[] اختياري

NetworkOnly

يمكن أن يؤدي تنفيذ الشبكة فقط إستراتيجية الطلب.

هذه الفئة مفيدة إذا كنت تريد الاستفادة من أي المكوّنات الإضافية لمربع العمل.

إذا تعذّر طلب الشبكة، سيؤدي ذلك إلى استثناء WorkboxError.

أماكن إقامة

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

    فراغ

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

    (options?: NetworkOnlyOptions) => {...}

  • cacheName

    سلسلة

  • fetchOptions

    RequestInit اختياري

  • matchOptions

    cacheQueryOptions اختياري

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

    WorkboxPlugin[]

  • _awaitComplete

    فراغ

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

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

    • responseDone

      Promise&lt;Response&gt;

    • المعالج

      StrategyHandler

    • طلب

      الطلب

    • event

      ExtendableEvent

    • returns

      وعود <باطلة>

  • _getResponse

    فراغ

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

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

    • returns

      Promise&lt;Response&gt;

  • مؤشر

    فراغ

    تنفيذ استراتيجية طلب وعرض Promise التي سيتم حلها مع Response، مع استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.

    عند تسجيل مثيل استراتيجية في Workbox workbox-routing.Route، يتم ضبط هذه الطريقة تلقائيًا يتم استدعاؤه عند تطابق المسار.

    ويمكن استخدام هذه الطريقة في FetchEvent مستقلّ. المستمع من خلال تمريره إلى event.respondWith().

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      Promise&lt;Response&gt;

  • handleAll

    فراغ

    تشبه workbox-strategies.Strategy~handle، لكن بدلاً من عرض عنصر Promise الذي يؤدي إلى Response، ستعيد صفًا من الوعود [response, done]، حيث كانت تساوي القيمة (response) ما تعرضه القيمة handle()، الوعد بأن يتم حله بمجرد إضافة أي وعود تمت إضافتها إلى اكتملت الاستراتيجية "event.waitUntil()".

    يمكنك انتظار الوعد done لضمان إجراء أي عمل إضافي من قِبل اكتمال الإستراتيجية (عادةً ما تكون الردود في ذاكرة التخزين المؤقت) بنجاح.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      [وعد <ردّ>، وعد<باطل>]

      صف [response, Done] التي يمكن استخدامها لتحديد متى يتم حل الاستجابة وكذلك عندما يكمل المعالج جميع أعماله.

NetworkOnlyOptions

أماكن إقامة

  • fetchOptions

    RequestInit اختياري

  • networkTimeoutSeconds

    الرقم اختياري

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

    WorkboxPlugin[] اختياري

StaleWhileRevalidate

يمكن أن يؤدي تنفيذ قديم أثناء إعادة التحقّق إستراتيجية الطلب.

يتم طلب الموارد من كل من ذاكرة التخزين المؤقت والشبكة بالتوازي. ستستجيب الاستراتيجية بالنسخة المخزَّنة مؤقتًا إذا كانت متاحة، وإلا انتظار استجابة الشبكة. يتم تعديل ذاكرة التخزين المؤقت باستجابة الشبكة. مع كل طلب ناجح.

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

وإذا فشل طلب الشبكة، ولم تكن هناك مطابقة لذاكرة التخزين المؤقت، فسيتم باستثناء WorkboxError.

أماكن إقامة

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

    فراغ

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

    (options?: StrategyOptions) => {...}

  • cacheName

    سلسلة

  • fetchOptions

    RequestInit اختياري

  • matchOptions

    cacheQueryOptions اختياري

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

    WorkboxPlugin[]

  • _awaitComplete

    فراغ

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

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

    • responseDone

      Promise&lt;Response&gt;

    • المعالج

      StrategyHandler

    • طلب

      الطلب

    • event

      ExtendableEvent

    • returns

      وعود <باطلة>

  • _getResponse

    فراغ

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

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

    • returns

      Promise&lt;Response&gt;

  • مؤشر

    فراغ

    تنفيذ استراتيجية طلب وعرض Promise التي سيتم حلها مع Response، مع استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.

    عند تسجيل مثيل استراتيجية في Workbox workbox-routing.Route، يتم ضبط هذه الطريقة تلقائيًا يتم استدعاؤه عند تطابق المسار.

    ويمكن استخدام هذه الطريقة في FetchEvent مستقلّ. المستمع من خلال تمريره إلى event.respondWith().

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      Promise&lt;Response&gt;

  • handleAll

    فراغ

    تشبه workbox-strategies.Strategy~handle، لكن بدلاً من عرض عنصر Promise الذي يؤدي إلى Response، ستعيد صفًا من الوعود [response, done]، حيث كانت تساوي القيمة (response) ما تعرضه القيمة handle()، الوعد بأن يتم حله بمجرد إضافة أي وعود تمت إضافتها إلى اكتملت الاستراتيجية "event.waitUntil()".

    يمكنك انتظار الوعد done لضمان إجراء أي عمل إضافي من قِبل اكتمال الإستراتيجية (عادةً ما تكون الردود في ذاكرة التخزين المؤقت) بنجاح.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      [وعد <ردّ>، وعد<باطل>]

      صف [response, Done] التي يمكن استخدامها لتحديد متى يتم حل الاستجابة وكذلك عندما يكمل المعالج كل عمله.

Strategy

يشير ذلك المصطلح إلى فئة أساسية مجردة يجب أن تشملها جميع فئات الاستراتيجيات الأخرى:

أماكن إقامة

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

    فراغ

    تنشئ مثيلاً جديدًا للاستراتيجية وتضبط كل الخيارات الموثَّقة الخصائص كخصائص مثيل عامة.

    ملاحظة: إذا وسعت إحدى فئات الاستراتيجية المخصّصة فئة الاستراتيجية الأساسية لا تحتاج إلى أكثر من هذه الخصائص، فهي لا تحتاج إلى تحديد خاصيتها الدالة الإنشائية.

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

    (options?: StrategyOptions) => {...}

  • cacheName

    سلسلة

  • fetchOptions

    RequestInit اختياري

  • matchOptions

    cacheQueryOptions اختياري

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

    WorkboxPlugin[]

  • _awaitComplete

    فراغ

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

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

    • responseDone

      Promise&lt;Response&gt;

    • المعالج

      StrategyHandler

    • طلب

      الطلب

    • event

      ExtendableEvent

    • returns

      وعود <باطلة>

  • _getResponse

    فراغ

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

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

    • returns

      Promise&lt;Response&gt;

  • _handle

    فراغ

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

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

    • returns

      Promise&lt;Response&gt;

  • مؤشر

    فراغ

    تنفيذ استراتيجية طلب وعرض Promise التي سيتم حلها مع Response، مع استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.

    عند تسجيل مثيل استراتيجية في Workbox workbox-routing.Route، يتم ضبط هذه الطريقة تلقائيًا يتم استدعاؤه عند تطابق المسار.

    ويمكن استخدام هذه الطريقة في FetchEvent مستقلّ. المستمع من خلال تمريره إلى event.respondWith().

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      Promise&lt;Response&gt;

  • handleAll

    فراغ

    تشبه workbox-strategies.Strategy~handle، لكن بدلاً من عرض عنصر Promise الذي يؤدي إلى Response، ستعيد صفًا من الوعود [response, done]، حيث كانت تساوي القيمة (response) ما تعرضه القيمة handle()، الوعد بأن يتم حله بمجرد إضافة أي وعود تمت إضافتها إلى اكتملت الاستراتيجية "event.waitUntil()".

    يمكنك انتظار الوعد done لضمان إجراء أي عمل إضافي من قِبل اكتمال الإستراتيجية (عادةً ما تكون الردود في ذاكرة التخزين المؤقت) بنجاح.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • الخيارات

      FetchEvent | HandlerCallbackOptions

      FetchEvent أو كائن مع المواقع المدرجة أدناه.

    • returns

      [وعد <ردّ>، وعد<باطل>]

      صف [response, Done] التي يمكن استخدامها لتحديد متى يتم حل الاستجابة وكذلك عندما يكمل المعالج كل عمله.

StrategyHandler

صف يتم إنشاؤه في كل مرة يتم فيها استدعاء مثيل من مثيل الإستراتيجية workbox-strategies.Strategy~handle أو workbox-strategies.Strategy~handleAll الذي يلتف حول كل عمليات الجلب التخزين المؤقت للإجراءات حول استدعاءات المكوّنات الإضافية وتتبع وقت الاستجابة "تم" (أي تم حلّ جميع الوعود event.waitUntil() المُضافة).

أماكن إقامة

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

    فراغ

    يتم إنشاء مثيل جديد مرتبط بالاستراتيجية التي تم تمريرها والحدث الذي تم تمريره. يعالج الطلب.

    تقوم الدالة الإنشائية أيضًا بتهيئة الحالة التي سيتم تمريرها إلى كل من للمكونات الإضافية التي تتعامل مع هذا الطلب.

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

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • event

    ExtendableEvent

  • المَعلمات

    أي خيار اختياري

  • طلب

    الطلب

  • url

    عنوان URL اختياري

  • cacheMatch

    فراغ

    يطابق طلبًا من ذاكرة التخزين المؤقت (ويستدعي أي مكون إضافي قابل للتطبيق طرق معاودة الاتصال) باستخدام cacheName وmatchOptions وplugins المحددة في كائن الإستراتيجية.

    يتم استدعاء طرق دورة حياة المكوّنات الإضافية التالية عند استخدام هذه الطريقة:

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

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

    (key: RequestInfo) => {...}

    • مفتاح

      RequestInfo

      الطلب أو عنوان URL المراد استخدامه كمفتاح لذاكرة التخزين المؤقت

    • returns

      Promise&lt;Response&gt;

      تمثّل هذه السمة إجابة مطابقة، في حال العثور عليها.

  • cachePut

    فراغ

    يضع طلب/استجابة زوجًا من الطلبات/الاستجابة في ذاكرة التخزين المؤقت (ويستدعي أي زوج ذي صلة طرق معاودة الاتصال بالمكون الإضافي) باستخدام cacheName وplugins المحددين في كائن الإستراتيجية.

    يتم استدعاء طرق دورة حياة المكوّنات الإضافية التالية عند استخدام هذه الطريقة:

    • cacheKeyWillByUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

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

    (key: RequestInfo, response: Response) => {...}

    • مفتاح

      RequestInfo

      الطلب أو عنوان URL المراد استخدامه كمفتاح لذاكرة التخزين المؤقت

    • رد

      الرد

      الاستجابة إلى ذاكرة التخزين المؤقت.

    • returns

      Promise&lt;boolean&gt;

      false إذا تسبب cacheWillUpdate في حدوث الاستجابة أن لا يتم تخزينها مؤقتًا، وtrue في الحالات الأخرى.

  • إتلافه

    فراغ

    إيقاف تنفيذ الاستراتيجية وحلّ أي مشاكل في انتظار المراجعة على الفور وعد waitUntil().

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

    () => {...}

  • doneWaiting

    فراغ

    إرجاع وعود يتم حله بمجرد تمرير جميع الوعود إلى workbox-strategies.StrategyHandler~waitUntil قد استقرّوا

    ملاحظة: يجب تنفيذ أي عمل يتم إجراؤه بعد تسوية "doneWaiting()" يدويًا تم تمريرها إلى طريقة waitUntil() للحدث (وليس طريقة معالِج هذا الحدث waitUntil())، وإلا فسيتم إنهاء سلسلة تعليمات عامل الخدمة قبل إكمال عملك.

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

    () => {...}

    • returns

      وعود <باطلة>

  • استرجاع

    فراغ

    لجلب طلب معين (واستدعاء أي استدعاء مكون إضافي قابل للتطبيق ) باستخدام fetchOptions (للطلبات غير المتعلقة بالتنقّل) تم تحديد plugins في الكائن Strategy.

    يتم استدعاء طرق دورة حياة المكوّنات الإضافية التالية عند استخدام هذه الطريقة:

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

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

    (input: RequestInfo) => {...}

    • مصدر الإدخال

      RequestInfo

      عنوان URL أو طلب الجلب.

    • returns

      Promise&lt;Response&gt;

  • fetchAndCachePut

    فراغ

    يتم إجراء المكالمات باستخدام this.fetch() و (في الخلفية) يتم تشغيلها this.cachePut() على. الرد الذي تم إنشاؤه من خلال this.fetch().

    يستدعي الاتصال إلى this.cachePut() تلقائيًا this.waitUntil()، لذلك لن تضطر إلى استدعاء waitUntil() يدويًا في الحدث.

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

    (input: RequestInfo) => {...}

    • مصدر الإدخال

      RequestInfo

      الطلب أو عنوان URL المطلوب استرجاعه وتخزينه مؤقتًا

    • returns

      Promise&lt;Response&gt;

  • getCacheKey

    فراغ

    التحقّق من قائمة المكوّنات الإضافية لمعاودة الاتصال على "cacheKeyWillBeUsed"، وتنفيذ أي من عمليات الاستدعاء هذه الموجودة في التسلسل. مباراة Request النهائية يتم التعامل مع الكائن الذي يعرضه المكون الإضافي الأخير على أنه مفتاح ذاكرة التخزين المؤقت يقرأ و/أو يكتب. في حال عدم توفّر استدعاءات مكوّن cacheKeyWillBeUsed الإضافي مسجّل، تمت إعادة الطلب الذي تم تمريره بدون تعديل

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

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • طلب

      الطلب

    • الوضع

      "قراءة"
       | "الكتابة"

    • returns

      Promise&lt;Request&gt;

  • hasCallback

    فراغ

    تعرض القيمة "صحيح" إذا كانت الإستراتيجية تحتوي على مكوّن إضافي واحد على الأقل مع السمة المحددة معاودة الاتصال.

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

    (name: C) => {...}

    • الاسم

      C

      اسم معاودة الاتصال التي تريد التحقق منها.

    • returns

      منطقي

  • iterateCallbacks

    فراغ

    تقبل معاودة الاتصال وتعرض عنصرًا قابلاً للتكرار من استدعاءات المكونات الإضافية المطابقة يتم فيها التفاف كل استدعاء بحالة المعالج الحالية (أي عندما فإنك تستدعي كل رد اتصال، وأيًا كانت معلمة الكائن التي تمررها، سيتم مع الحالة الحالية للمكوّن الإضافي).

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

    (name: C) => {...}

    • الاسم

      C

      اسم استدعاء الاتصال لتشغيله

    • returns

      منشئ المحتوى<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    فراغ

    تشغيل جميع استدعاءات المكوّنات الإضافية المطابقة للاسم المحدّد، وتمرير كائن المعلمة المحدد (الذي تم دمجه حالة المكوِّن الإضافي الحالي) باعتباره الكائن الوحيد الوسيطة.

    ملاحظة: بما أنّ هذه الطريقة تشغّل جميع المكوّنات الإضافية، فهي غير مناسبة للحالات الذي يجب فيه تطبيق القيمة المعروضة لمعاودة الاتصال قبل إجراء معاودة الاتصال التالية. عرض workbox-strategies.StrategyHandler#iterateCallbacks أدناه لمعرفة كيفية التعامل مع هذه الحالة.

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

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • الاسم

      C

      اسم رد الاتصال المراد تشغيله داخل كل مكوّن إضافي.

    • مَعلمة

      حذف<indexedAccess"state"
      >

      الكائن المطلوب تمريره باعتباره المعلمة الأولى (والوحيدة) عند تنفيذ كل معاودة اتصال. سيتم دمج هذا الكائن مع حالة المكون الإضافي الحالية قبل تنفيذ معاودة الاتصال.

    • returns

      وعود <باطلة>

  • waitUntil

    فراغ

    يضيف وعدًا إلى [تمديد فترة الوعود]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises لحدث الحدث المرتبط بالطلب الذي تتم معالجته (عادةً ما تكون FetchEvent).

    يمكنك الانتظار workbox-strategies.StrategyHandler~doneWaiting لمعرفة متى يتم استيفاء جميع الوعود الإضافية.

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

    (promise: Promise<T>) => {...}

    • وعد

      وعود<T>

      وعد بإطالة فترة الوعود للحدث الذي أدّى إلى الطلب

    • returns

      وعود<T>

StrategyOptions

أماكن إقامة

  • cacheName

    سلسلة اختيارية

  • fetchOptions

    RequestInit اختياري

  • matchOptions

    cacheQueryOptions اختياري

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

    WorkboxPlugin[] اختيارية