جعبه کار - استراتژی ها

هنگامی که کارگران خدماتی برای اولین بار معرفی شدند، مجموعه ای از استراتژی های ذخیره سازی رایج ظاهر شد. استراتژی ذخیره سازی الگویی است که تعیین می کند چگونه یک سرویس دهنده پس از دریافت یک رویداد واکشی، پاسخی را ایجاد می کند.

workbox-strategies متداول‌ترین استراتژی‌های کش را ارائه می‌کند، بنابراین به راحتی می‌توانید آنها را در سرویس‌کار خود اعمال کنید.

ما خارج از استراتژی‌های پشتیبانی شده توسط Workbox به جزئیات زیادی نمی‌پردازیم، اما می‌توانید در کتاب آشپزی آفلاین اطلاعات بیشتری کسب کنید .

استفاده از استراتژی ها

در مثال‌های زیر، نحوه استفاده از استراتژی‌های ذخیره‌سازی Workbox با workbox-routing را به شما نشان خواهیم داد. گزینه هایی وجود دارد که می توانید با هر استراتژی تعریف کنید که در بخش پیکربندی استراتژی های این سند پوشش داده شده است.

در بخش Advanced Usage ، نحوه استفاده مستقیم از استراتژی‌های کش را بدون workbox-routing پوشش خواهیم داد.

Stale-While-Revalidate

دیاگرام Stale while Revalidate

الگوی stale-while-revalidate به شما این امکان را می دهد که در صورت وجود، با یک پاسخ ذخیره شده در حافظه پنهان، در سریع ترین زمان ممکن به درخواست پاسخ دهید، در صورتی که در کش نبود، دوباره به درخواست شبکه بازگردید. سپس درخواست شبکه برای به روز رسانی کش استفاده می شود. برخلاف برخی از پیاده‌سازی‌های stale-while-validate، این استراتژی همیشه بدون در نظر گرفتن سن پاسخ ذخیره شده، درخواست اعتبارسنجی مجدد می‌کند.

این یک استراتژی نسبتاً رایج است که در آن داشتن به روزترین منبع برای برنامه ضروری نیست.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

ابتدا کش (بازگشت حافظه پنهان به شبکه)

کش اول نمودار

برنامه‌های وب آفلاین به شدت به حافظه نهان متکی هستند، اما برای دارایی‌هایی که حیاتی نیستند و می‌توان به تدریج آن‌ها را کش کرد، ابتدا یک کش بهترین گزینه است.

اگر یک Response در حافظه پنهان وجود داشته باشد، درخواست با استفاده از پاسخ ذخیره شده انجام می شود و شبکه به هیچ وجه استفاده نمی شود. اگر پاسخی در حافظه پنهان وجود نداشته باشد، درخواست توسط یک درخواست شبکه انجام می شود و پاسخ در حافظه پنهان ذخیره می شود تا درخواست بعدی مستقیماً از حافظه پنهان ارائه شود.

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 : یک تماس برگشتی را به عنوان ورودی دریافت می کند و اگر استراتژی حداقل یک افزونه با پاسخ تماس داده شده داشته باشد، true را برمی گرداند.
  • 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);
          }
        }
      );
    });
  }
}

استفاده پیشرفته

اگر می خواهید از استراتژی ها در منطق رویداد واکشی خود استفاده کنید، می توانید از کلاس های استراتژی برای اجرای یک درخواست از طریق یک استراتژی خاص استفاده کنید.

به عنوان مثال، برای استفاده از استراتژی stale-while-revalidate، می توانید موارد زیر را انجام دهید:

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}));
  }
});

می‌توانید فهرست کلاس‌های موجود را در اسناد مرجع workbox-strategies بیابید.

انواع

CacheFirst

پیاده سازی یک استراتژی درخواست اولین کش .

یک استراتژی cache first برای دارایی هایی که تجدید نظر شده اند، مانند URL هایی مانند /styles/example.a8f5f1.css مفید است، زیرا می توان آنها را برای مدت زمان طولانی در حافظه پنهان نگه داشت.

اگر درخواست شبکه با شکست مواجه شود، و هیچ تطبیق کش وجود نداشته باشد، یک استثنا WorkboxError ایجاد می کند.

