工作箱策略

服務工作站初次推出時,就會出現一組常見的快取策略,快取策略是決定服務工作站在收到擷取事件後如何產生回應的模式。

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 還可讓您建立自訂策略。方法是從 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:傳回承諾,在傳遞至 waitUntil() 的所有承諾皆已設定時,此解決方案可解決。
  • destroy:停止執行策略,並立即解決所有待處理的 waitUntil() 承諾。

自訂快取網路種族策略

以下範例是以離線食譜集 (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);
          }
        }
      );
    });
  }
}

進階用法

如要在自己的擷取事件邏輯中使用策略,您可以使用策略類別,透過特定策略執行要求。

例如,如要使用過時-時重新驗證策略,您可以執行以下操作:

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

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

快取優先策略適用於已修訂的資產 (例如網址 /styles/example.a8f5f1.css),因為這類素材資源可以長期快取。

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

屬性

  • 建構函式

    void

    建立新的策略執行個體,並將所有記錄的選項屬性設為公開執行個體屬性。

    注意:如果自訂策略類別會擴充基本策略類別,且不需要超過這些屬性,則無須定義自己的建構函式。

    constructor 函式如下所示:

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

  • cacheName

    字串

  • fetchOptions

    RequestInit (選用)

  • matchOptions

    CacheQueryOptions 選用

  • 外掛程式
  • _等待完成

    void

    _awaitComplete 函式如下所示:

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

    • responseDone

      Promise<Response>

    • handler
    • 申請。

      要求

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _取得回應

    void

    _getResponse 函式如下所示:

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

    • returns

      Promise<Response>

  • 帳號

    void

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

    透過 Workbox workbox-routing.Route 註冊策略執行個體時,系統會在路徑比對相符時自動呼叫這個方法。

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

    handle 函式如下所示:

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

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle 類似,但前者不會傳回解析為 ResponsePromise,而是會傳回 [response, done] 承諾組合,其中前者 (response) 等同於 handle() 傳回的內容,後者則是在執行策略的過程中,新增至 event.waitUntil() 的任何承諾,皆可解決問題。

    您可以等待 done 承諾,確保策略執行的所有額外工作 (通常是快取回應) 都能順利完成。

    handleAll 函式如下所示:

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

    • returns

      [Promise<Response>,Promise<void>]

      [response, finished] 的組合,可用於判斷回應解析的時間,以及處理常式完成所有作業的時間。

CacheOnly

實作僅限快取的要求策略。

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

如果沒有相符的快取,這將擲回 WorkboxError 例外狀況。

屬性

  • 建構函式

    void

    建立新的策略執行個體,並將所有記錄的選項屬性設為公開執行個體屬性。

    注意:如果自訂策略類別會擴充基本策略類別,且不需要超過這些屬性,則無須定義自己的建構函式。

    constructor 函式如下所示:

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

  • cacheName

    字串

  • fetchOptions

    RequestInit (選用)

  • matchOptions

    CacheQueryOptions 選用

  • 外掛程式
  • _等待完成

    void

    _awaitComplete 函式如下所示:

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

    • responseDone

      Promise<Response>

    • handler
    • 申請。

      要求

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _取得回應

    void

    _getResponse 函式如下所示:

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

    • returns

      Promise<Response>

  • 帳號

    void

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

    透過 Workbox workbox-routing.Route 註冊策略執行個體時,系統會在路徑比對相符時自動呼叫這個方法。

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

    handle 函式如下所示:

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

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle 類似,但前者不會傳回解析為 ResponsePromise,而是會傳回 [response, done] 承諾組合,其中前者 (response) 等同於 handle() 傳回的內容,後者則是在執行策略的過程中,新增至 event.waitUntil() 的任何承諾,皆可解決問題。

    您可以等待 done 承諾,確保策略執行的所有額外工作 (通常是快取回應) 都能順利完成。

    handleAll 函式如下所示:

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

    • returns

      [Promise<Response>,Promise<void>]

      [response, finished] 的組合,可用於判斷回應解析的時間,以及處理常式完成所有作業的時間。

NetworkFirst

網路優先要求策略的實作。

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

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

