工作箱策略

服務工作者剛推出時，一組常見的快取策略就隨之出現。快取策略是一種模式，可決定服務工作者在收到擷取事件後，如何產生回應。

workbox-strategies 提供最常見的快取策略，讓您輕鬆在服務工作者中套用這些策略。

除了 Workbox 支援的策略之外，我們不會進一步詳述其他策略，但您可以參閱離線食譜進一步瞭解。

使用策略

在以下範例中，我們將說明如何搭配使用 Workbox 快取策略和 workbox-routing。您可以為每個策略定義一些選項，詳情請參閱本文「設定策略」一節。

在「進階使用方式」一節中，我們將說明如何在不使用 workbox-routing 的情況下，直接使用快取策略。

Stale-While-Revalidate

stale-while-revalidate 模式可讓您盡快使用快取回應 (如有) 回應要求，如果沒有快取回應，則會改用網路要求。然後使用網路要求更新快取。與部分實作的舊資料重新驗證策略不同，此策略一律會提出重新驗證要求，無論快取回應的時間長短為何。

這是相當常見的策略，因為應用程式不一定要使用最新的資源。

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

僅快取

僅快取策略可確保從快取取得回應。這個選項在 Workbox 中較不常用，但如果您有自己的預先快取步驟，這個選項可能會很實用。

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 建立自訂策略。您可以透過匯入 workbox-strategies 中的 Strategy 基本類別，然後擴充該類別，達到這項目的：

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

在本例中，handle() 會用作要求策略，用來定義特定處理邏輯。您可以使用兩種要求策略：

• handle()：執行要求策略，並傳回會透過 Response 解析的 Promise，叫用所有相關外掛程式回呼。
• 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()，並在背景執行 fetch() 產生的回應。cachePut()
• hasCallback：將回呼做為輸入，如果策略至少包含一個含有指定回呼的外掛程式，就會傳回 true。
• runCallbacks：依序執行所有與指定名稱相符的外掛程式回呼，並將指定的參數物件 (與目前的外掛程式狀態合併) 傳遞為唯一的引數。
• iterateCallbacks：接受回呼並傳回符合的迴圈外掛程式回呼，其中每個回呼都會包裝目前的處理常態 (也就是在呼叫每個回呼時，您傳遞的任何物件參數都會與外掛程式的目前狀態合併)。
• waitUntil：將應許諾新增至事件的延長生命週期應許諾，該事件與正在處理的要求相關聯 (通常為 FetchEvent)。
• doneWaiting：傳回 Promise，當傳遞至 waitUntil() 的所有 Promise 都已完成時，此 Promise 會解析。
• destroy：停止執行策略，並立即解決任何待處理的 waitUntil() 承諾。

注意：請參閱 StrategyHandler 的原始碼實作，查看每個動作所接受的所有參數

自訂快取網路競爭策略

以下範例是根據離線食譜 (Workbox 未提供) 中的「cache-network-race」建立，但更進一步，在網路要求成功後一律更新快取。這是使用多個動作的較複雜策略範例。

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

實作快取優先的請求策略。

快取優先策略適用於已修訂的素材資源，例如 /styles/example.a8f5f1.css 等網址，因為這些素材資源可長時間快取。

如果網路要求失敗，且沒有相符的快取，系統會擲回 WorkboxError 例外狀況。

屬性

• 建構函式

  void

  建立策略的新例項，並將所有已記錄的選項屬性設為公開的例項屬性。

  注意：如果自訂策略類別擴充了基礎 Strategy 類別，且不需要超過這些屬性，則不需要定義自己的建構函式。

  constructor 函式如下所示：

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

  • 選項

    StrategyOptions 選填

  • returns

    CacheFirst

• cacheName

  字串

• fetchOptions

  RequestInit 選填

• matchOptions

  CacheQueryOptions 選填

• 外掛程式

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函式如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

  _getResponse 函式如下所示：

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

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<Response>