خواص

  • سازنده

    باطل

    یک نمونه جدید از استراتژی ایجاد می کند و تمام ویژگی های گزینه مستند شده را به عنوان ویژگی های نمونه عمومی تنظیم می کند.

    نکته: اگر یک کلاس استراتژی سفارشی کلاس Strategy پایه را گسترش دهد و به بیشتر از این ویژگی ها نیاز نداشته باشد، نیازی به تعریف سازنده خود ندارد.

    تابع constructor به صورت زیر است:

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

  • cacheName

    رشته

  • fetchOptions

    RequestInit اختیاری است

  • matchOptions

    CacheQueryOptions اختیاری است

  • پلاگین ها
  • _awaitکامل

    باطل

    تابع _awaitComplete به شکل زیر است:

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

    • پاسخ انجام شد

      قول<پاسخ>

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<باطل>

  • _getResponse

    باطل

    تابع _getResponse به شکل زیر است:

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

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<پاسخ>

  • دسته

    باطل

    یک استراتژی درخواست را اجرا کنید و یک Promise را برمی‌گرداند که با یک Response حل می‌شود و همه تماس‌های مربوط به افزونه را فراخوانی می‌کند.

    هنگامی که یک نمونه استراتژی با Workbox workbox-routing.Route ثبت می شود، این روش به طور خودکار زمانی که مسیر مطابقت دارد فراخوانی می شود.

    از طرف دیگر، این روش را می توان در یک شنونده مستقل FetchEvent با ارسال آن به event.respondWith() استفاده کرد.

    تابع handle به نظر می رسد:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      قول<پاسخ>

  • handleAll

    باطل

    مشابه workbox-strategies.Strategy~handle ، اما به جای اینکه فقط یک Promise برگرداند که به یک Response آن را حل می کند، چندین وعده [response, done] را برمی گرداند، که در آن ( response ) قبلی معادل چیزی است که handle() برمی گرداند. و دومی یک Promise است که پس از تکمیل هر وعده‌ای که به event.waitUntil() به عنوان بخشی از اجرای استراتژی تکمیل شد، برطرف می‌شود.

    شما می توانید منتظر وعده done باشید تا مطمئن شوید که هر کار اضافی انجام شده توسط استراتژی (معمولاً پاسخ های حافظه پنهان) با موفقیت کامل می شود.

    تابع handleAll به شکل زیر است:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      [قول <پاسخ>، قول<باطل>]

      چندین وعده [پاسخ، انجام شد] که می تواند برای تعیین زمان حل شدن پاسخ و همچنین زمانی که کنترل کننده تمام کار خود را تکمیل کرده است، استفاده شود.

CacheOnly

اجرای یک استراتژی درخواست فقط حافظه پنهان .

اگر می خواهید از هر افزونه Workbox استفاده کنید، این کلاس مفید است.

اگر کش وجود نداشته باشد، یک استثنا WorkboxError ایجاد می کند.

خواص

  • سازنده

    باطل

    یک نمونه جدید از استراتژی ایجاد می کند و تمام ویژگی های گزینه مستند شده را به عنوان ویژگی های نمونه عمومی تنظیم می کند.

    نکته: اگر یک کلاس استراتژی سفارشی کلاس Strategy پایه را گسترش دهد و به بیشتر از این ویژگی ها نیاز نداشته باشد، نیازی به تعریف سازنده خود ندارد.

    تابع constructor به صورت زیر است:

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

  • cacheName

    رشته

  • fetchOptions

    RequestInit اختیاری است

  • matchOptions

    CacheQueryOptions اختیاری است

  • پلاگین ها
  • _awaitکامل

    باطل

    تابع _awaitComplete به شکل زیر است:

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

    • پاسخ انجام شد

      قول<پاسخ>

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<باطل>

  • _getResponse

    باطل

    تابع _getResponse به شکل زیر است:

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

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<پاسخ>

  • دسته

    باطل

    یک استراتژی درخواست را اجرا کنید و یک Promise را برمی‌گرداند که با یک Response حل می‌شود و همه تماس‌های مربوط به افزونه را فراخوانی می‌کند.

    هنگامی که یک نمونه استراتژی با Workbox workbox-routing.Route ثبت می شود، این روش به طور خودکار زمانی که مسیر مطابقت دارد فراخوانی می شود.

    از طرف دیگر، این روش را می توان در یک شنونده مستقل FetchEvent با ارسال آن به event.respondWith() استفاده کرد.

    تابع handle به نظر می رسد:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      قول<پاسخ>

  • handleAll

    باطل

    مشابه workbox-strategies.Strategy~handle ، اما به جای اینکه فقط یک Promise برگرداند که به یک Response آن را حل می کند، چندین وعده [response, done] را برمی گرداند، که در آن ( response ) قبلی معادل چیزی است که handle() برمی گرداند. و دومی یک Promise است که پس از تکمیل هر وعده‌ای که به event.waitUntil() به عنوان بخشی از اجرای استراتژی تکمیل شد، برطرف می‌شود.

    شما می توانید منتظر وعده done باشید تا مطمئن شوید که هر کار اضافی انجام شده توسط استراتژی (معمولاً پاسخ های حافظه پنهان) با موفقیت کامل می شود.

    تابع handleAll به شکل زیر است:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      [قول <پاسخ>، قول<باطل>]

      چندین وعده [پاسخ، انجام شد] که می تواند برای تعیین زمان حل شدن پاسخ و همچنین زمانی که کنترل کننده تمام کار خود را تکمیل کرده است، استفاده شود.