屬性

  • 建構函式

    void

    constructor 函式如下所示:

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

  • cacheName

    字串

  • fetchOptions

    RequestInit (選用)

  • matchOptions

    CacheQueryOptions 選用

  • 外掛程式
  • _等待完成

    void

    _awaitComplete 函式如下所示:

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

    • responseDone

      Promise<Response>

    • handler
    • 申請。

      要求

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _取得回應

    void

    _getResponse 函式如下所示:

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

    • returns

      Promise<Response>

  • 帳號

    void

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

    透過 Workbox workbox-routing.Route 註冊策略執行個體時,系統會在路徑比對相符時自動呼叫這個方法。

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

    handle 函式如下所示:

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

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle 類似,但前者不會傳回解析為 ResponsePromise,而是會傳回 [response, done] 承諾組合,其中前者 (response) 等同於 handle() 傳回的內容,後者則是在執行策略的過程中,新增至 event.waitUntil() 的任何承諾,皆可解決問題。

    您可以等待 done 承諾,確保策略執行的所有額外工作 (通常是快取回應) 都能順利完成。

    handleAll 函式如下所示:

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

    • returns

      [Promise<Response>,Promise<void>]

      [response, finished] 的組合,可用於判斷回應解析的時間,以及處理常式完成所有作業的時間。

NetworkFirstOptions

屬性

  • cacheName

    字串 選用

  • fetchOptions

    RequestInit (選用)

  • matchOptions

    CacheQueryOptions 選用

  • networkTimeoutSeconds

    數字 選填

  • 外掛程式

    WorkboxPlugin[] 選用

NetworkOnly

僅限網路要求策略的實作。

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

如果網路要求失敗,系統會擲回 WorkboxError 例外狀況。

屬性

  • 建構函式

    void

    constructor 函式如下所示:

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

  • cacheName

    字串

  • fetchOptions

    RequestInit (選用)

  • matchOptions

    CacheQueryOptions 選用

  • 外掛程式
  • _等待完成

    void

    _awaitComplete 函式如下所示:

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

    • responseDone

      Promise<Response>

    • handler
    • 申請。

      要求

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _取得回應

    void

    _getResponse 函式如下所示:

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

    • returns

      Promise<Response>

  • 帳號

    void

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

    透過 Workbox workbox-routing.Route 註冊策略執行個體時,系統會在路徑比對相符時自動呼叫這個方法。

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

    handle 函式如下所示:

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

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle 類似,但前者不會傳回解析為 ResponsePromise,而是會傳回 [response, done] 承諾組合,其中前者 (response) 等同於 handle() 傳回的內容,後者則是在執行策略的過程中,新增至 event.waitUntil() 的任何承諾,皆可解決問題。

    您可以等待 done 承諾,確保策略執行的所有額外工作 (通常是快取回應) 都能順利完成。

    handleAll 函式如下所示:

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

    • returns

      [Promise<Response>,Promise<void>]

      [response, finished] 的組合,可用於判斷回應解析的時間,以及處理常式完成所有作業的時間。

NetworkOnlyOptions

屬性

  • fetchOptions

    RequestInit (選用)

  • networkTimeoutSeconds

    數字 選填

  • 外掛程式

    WorkboxPlugin[] 選用

StaleWhileRevalidate

過時的時重新驗證要求策略的實作。

系統會同時從快取和網路要求資源。如果有快取版本,策略就會回應,否則會等待網路回應。每次成功要求時,系統都會透過網路回應更新快取。

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

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

屬性

  • 建構函式

    void

    constructor 函式如下所示:

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

  • cacheName

    字串

  • fetchOptions

    RequestInit (選用)

  • matchOptions

    CacheQueryOptions 選用

  • 外掛程式
  • _等待完成

    void

    _awaitComplete 函式如下所示:

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

    • responseDone

      Promise<Response>

    • handler
    • 申請。

      要求

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _取得回應

    void

    _getResponse 函式如下所示:

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

    • returns

      Promise<Response>

  • 帳號

    void

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

    透過 Workbox workbox-routing.Route 註冊策略執行個體時,系統會在路徑比對相符時自動呼叫這個方法。

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

    handle 函式如下所示:

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

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle 類似,但前者不會傳回解析為 ResponsePromise,而是會傳回 [response, done] 承諾組合,其中前者 (response) 等同於 handle() 傳回的內容,後者則是在執行策略的過程中,新增至 event.waitUntil() 的任何承諾,皆可解決問題。

    您可以等待 done 承諾,確保策略執行的所有額外工作 (通常是快取回應) 都能順利完成。

    handleAll 函式如下所示:

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

    • returns

      [Promise<Response>,Promise<void>]

      [response, finished] 的組合,可用於判斷回應解析的時間,以及處理常式完成所有作業的時間。

Strategy

一種抽象基本類別,所有其他策略類別都必須從:

屬性

  • 建構函式

    void

    建立新的策略執行個體,並將所有記錄的選項屬性設為公開執行個體屬性。

    注意:如果自訂策略類別會擴充基本策略類別,且不需要超過這些屬性,則無須定義自己的建構函式。

    constructor 函式如下所示:

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

  • cacheName

    字串

  • fetchOptions

    RequestInit (選用)

  • matchOptions

    CacheQueryOptions 選用

  • 外掛程式
  • _等待完成

    void

    _awaitComplete 函式如下所示:

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

    • responseDone

      Promise<Response>

    • handler
    • 申請。

      要求

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _取得回應

    void

    _getResponse 函式如下所示:

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

    • returns

      Promise<Response>

  • _帳號代碼

    void

    _handle 函式如下所示:

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

    • returns

      Promise<Response>

  • 帳號

    void

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

    透過 Workbox workbox-routing.Route 註冊策略執行個體時,系統會在路徑比對相符時自動呼叫這個方法。

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

    handle 函式如下所示:

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

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle 類似,但前者不會傳回解析為 ResponsePromise,而是會傳回 [response, done] 承諾組合,其中前者 (response) 等同於 handle() 傳回的內容,後者則是在執行策略的過程中,新增至 event.waitUntil() 的任何承諾,皆可解決問題。

    您可以等待 done 承諾,確保策略執行的所有額外工作 (通常是快取回應) 都能順利完成。

    handleAll 函式如下所示:

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

    • returns

      [Promise<Response>,Promise<void>]

      [response, finished] 的組合,可用於判斷回應解析的時間,以及處理常式完成所有作業的時間。

StrategyHandler

每次 Strategy 執行個體呼叫 workbox-strategies.Strategy~handleworkbox-strategies.Strategy~handleAll 時會建立類別,該類別會納入外掛程式回呼的所有擷取和快取動作,並追蹤策略「完成」的時間 (即所有新增的 event.waitUntil() 承諾均已解決)。

屬性

  • 建構函式

    void

    建立與處理要求的傳遞策略和事件相關聯的新執行個體。

    建構函式也會初始化狀態,以便傳送給處理這項要求的每個外掛程式。

    constructor 函式如下所示:

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

  • event

    ExtendableEvent

  • params

    任何選填

  • 申請。

    要求

  • url

    網址 (選填)

  • cacheMatch

    void

    使用策略物件上定義的 cacheNamematchOptionsplugins 比對來自快取的要求,並叫用任何適用的外掛程式回呼方法。

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

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

    cacheMatch 函式如下所示:

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

    • 金鑰

      RequestInfo

      要用做快取金鑰的要求或網址。

    • returns

      Promise<Response>

      相符的回應 (如有)。

  • cachePut

    void

    使用策略物件上定義的 cacheNameplugins,將要求/回應組合放入快取,並叫用任何適用的外掛程式回呼方法。

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

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

    cachePut 函式如下所示:

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

    • 金鑰

      RequestInfo

      要用做快取金鑰的要求或網址。

    • 則回應

      回應

      快取的回應。

    • returns

      Promise<boolean>

      false 表示 cacheWillUpdate 導致回應無法快取,否則傳回 true

  • destroy

    void

    停止執行策略,並立即解決所有待處理的 waitUntil() 承諾。

    destroy 函式如下所示:

    ()=> {...}

  • doneWaiting

    void

    傳回會在所有傳遞至 workbox-strategies.StrategyHandler~waitUntil 的承諾已設定時傳回的承諾。

    注意:在 doneWaiting() 結算後完成的所有工作都應手動傳遞至事件的 waitUntil() 方法 (而非此處理常式的 waitUntil() 方法),否則系統會在工作完成前終止我的 Service Worker 執行緒。

    doneWaiting 函式如下所示:

    ()=> {...}

    • returns

      Promise<void>

  • fetch

    void

    使用 fetchOptions (針對非導覽要求) 和 Strategy 物件中定義的 plugins 擷取特定要求,並叫用任何適用的外掛程式回呼方法。

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

    • 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"
      |"撰寫"

    • returns

      Promise<Request>

  • 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

      每個外掛程式內要執行的回呼名稱。

    • 參數

      省略<indexedAccess"state"
      >

      執行每個回呼時,要做為第一個 (且僅限) 參數的物件。系統會在執行回呼前,將這個物件與目前外掛程式的狀態合併。

    • returns

      Promise<void>

  • waitUntil

    void

    針對與處理要求相關聯的事件事件 (通常是 FetchEvent) 加上 https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises 的承諾。

    注意:您可以等待 workbox-strategies.StrategyHandler~doneWaiting 得知所有新增的承諾何時均已完成。

    waitUntil 函式如下所示:

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

    • 承諾

      Promise<T>

      針對觸發要求的事件,提供延長生命週期承諾的承諾。

    • returns

      Promise<T>

StrategyOptions

屬性

  • cacheName

    字串 選用

  • fetchOptions

    RequestInit (選用)

  • matchOptions

    CacheQueryOptions 選用

  • 外掛程式

    WorkboxPlugin[] 選用