• 帳號

  void

  執行要求策略，並傳回會透過 Response 解析的 Promise，叫用所有相關外掛程式回呼。

  當策略例項與 Workbox workbox-routing.Route 註冊時，系統會在路徑相符時自動呼叫這個方法。

  或者，您也可以將這個方法傳遞至 event.respondWith()，以便在獨立的 FetchEvent 事件監聽器中使用。

  handle 函式如下所示：

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

  • 選項

    FetchEvent | HandlerCallbackOptions

    FetchEvent 或含有下列屬性的物件。

  • returns

    Promise<Response>

• handleAll

  void

  與 workbox-strategies.Strategy~handle 類似，但它不會傳回解析為 Response 的 Promise，而是會傳回 [response, done] 承諾的元組，其中前者 (response) 等同於 handle() 傳回的內容，後者則是承諾，一旦執行策略時新增至 event.waitUntil() 的任何承諾完成，就會解析。

  您可以等待 done 應許，確保策略執行的任何額外工作 (通常是快取回應) 都能順利完成。

  handleAll 函式如下所示：

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

  • 選項

    FetchEvent | HandlerCallbackOptions

    FetchEvent 或含有下列屬性的物件。

  • returns

    [Promise<Response>, Promise<void>]

    由 [response, done] 應許組成的元組，可用於判斷回應何時解析，以及處理程序何時完成所有工作。

CacheOnly

實作僅快取要求策略。

如果您想充分利用任何 Workbox 外掛程式，這個類別就非常實用。

如果沒有相符的快取，系統會擲回 WorkboxError 例外狀況。

屬性

• 建構函式

  void

  建立策略的新例項，並將所有已記錄的選項屬性設為公開的例項屬性。

  注意：如果自訂策略類別擴充了基礎 Strategy 類別，且不需要超過這些屬性，則不需要定義自己的建構函式。

  constructor 函式如下所示：

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

  • 選項

    StrategyOptions 選填

  • returns

    CacheOnly

• cacheName

  字串

• fetchOptions

  RequestInit 選填

• matchOptions

  CacheQueryOptions 選填

• 外掛程式

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函式如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

  _getResponse 函式如下所示：

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

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<Response>

• 帳號

  void

  執行要求策略，並傳回 Promise，該 Promise 會與 Response 解析，並叫用所有相關外掛程式回呼。

  當策略例項與 Workbox workbox-routing.Route 註冊時，系統會在路徑相符時自動呼叫這個方法。

  或者，您也可以將這個方法傳遞至 event.respondWith()，以便在獨立的 FetchEvent 事件監聽器中使用。

  handle 函式如下所示：

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

  • 選項

    FetchEvent | HandlerCallbackOptions

    FetchEvent 或含有下列屬性的物件。

  • returns

    Promise<Response>