NetworkFirst

اجرای استراتژی درخواست اول شبکه

به طور پیش‌فرض، این استراتژی پاسخ‌های دارای کد وضعیت ۲۰۰ و همچنین پاسخ‌های غیر شفاف را در حافظه پنهان ذخیره می‌کند. پاسخ‌های غیرشفاف درخواست‌هایی با مبدا متقابل هستند که در آن پاسخ از CORS پشتیبانی نمی‌کند.

اگر درخواست شبکه با شکست مواجه شود، و هیچ تطبیق کش وجود نداشته باشد، یک استثنا WorkboxError ایجاد می کند.

خواص

  • سازنده

    باطل

    تابع constructor به صورت زیر است:

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

  • cacheName

    رشته

  • fetchOptions

    RequestInit اختیاری است

  • matchOptions

    CacheQueryOptions اختیاری است

  • پلاگین ها
  • _awaitکامل

    باطل

    تابع _awaitComplete به شکل زیر است:

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

    • پاسخ انجام شد

      قول<پاسخ>

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<باطل>

  • _getResponse

    باطل

    تابع _getResponse به شکل زیر است:

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

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<پاسخ>

  • دسته

    باطل

    یک استراتژی درخواست را اجرا کنید و یک Promise را برمی‌گرداند که با یک Response حل می‌شود و همه تماس‌های مربوط به افزونه را فراخوانی می‌کند.

    هنگامی که یک نمونه استراتژی با Workbox workbox-routing.Route ثبت می شود، این روش به طور خودکار زمانی که مسیر مطابقت دارد فراخوانی می شود.

    از طرف دیگر، این روش را می توان در یک شنونده مستقل FetchEvent با ارسال آن به event.respondWith() استفاده کرد.

    تابع handle به نظر می رسد:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      قول<پاسخ>

  • handleAll

    باطل

    مشابه workbox-strategies.Strategy~handle ، اما به جای اینکه فقط یک Promise برگرداند که به یک Response آن را حل می کند، چندین وعده [response, done] را برمی گرداند، که در آن ( response ) قبلی معادل چیزی است که handle() برمی گرداند. و دومی یک Promise است که پس از تکمیل هر وعده‌ای که به event.waitUntil() به عنوان بخشی از اجرای استراتژی تکمیل شد، برطرف می‌شود.

    شما می توانید منتظر وعده done باشید تا مطمئن شوید که هر کار اضافی انجام شده توسط استراتژی (معمولاً پاسخ های حافظه پنهان) با موفقیت کامل می شود.

    تابع handleAll به شکل زیر است:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      [قول <پاسخ>، قول<باطل>]

      چندین وعده [پاسخ، انجام شد] که می تواند برای تعیین زمان حل شدن پاسخ و همچنین زمانی که کنترل کننده تمام کار خود را تکمیل کرده است، استفاده شود.

NetworkFirstOptions

خواص

  • cacheName

    رشته اختیاری

  • fetchOptions

    RequestInit اختیاری است

  • matchOptions

    CacheQueryOptions اختیاری است

  • networkTimeoutSeconds

    شماره اختیاری

  • پلاگین ها

    WorkboxPlugin [] اختیاری است

NetworkOnly

اجرای یک استراتژی درخواست فقط شبکه .

اگر می خواهید از هر افزونه Workbox استفاده کنید، این کلاس مفید است.