• handleAll

  void

  與 workbox-strategies.Strategy~handle 類似，但它不會傳回解析為 Response 的 Promise，而是會傳回 [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[]

• _awaitComplete

  void

  _awaitComplete 函式如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

  _getResponse 函式如下所示：

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

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<Response>

• 帳號

  void

  執行要求策略，並傳回 Promise，該 Promise 會與 Response 解析，並叫用所有相關外掛程式回呼。

  當策略例項與 Workbox workbox-routing.Route 註冊時，系統會在路徑相符時自動呼叫這個方法。

  或者，您也可以將這個方法傳遞至 event.respondWith()，以便在獨立的 FetchEvent 事件監聽器中使用。

  handle 函式如下所示：

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

  • 選項

    FetchEvent | HandlerCallbackOptions

    FetchEvent 或含有下列屬性的物件。

  • returns

    Promise<Response>

• handleAll

  void

  與 workbox-strategies.Strategy~handle 類似，但它不會傳回解析為 Response 的 Promise，而是會傳回 [response, done] 承諾的元組，其中前者 (response) 等同於 handle() 傳回的內容，後者則是承諾，一旦執行策略時新增至 event.waitUntil() 的任何承諾完成，就會解析。

  您可以等待 done 應許，確保策略執行的任何額外工作 (通常是快取回應) 都能順利完成。

  handleAll 函式如下所示：

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

  • 選項

    FetchEvent | HandlerCallbackOptions

    FetchEvent 或含有下列屬性的物件。

  • returns

    [Promise<Response>, Promise<void>]

    由 [response, done] 應許組成的元組，可用於判斷回應何時解析，以及處理程序何時完成所有工作。

NetworkFirstOptions

屬性

• cacheName

  string 選填

• fetchOptions

  RequestInit 選填

• matchOptions

  CacheQueryOptions 選填

• networkTimeoutSeconds

  號碼 選填

• 外掛程式

  WorkboxPlugin[] 選填

NetworkOnly

實作僅限網路要求策略。

如果您想充分利用任何 Workbox 外掛程式，這個類別就非常實用。

如果網路要求失敗，這會擲回 WorkboxError 例外狀況。

屬性

• 建構函式

  void

  constructor 函式如下所示：

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

  • 選項

    NetworkOnlyOptions 選填

  • returns

    NetworkOnly

• cacheName

  字串

• fetchOptions

  RequestInit 選填

• matchOptions

  CacheQueryOptions 選填

• 外掛程式

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函式如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

  _getResponse 函式如下所示：

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

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<Response>

• 帳號

  void

  執行要求策略，並傳回 Promise，該 Promise 會透過 Response 解析，並叫用所有相關外掛程式回呼。

  當策略例項與 Workbox workbox-routing.Route 註冊時，系統會在路徑相符時自動呼叫這個方法。

  或者，您也可以將這個方法傳遞至 event.respondWith()，以便在獨立的 FetchEvent 事件監聽器中使用。

  handle 函式如下所示：

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

  • 選項

    FetchEvent | HandlerCallbackOptions

    FetchEvent 或含有下列屬性的物件。

  • returns

    Promise<Response>

• handleAll

  void

  與 workbox-strategies.Strategy~handle 類似，但它不會傳回解析為 Response 的 Promise，而是會傳回 [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

實作stale-while-revalidate 要求策略。

系統會同時從快取和網路要求資源。如果快取版本可用，策略會以該版本回應，否則會等待網路回應。每次成功要求時，快取都會更新網路回應。

根據預設，這項策略會快取狀態碼為 200 的回應，以及不透明回應。不透明回應是跨來源要求，但回應不支援 CORS。

如果網路要求失敗，且沒有相符的快取，系統會擲回 WorkboxError 例外狀況。

屬性

• 建構函式

  void

  constructor 函式如下所示：

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

  • 選項

    StrategyOptions 選填

  • returns

    StaleWhileRevalidate

• cacheName

  字串

• fetchOptions

  RequestInit 選填

• matchOptions

  CacheQueryOptions 選填

• 外掛程式

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函式如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

  _getResponse 函式如下所示：

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

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<Response>

• 帳號

  void

  執行要求策略，並傳回會透過 Response 解析的 Promise，叫用所有相關外掛程式回呼。

  當策略例項與 Workbox workbox-routing.Route 註冊時，系統會在路徑相符時自動呼叫這個方法。

  或者，您也可以將這個方法傳遞至 event.respondWith()，以便在獨立的 FetchEvent 事件監聽器中使用。

  handle 函式如下所示：

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

  • 選項

    FetchEvent | HandlerCallbackOptions

    FetchEvent 或含有下列屬性的物件。

  • returns

    Promise<Response>

• handleAll

  void

  與 workbox-strategies.Strategy~handle 類似，但它不會傳回解析為 Response 的 Promise，而是會傳回 [response, done] 承諾的元組，其中前者 (response) 等同於 handle() 傳回的內容，後者則是承諾，一旦執行策略時新增至 event.waitUntil() 的任何承諾完成，就會解析。

  您可以等待 done 應許，確保策略執行的任何額外工作 (通常是快取回應) 都能順利完成。

  handleAll 函式如下所示：

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

  • 選項

    FetchEvent | HandlerCallbackOptions

    FetchEvent 或含有下列屬性的物件。

  • returns

    [Promise<Response>, Promise<void>]

    由 [response, done] 承諾組成的元組，可用於判斷回應何時解析，以及處理程序何時完成所有工作。

Strategy

所有其他策略類別都必須從以下抽象基本類別擴充：

屬性

• 建構函式

  void

  建立策略的新例項，並將所有已記錄的選項屬性設為公開的例項屬性。

  注意：如果自訂策略類別擴充了基礎 Strategy 類別，且不需要超過這些屬性，則不需要定義自己的建構函式。

  constructor 函式如下所示：

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

  • 選項

    StrategyOptions 選填

  • returns

    策略

• cacheName

  字串

• fetchOptions

  RequestInit 選填

• matchOptions

  CacheQueryOptions 選填

• 外掛程式

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函式如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

  _getResponse 函式如下所示：

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

  • handler

    StrategyHandler

  • 申請。

    要求

  • 活動

    ExtendableEvent

  • returns

    Promise<Response>

• _handle

  void

  _handle 函式如下所示：

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

  • 申請。

    要求

  • handler

    StrategyHandler

  • returns

    Promise<Response>

• 帳號

  void

  執行要求策略，並傳回 Promise，該 Promise 會與 Response 解析，並叫用所有相關外掛程式回呼。

  當策略例項與 Workbox workbox-routing.Route 註冊時，系統會在路徑相符時自動呼叫這個方法。

  或者，您也可以將這個方法傳遞至 event.respondWith()，以便在獨立的 FetchEvent 事件監聽器中使用。

  handle 函式如下所示：

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

  • 選項

    FetchEvent | HandlerCallbackOptions

    FetchEvent 或含有下列屬性的物件。

  • returns

    Promise<Response>

• handleAll

  void

  與 workbox-strategies.Strategy~handle 類似，但它不會傳回解析為 Response 的 Promise，而是會傳回 [response, done] 承諾的元組，其中前者 (response) 等同於 handle() 傳回的內容，後者則是承諾，一旦執行策略時新增至 event.waitUntil() 的任何承諾完成，就會解析。

  您可以等待 done 應許，確保策略執行的任何額外工作 (通常是快取回應) 都能順利完成。

  handleAll 函式如下所示：

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

  • 選項

    FetchEvent | HandlerCallbackOptions

    FetchEvent 或含有下列屬性的物件。

  • returns

    [Promise<Response>, Promise<void>]

    由 [response, done] 應許組成的元組，可用於判斷回應何時解析，以及處理程序何時完成所有工作。

StrategyHandler

每次 Strategy 例項呼叫 workbox-strategies.Strategy~handle 或 workbox-strategies.Strategy~handleAll 時，就會建立的類別，可在插件回呼中包裝所有擷取和快取動作，並追蹤策略何時「完成」(也就是所有新增的 event.waitUntil() 承諾都已解析)。

屬性

• 建構函式

  void

  建立與傳入策略和處理要求的事件相關聯的新例項。

  建構函式也會初始化狀態，並將其傳遞給處理此要求的每個外掛程式。

  constructor 函式如下所示：

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

  • 策略

    策略

  • 選項

    HandlerCallbackOptions

  • returns

    StrategyHandler

• 活動

  ExtendableEvent

• 參數

  任何選填

• 申請。

  要求

• 網址

  網址 (選填)

• cacheMatch

  void

  使用在策略物件中定義的 cacheName、matchOptions 和 plugins，比對快取中的要求 (並叫用任何適用的外掛程式回呼方法)。

  使用這個方法時，系統會叫用下列外掛程式生命週期方法：

  • cacheKeyWillBeUsed()
  • cachedResponseWillBeUsed()

  cacheMatch 函式如下所示：

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

  • 金鑰

    RequestInfo

    要用來做為快取鍵的要求或網址。

  • returns

    Promise<Response>

    相符的回應 (如有)。

• cachePut

  void

  使用策略物件中定義的 cacheName 和 plugins，將請求/回應組合放入快取 (並叫用任何適用的外掛程式回呼方法)。

  使用這個方法時，系統會叫用下列外掛程式生命週期方法：

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

  cachePut 函式如下所示：

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

  • 金鑰

    RequestInfo

    要用來做為快取鍵的要求或網址。

  • 回應

    回應

    快取的回應。

  • returns

    Promise<boolean>

    如果 cacheWillUpdate 導致回應未快取，則為 false；否則為 true。

• destroy

  void

  停止執行策略，並立即解析任何待處理的 waitUntil() 承諾。

  destroy 函式如下所示：

  () => {...}

• doneWaiting

  void

  傳回 promise，當傳遞至 workbox-strategies.StrategyHandler~waitUntil 的所有 promise 已完成時，這個 promise 會解析。

  注意：在 doneWaiting() 完成後執行的任何工作，都應手動傳遞至事件的 waitUntil() 方法 (而非這個處理常式 waitUntil() 方法)，否則服務工作者執行緒可能會在工作完成前遭到終止。

  doneWaiting 函式如下所示：

  () => {...}

  • returns

    Promise<void>

• 擷取

  void

  使用 fetchOptions (用於非導覽要求) 和 plugins (在 Strategy 物件上定義)，擷取指定要求 (並叫用任何適用的外掛程式回呼方法)。

  使用這個方法時，系統會叫用下列外掛程式生命週期方法：

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

  fetch 函式如下所示：

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

  • 輸入

    RequestInfo

    要擷取的網址或要求。

  • returns

    Promise<Response>

• fetchAndCachePut

  void

  呼叫 this.fetch()，並在背景對 this.fetch() 產生的回應執行 this.cachePut()。

  對 this.cachePut() 的呼叫會自動叫用 this.waitUntil()，因此您不必在事件上手動呼叫 waitUntil()。

  fetchAndCachePut 函式如下所示：

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

  • 輸入

    RequestInfo

    要擷取及快取的要求或網址。

  • returns

    Promise<Response>

• getCacheKey

  void

  檢查 cacheKeyWillBeUsed 回呼的外掛程式清單，並依序執行找到的任何回呼。最後一個外掛程式傳回的最終 Request 物件會視為快取讀取和/或寫入的快取索引鍵。如果未註冊任何 cacheKeyWillBeUsed 外掛程式回呼，則會傳回未經修改的傳入要求

  getCacheKey 函式如下所示：

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

  • 申請。

    要求

  • 模式

    「read」
     | 「write」
    

  • returns

    Promise<Request>

• hasCallback

  void

  如果策略至少有一個含有指定回呼的外掛程式，就會傳回 true。

  hasCallback 函式如下所示：

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

  • 名稱

    C

    要檢查的回呼名稱。

  • returns

    布林值

• iterateCallbacks

  void

  接受回呼並傳回符合的插件回呼可迭代項目，其中每個回呼都會包裝目前的處理常態 (也就是當您呼叫每個回呼時，您傳遞的任何物件參數都會與插件的目前狀態合併)。

  iterateCallbacks 函式如下所示：

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

  • 名稱

    C

    要執行的回呼名稱

  • returns

    Generator<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

  將應許條件新增至與所處理要求 (通常為 FetchEvent) 相關聯的事件事件的 [extend lifetime promises]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises。

  注意：您可以等待 workbox-strategies.StrategyHandler~doneWaiting，瞭解所有新增的承諾何時已完成。

  waitUntil 函式如下所示：

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

  • promise

    Promise<T>

    承諾將事件的延長生命週期承諾加入觸發要求的事件。

  • returns

    Promise<T>

StrategyOptions

屬性

• cacheName

  string 選填

• fetchOptions

  RequestInit 選填

• matchOptions

  CacheQueryOptions 選填

• 外掛程式

  WorkboxPlugin[] 選填