اگر درخواست شبکه با شکست مواجه شود، یک استثنا WorkboxError ایجاد می کند.

خواص

  • سازنده

    باطل

    تابع constructor به صورت زیر است:

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

  • cacheName

    رشته

  • fetchOptions

    RequestInit اختیاری است

  • matchOptions

    CacheQueryOptions اختیاری است

  • پلاگین ها
  • _awaitکامل

    باطل

    تابع _awaitComplete به شکل زیر است:

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

    • پاسخ انجام شد

      قول<پاسخ>

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<باطل>

  • _getResponse

    باطل

    تابع _getResponse به شکل زیر است:

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

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<پاسخ>

  • دسته

    باطل

    یک استراتژی درخواست را اجرا کنید و یک Promise را برمی‌گرداند که با یک Response حل می‌شود و همه تماس‌های مربوط به افزونه را فراخوانی می‌کند.

    هنگامی که یک نمونه استراتژی با Workbox workbox-routing.Route ثبت می شود، این روش به طور خودکار زمانی که مسیر مطابقت دارد فراخوانی می شود.

    از طرف دیگر، این روش را می توان در یک شنونده مستقل FetchEvent با ارسال آن به event.respondWith() استفاده کرد.

    تابع handle به نظر می رسد:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      قول<پاسخ>

  • handleAll

    باطل

    مشابه workbox-strategies.Strategy~handle ، اما به جای اینکه فقط یک Promise برگرداند که به یک Response آن را حل می کند، چندین وعده [response, done] را برمی گرداند، که در آن ( response ) قبلی معادل چیزی است که handle() برمی گرداند. و دومی یک Promise است که پس از تکمیل هر وعده‌ای که به event.waitUntil() به عنوان بخشی از اجرای استراتژی تکمیل شد، برطرف می‌شود.

    شما می توانید منتظر وعده done باشید تا مطمئن شوید که هر کار اضافی انجام شده توسط استراتژی (معمولاً پاسخ های حافظه پنهان) با موفقیت کامل می شود.

    تابع handleAll به شکل زیر است:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      [قول <پاسخ>، قول<باطل>]

      چندین وعده [پاسخ، انجام شد] که می تواند برای تعیین زمان حل شدن پاسخ و همچنین زمانی که کنترل کننده تمام کار خود را تکمیل کرده است، استفاده شود.

NetworkOnlyOptions

خواص

  • fetchOptions

    RequestInit اختیاری است

  • networkTimeoutSeconds

    شماره اختیاری

  • پلاگین ها

    WorkboxPlugin [] اختیاری است

StaleWhileRevalidate

اجرای یک استراتژی درخواست کهنه و اعتبار مجدد .

منابع هم از کش و هم از شبکه به صورت موازی درخواست می شوند. استراتژی در صورت موجود بودن با نسخه ذخیره شده پاسخ می دهد، در غیر این صورت منتظر پاسخ شبکه باشید. کش با پاسخ شبکه با هر درخواست موفقیت آمیز به روز می شود.

به طور پیش‌فرض، این استراتژی پاسخ‌های دارای کد وضعیت ۲۰۰ و همچنین پاسخ‌های غیر شفاف را در حافظه پنهان ذخیره می‌کند. پاسخ‌های غیرشفاف درخواست‌هایی با مبدا متقابل هستند که در آن پاسخ از CORS پشتیبانی نمی‌کند.

اگر درخواست شبکه با شکست مواجه شود، و هیچ تطبیق کش وجود نداشته باشد، یک استثنا WorkboxError ایجاد می کند.

خواص

  • سازنده

    باطل

    تابع constructor به صورت زیر است:

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

  • cacheName

    رشته

  • fetchOptions

    RequestInit اختیاری است

  • matchOptions

    CacheQueryOptions اختیاری است

  • پلاگین ها
  • _awaitکامل

    باطل

    تابع _awaitComplete به شکل زیر است:

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

    • پاسخ انجام شد

      قول<پاسخ>

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<باطل>

  • _getResponse

    باطل

    تابع _getResponse به شکل زیر است:

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

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<پاسخ>

  • دسته

    باطل

    یک استراتژی درخواست را اجرا کنید و یک Promise را برمی‌گرداند که با یک Response حل می‌شود و همه تماس‌های مربوط به افزونه را فراخوانی می‌کند.

    هنگامی که یک نمونه استراتژی با Workbox workbox-routing.Route ثبت می شود، این روش به طور خودکار زمانی که مسیر مطابقت دارد فراخوانی می شود.

    از طرف دیگر، این روش را می توان در یک شنونده مستقل FetchEvent با ارسال آن به event.respondWith() استفاده کرد.

    تابع handle به نظر می رسد:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      قول<پاسخ>

  • handleAll

    باطل

    مشابه workbox-strategies.Strategy~handle ، اما به جای اینکه فقط یک Promise برگرداند که به یک Response آن را حل می کند، چندین وعده [response, done] را برمی گرداند، که در آن ( response ) قبلی معادل چیزی است که handle() برمی گرداند. و دومی یک Promise است که پس از تکمیل هر وعده‌ای که به event.waitUntil() به عنوان بخشی از اجرای استراتژی تکمیل شد، برطرف می‌شود.

    شما می توانید منتظر وعده done باشید تا مطمئن شوید که هر کار اضافی انجام شده توسط استراتژی (معمولاً پاسخ های حافظه پنهان) با موفقیت کامل می شود.

    تابع handleAll به شکل زیر است:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      [قول <پاسخ>، قول<باطل>]

      چندین وعده [پاسخ، انجام شد] که می تواند برای تعیین زمان حل شدن پاسخ و همچنین زمانی که کنترل کننده تمام کار خود را تکمیل کرده است، استفاده شود.

Strategy

یک کلاس پایه انتزاعی که تمام کلاس های استراتژی دیگر باید از آن امتداد داشته باشند:

خواص

  • سازنده

    باطل

    یک نمونه جدید از استراتژی ایجاد می کند و تمام ویژگی های گزینه مستند شده را به عنوان ویژگی های نمونه عمومی تنظیم می کند.

    نکته: اگر یک کلاس استراتژی سفارشی کلاس Strategy پایه را گسترش دهد و به بیشتر از این ویژگی ها نیاز نداشته باشد، نیازی به تعریف سازنده خود ندارد.

    تابع constructor به صورت زیر است:

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

  • cacheName

    رشته

  • fetchOptions

    RequestInit اختیاری است

  • matchOptions

    CacheQueryOptions اختیاری است

  • پلاگین ها
  • _awaitکامل

    باطل

    تابع _awaitComplete به شکل زیر است:

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

    • پاسخ انجام شد

      قول<پاسخ>

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<باطل>

  • _getResponse

    باطل

    تابع _getResponse به شکل زیر است:

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

    • کنترل کننده
    • درخواست کنید

      درخواست کنید

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<پاسخ>

  • _دسته

    باطل

    تابع _handle به شکل زیر است:

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

    • درخواست کنید

      درخواست کنید

    • کنترل کننده
    • برمی گرداند

      قول<پاسخ>

  • دسته

    باطل

    یک استراتژی درخواست را اجرا کنید و یک Promise را برمی‌گرداند که با یک Response حل می‌شود و همه تماس‌های مربوط به افزونه را فراخوانی می‌کند.

    هنگامی که یک نمونه استراتژی با Workbox workbox-routing.Route ثبت می شود، این روش به طور خودکار زمانی که مسیر مطابقت دارد فراخوانی می شود.

    از طرف دیگر، این روش را می توان در یک شنونده مستقل FetchEvent با ارسال آن به event.respondWith() استفاده کرد.

    تابع handle به نظر می رسد:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      قول<پاسخ>

  • handleAll

    باطل

    مشابه workbox-strategies.Strategy~handle ، اما به جای اینکه فقط یک Promise برگرداند که به یک Response آن را حل می کند، چندین وعده [response, done] را برمی گرداند، که در آن ( response ) قبلی معادل چیزی است که handle() برمی گرداند. و دومی یک Promise است که پس از تکمیل هر وعده‌ای که به event.waitUntil() به عنوان بخشی از اجرای استراتژی تکمیل شد، برطرف می‌شود.

    شما می توانید منتظر وعده done باشید تا مطمئن شوید که هر کار اضافی انجام شده توسط استراتژی (معمولاً پاسخ های حافظه پنهان) با موفقیت کامل می شود.

    تابع handleAll به شکل زیر است:

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

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      [قول <پاسخ>، قول<باطل>]

      چندین وعده [پاسخ، انجام شد] که می تواند برای تعیین زمان حل شدن پاسخ و همچنین زمانی که کنترل کننده تمام کار خود را تکمیل کرده است، استفاده شود.

StrategyHandler

کلاسی ایجاد می‌شود که هر بار که یک نمونه Strategy، workbox-strategies.Strategy~handle یا workbox-strategies.Strategy~handleAll چیزهایی که تمام اقدامات واکشی و حافظه پنهان را در اطراف تماس‌های پلاگین می‌پیچد و زمان «انجام شد» استراتژی را پیگیری می‌کند (یعنی همه موارد اضافه شده) event.waitUntil() وعده ها حل شده اند).

خواص

  • سازنده

    باطل

    یک نمونه جدید مرتبط با استراتژی و رویدادی که درخواست را مدیریت می کند ایجاد می کند.

    سازنده همچنین حالتی را که به هر یک از پلاگین هایی که این درخواست را مدیریت می کنند ارسال می کند مقداردهی اولیه می کند.

    تابع constructor به صورت زیر است:

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

  • رویداد

    ExtendableEvent

  • پارامترها

    هر اختیاری

  • درخواست کنید

    درخواست کنید

  • آدرس اینترنتی

    URL اختیاری است

  • cacheMatch

    باطل

    با استفاده از cacheName ، matchOptions و plugins تعریف‌شده روی شی استراتژی، درخواستی را از حافظه پنهان مطابقت می‌دهد (و همه روش‌های مربوط به تماس پلاگین را فراخوانی می‌کند).

    روش‌های چرخه عمر افزونه زیر هنگام استفاده از این روش فراخوانی می‌شوند:

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

    تابع cacheMatch به نظر می رسد:

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

    • کلید

      RequestInfo

      درخواست یا URL برای استفاده به عنوان کلید حافظه پنهان.

    • برمی گرداند

      قول<پاسخ>

      پاسخ منطبق، در صورت یافتن.

  • cachePut

    باطل

    یک جفت درخواست/پاسخ را با استفاده از cacheName و plugins تعریف‌شده روی شی استراتژی، در حافظه پنهان قرار می‌دهد (و همه روش‌های برگشت تماس پلاگین قابل اجرا را فراخوانی می‌کند).

    روش‌های چرخه عمر افزونه زیر هنگام استفاده از این روش فراخوانی می‌شوند:

    • cacheKeyWillBeUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    تابع cachePut به نظر می رسد:

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

    • کلید

      RequestInfo

      درخواست یا URL برای استفاده به عنوان کلید حافظه پنهان.

    • پاسخ

      پاسخ

      پاسخ به حافظه پنهان

    • برمی گرداند

      وعده<boolean>

      اگر cacheWillUpdate باعث شود پاسخ در حافظه پنهان نشود false و در غیر این صورت true .

  • نابود کردن

    باطل

    اجرای استراتژی را متوقف می‌کند و فوراً هرگونه وعده‌های منتظر مانده waitUntil() را حل می‌کند.

    تابع destroy به صورت زیر است:

    () => {...}

  • انجام شد در انتظار

    باطل

    یک وعده را برمی‌گرداند که پس از ارسال همه وعده‌ها به workbox-strategies.StrategyHandler~waitUntil حل شود.

    توجه: هر کاری که پس از تسویه doneWaiting() انجام می شود، باید به صورت دستی به متد waitUntil() رویداد منتقل شود (نه متد waitUntil() این handler)، در غیر این صورت تاپیک کارگر سرویس قبل از تکمیل کار شما کشته شود.

    تابع doneWaiting به شکل زیر است:

    () => {...}

    • برمی گرداند

      قول<باطل>

  • واکشی

    باطل

    با استفاده از fetchOptions (برای درخواست‌های غیر ناوبری) و plugins تعریف‌شده روی شی Strategy یک درخواست معین را واکشی می‌کند (و هر روش پاسخ به تماس پلاگین قابل اجرا را فراخوانی می‌کند).

    روش‌های چرخه عمر افزونه زیر هنگام استفاده از این روش فراخوانی می‌شوند:

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

    تابع fetch به نظر می رسد:

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

    • ورودی

      RequestInfo

      URL یا درخواست واکشی.

    • برمی گرداند

      قول<پاسخ>

  • fetchAndCachePut

    باطل

    this.fetch() را فراخوانی می کند و (در پس زمینه) this.cachePut() را روی پاسخ ایجاد شده توسط this.fetch() اجرا می کند.

    فراخوانی به this.cachePut() به طور خودکار this.waitUntil() را فراخوانی می کند، بنابراین شما مجبور نیستید به صورت دستی waitUntil() در رویداد فراخوانی کنید.

    تابع fetchAndCachePut به نظر می رسد:

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

    • ورودی

      RequestInfo

      درخواست یا آدرس اینترنتی برای واکشی و حافظه پنهان.

    • برمی گرداند

      قول<پاسخ>

  • getCacheKey

    باطل

    فهرست پلاگین‌ها را برای cacheKeyWillBeUsed بررسی می‌کند و هر یک از آن تماس‌های موجود را به ترتیب اجرا می‌کند. شیء Request نهایی که توسط آخرین افزونه برگردانده می شود به عنوان کلید کش برای خواندن و/یا نوشتن حافظه پنهان در نظر گرفته می شود. اگر هیچ پاسخ تماسی برای افزونه cacheKeyWillBeUsed ثبت نشده باشد، درخواست ارسال شده بدون تغییر بازگردانده می شود.

    تابع getCacheKey به شکل زیر است:

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

    • درخواست کنید

      درخواست کنید

    • حالت

      "خواندن"
      | "نوشتن"

    • برمی گرداند

      قول<درخواست>

  • پاسخ تماس دارد

    باطل

    اگر استراتژی حداقل یک افزونه با پاسخ تماس داده شده داشته باشد، درست برمی گردد.

    تابع hasCallback به نظر می رسد:

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

    • نام

      سی

      نام تماس برگشتی برای بررسی.

    • برمی گرداند

      بولی

  • iterateCallbacks

    باطل

    پاسخ به تماس را می‌پذیرد و تعداد تکرار تماس‌های پلاگین منطبق را برمی‌گرداند، که در آن هر تماس با وضعیت کنترل‌کننده فعلی قرار می‌گیرد (یعنی وقتی هر پاسخ تماسی را فراخوانی می‌کنید، هر پارامتر شی را که ارسال کنید، با وضعیت فعلی افزونه ادغام می‌شود).

    تابع iterateCallbacks به نظر می رسد:

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

    • نام

      سی

      نام پاسخ تماس برای اجرا

    • برمی گرداند

      Generator<NonNullable<indexedAccess>anyunknown>

  • اجرای تماس های برگشتی

    باطل

    همه فراخوان‌های پلاگین مطابق با نام داده شده را به ترتیب اجرا می‌کند و شیء پارامتر داده شده (ادغام شده با وضعیت فعلی افزونه) را به عنوان تنها آرگومان ارسال می‌کند.

    توجه: از آنجایی که این روش همه پلاگین ها را اجرا می کند، برای مواردی که باید قبل از فراخوانی تماس بعدی، مقدار برگشتی یک callback اعمال شود، مناسب نیست. برای نحوه رسیدگی به این مورد، workbox-strategies.StrategyHandler#iterateCallbacks در زیر ببینید.

    تابع runCallbacks به نظر می رسد:

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

    • نام

      سی

      نام تماس برگشتی برای اجرا در هر افزونه.

    • پارامتر

      Omit<indexedAccess "state"
      >

      شیئی که باید به عنوان اولین (و تنها) پارامتر هنگام اجرای هر پاسخ به تماس ارسال شود. این شی با وضعیت فعلی افزونه قبل از اجرای تماس مجدد ادغام خواهد شد.

    • برمی گرداند

      قول<باطل>

  • صبر کنید تا

    باطل

    یک قول به [extend lifetime-promises] https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises رویداد رویداد مرتبط با درخواست در حال رسیدگی (معمولاً FetchEvent ) اضافه می کند.

    توجه: می‌توانید منتظر workbox-strategies.StrategyHandler~doneWaiting برای دانستن اینکه چه زمانی تمام وعده‌های اضافه شده تسویه شده‌اند.

    تابع waitUntil به نظر می رسد:

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

    • قول دادن

      قول<T>

      وعده ای برای افزودن به وعده های طولانی مدت رویدادی که باعث ایجاد درخواست شده است.

    • برمی گرداند

      قول<T>

StrategyOptions

خواص

  • cacheName

    رشته اختیاری

  • fetchOptions

    RequestInit اختیاری است

  • matchOptions

    CacheQueryOptions اختیاری است

  • پلاگین ها

    WorkboxPlugin [] اختیاری است