Service Worker 剛推出時,有一套常見的快取策略 。快取策略是一種模式,可決定 Service Worker 的方式 收到擷取事件後會產生回應。
workbox-strategies
提供最常見的快取策略,
可在 Service Worker 中套用
除了 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()
);
優先快取 (快取改回網路)
離線網頁應用程式非常仰賴快取,但對於 可逐步快取 優先快取 是最佳選擇
如果快取中有 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 隨附一組外掛程式,可搭配這些策略使用。
- 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()
並在回應的背景中執行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);
}
}
);
});
}
}
進階用法
如果您想在自己的擷取事件邏輯中使用這些策略,可以 使用策略類別,透過特定策略執行要求。
舉例來說,如要使用過時的重新驗證策略, 包括:
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) => {...}
-
選項
-
returns
-
-
cacheName
字串
-
fetchOptions
RequestInit 選用
-
matchOptions
CacheQueryOptions 選用
-
外掛程式
-
_awaitComplete
void
_awaitComplete
函式如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
承諾<void>
-
-
_getResponse
void
_getResponse
函式如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
Promise<Response>
-
-
帳號
void
執行要求策略,並傳回將解析為以下值的
Promise
Response
,叫用所有相關外掛程式回呼。使用 Workbox 註冊策略執行個體時
workbox-routing.Route
,此方法會自動執行 。或者,此方法可用於獨立的
FetchEvent
中 方法是將其傳遞至event.respondWith()
。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>]
[回應,完成]的元組 承諾可用於判斷回覆何時解決 以及處理常式完成所有工作時。
-
屬性
-
建構函式
void
建立新的策略例項,並設定所有記錄選項 視為公開執行個體屬性。
注意:如果自訂策略類別擴充了基本 Strategy 類別,且 不需要超過這些屬性,因此不需要定義專屬的屬性 建構函式中設定。
constructor
函式如下所示:(options?: StrategyOptions) => {...}
-
選項
-
returns
-
-
cacheName
字串
-
fetchOptions
RequestInit 選用
-
matchOptions
CacheQueryOptions 選用
-
外掛程式
-
_awaitComplete
void
_awaitComplete
函式如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
承諾<void>
-
-
_getResponse
void
_getResponse
函式如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
Promise<Response>
-
-
帳號
void
執行要求策略,並傳回將解析為以下值的
Promise
Response
,叫用所有相關外掛程式回呼。使用 Workbox 註冊策略執行個體時
workbox-routing.Route
,此方法會自動執行 。或者,此方法可用於獨立的
FetchEvent
中 方法是將其傳遞至event.respondWith()
。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>]
[回應,完成]的元組 承諾可用於判斷回覆何時解決 以及處理常式完成所有工作時。
-
NetworkFirst
根據預設,這項策略會快取狀態碼為 200 的回應,如 以及不透明回應。 不透明回應是跨來源要求,其回應並非 支援 CORS。
如果網路要求失敗,且沒有相符的快取,
WorkboxError
例外狀況。
屬性
-
建構函式
void
constructor
函式如下所示:(options?: NetworkFirstOptions) => {...}
-
選項
-
returns
-
-
cacheName
字串
-
fetchOptions
RequestInit 選用
-
matchOptions
CacheQueryOptions 選用
-
外掛程式
-
_awaitComplete
void
_awaitComplete
函式如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
承諾<void>
-
-
_getResponse
void
_getResponse
函式如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
Promise<Response>
-
-
帳號
void
執行要求策略,並傳回將解析為以下值的
Promise
Response
,叫用所有相關外掛程式回呼。使用 Workbox 註冊策略執行個體時
workbox-routing.Route
,此方法會自動執行 。或者,此方法可用於獨立的
FetchEvent
中 方法是將其傳遞至event.respondWith()
。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>]
[回應,完成]的元組 承諾可用於判斷回覆何時解決 以及處理常式完成所有工作時。
-
NetworkFirstOptions
屬性
-
cacheName
string optional
-
fetchOptions
RequestInit 選用
-
matchOptions
CacheQueryOptions 選用
-
networkTimeoutSeconds
編號 選填
-
外掛程式
WorkboxPlugin[] 選用
屬性
-
建構函式
void
constructor
函式如下所示:(options?: NetworkOnlyOptions) => {...}
-
選項
-
returns
-
-
cacheName
字串
-
fetchOptions
RequestInit 選用
-
matchOptions
CacheQueryOptions 選用
-
外掛程式
-
_awaitComplete
void
_awaitComplete
函式如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
承諾<void>
-
-
_getResponse
void
_getResponse
函式如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
Promise<Response>
-
-
帳號
void
執行要求策略,並傳回將解析為以下值的
Promise
Response
,叫用所有相關外掛程式回呼。使用 Workbox 註冊策略執行個體時
workbox-routing.Route
,此方法會自動執行 。或者,此方法可用於獨立的
FetchEvent
中 方法是將其傳遞至event.respondWith()
。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>]
[回應,完成]的元組 承諾可用於判斷回覆何時解決 以及處理常式完成所有工作時。
-
NetworkOnlyOptions
屬性
-
fetchOptions
RequestInit 選用
-
networkTimeoutSeconds
編號 選填
-
外掛程式
WorkboxPlugin[] 選用
StaleWhileRevalidate
實作 過時的重新驗證 要求策略。
快取和網路會同時要求資源。 策略將傳回快取版本 (如果有的話),否則 等待網路回應。快取會透過網路回應更新 回應要求
根據預設,這項策略會快取狀態碼為 200 的回應,如 以及不透明回應。 不透明回應是跨來源要求,其回應並非 支援 CORS。
如果網路要求失敗,且沒有相符的快取,
WorkboxError
例外狀況。
屬性
-
建構函式
void
constructor
函式如下所示:(options?: StrategyOptions) => {...}
-
選項
-
returns
-
-
cacheName
字串
-
fetchOptions
RequestInit 選用
-
matchOptions
CacheQueryOptions 選用
-
外掛程式
-
_awaitComplete
void
_awaitComplete
函式如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
承諾<void>
-
-
_getResponse
void
_getResponse
函式如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
Promise<Response>
-
-
帳號
void
執行要求策略,並傳回將解析為以下值的
Promise
Response
,叫用所有相關外掛程式回呼。使用 Workbox 註冊策略執行個體時
workbox-routing.Route
,此方法會自動執行 。或者,此方法可用於獨立的
FetchEvent
中 方法是將其傳遞至event.respondWith()
。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>]
[回應,完成]的元組 承諾可用於判斷回覆何時解決 以及處理常式完成所有工作時。
-
Strategy
抽象基本類別,所有其他策略類別都必須從下列項目擴充:
屬性
-
建構函式
void
建立新的策略例項,並設定所有記錄選項 視為公開執行個體屬性。
注意:如果自訂策略類別擴充了基本 Strategy 類別,且 不需要超過這些屬性,因此不需要定義專屬的屬性 建構函式中設定。
constructor
函式如下所示:(options?: StrategyOptions) => {...}
-
選項
-
returns
-
-
cacheName
字串
-
fetchOptions
RequestInit 選用
-
matchOptions
CacheQueryOptions 選用
-
外掛程式
-
_awaitComplete
void
_awaitComplete
函式如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
承諾<void>
-
-
_getResponse
void
_getResponse
函式如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
申請。
要求
-
活動
ExtendableEvent
-
returns
Promise<Response>
-
-
_handle
void
_handle
函式如下所示:(request: Request, handler: StrategyHandler) => {...}
-
申請。
要求
-
handler
-
returns
Promise<Response>
-
-
帳號
void
執行要求策略,並傳回將解析為以下值的
Promise
Response
,叫用所有相關外掛程式回呼。使用 Workbox 註冊策略執行個體時
workbox-routing.Route
,此方法會自動執行 。或者,此方法可用於獨立的
FetchEvent
中 方法是將其傳遞至event.respondWith()
。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>]
[回應,完成]的元組 承諾可用於判斷回覆何時解決 以及處理常式完成所有工作時。
-
StrategyHandler
每次 Strategy 執行個體呼叫時都會建立的類別
workbox-strategies.Strategy~handle
或
workbox-strategies.Strategy~handleAll
,可納入所有擷取和
快取動作與外掛程式回呼相關的動作,並記錄
「完成」(也就是所有新增的 event.waitUntil()
承諾都已解決)。
屬性
-
建構函式
void
建立與傳遞的策略和事件相關聯的新例項 處理要求的實際事件
建構函式也會初始化要傳遞至各個 客戶的 處理這項要求的外掛程式
constructor
函式如下所示:(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
策略
-
returns
-
-
活動
ExtendableEvent
-
參數
任何選用
-
申請。
要求
-
網址
網址 (選填)
-
cacheMatch
void
比對快取的要求 (並叫用任何適用的外掛程式) 回呼方法) 使用
cacheName
、matchOptions
和plugins
根據策略物件定義使用這個方法時,系統會叫用下列外掛程式生命週期方法:
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
cacheMatch
函式如下所示:(key: RequestInfo) => {...}
-
金鑰
RequestInfo
要當做快取金鑰的要求或網址。
-
returns
Promise<Response>
相符的回應 (如有)。
-
cachePut
void
在快取中加入要求/回應組合 (並叫用任何適用的 外掛程式回呼方法) 使用在以下 SDK 中定義的
cacheName
和plugins
: 策略物件使用這個方法時,系統會叫用下列外掛程式生命週期方法:
- 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
承諾<void>
-
-
擷取
void
擷取指定要求 (並叫用任何適用的外掛程式回呼 方法) 使用
fetchOptions
(適用於非導覽要求) 和Strategy
物件上定義的plugins
。使用這個方法時,系統會叫用下列外掛程式生命週期方法:
requestWillFetch()
fetchDidSucceed()
fetchDidFail()
fetch
函式如下所示:(input: RequestInfo) => {...}
-
輸入
RequestInfo
要擷取的網址或要求。
-
returns
Promise<Response>
-
fetchAndCachePut
void
呼叫
this.fetch()
並 (在背景執行) 於以下裝置執行this.cachePut()
:this.fetch()
產生的回應。對
this.cachePut()
的呼叫會自動叫用this.waitUntil()
。 因此您不必在事件上手動呼叫waitUntil()
。fetchAndCachePut
函式如下所示:(input: RequestInfo) => {...}
-
輸入
RequestInfo
要擷取與快取的要求或網址。
-
returns
Promise<Response>
-
-
getCacheKey
void
檢查
cacheKeyWillBeUsed
回呼的外掛程式清單,以及 會執行依序找到的任何回呼。最後一個Request
將最後一個外掛程式傳回的物件視為快取的快取金鑰 讀取及/或寫入作業如果沒有cacheKeyWillBeUsed
外掛程式回呼 的請求,所傳遞的傳遞要求會在未修改的情況下傳回getCacheKey
函式如下所示:(request: Request, mode: "read"
| "write"
) => {...}-
申請。
要求
-
模式
"閱讀"
|「寫」
-
returns
Promise<Request>
-
-
hasCallback
void
如果策略至少有一個外掛程式具有指定的 回呼。
hasCallback
函式如下所示:(name: C) => {...}
-
名稱
C
要檢查的回呼名稱。
-
returns
布林值
-
-
iterateCallbacks
void
接受回呼並傳回相符的外掛程式回呼的疊代。 其中每個回呼都會納入目前的處理常式狀態 (即 您呼叫每個回呼時,任何傳遞的物件參數都會 與外掛程式目前的狀態合併)。
iterateCallbacks
函式如下所示:(name: C) => {...}
-
名稱
C
要執行的回呼名稱
-
returns
產生器<NonNullable<indexedAccess>anyunknown>
-
-
runCallbacks
void
依序執行所有符合指定名稱的外掛程式回呼,並傳遞 指定的參數物件 (根據目前外掛程式狀態合併),做為唯一 引數。
注意:因為這個方法會執行所有外掛程式,因此不適合用於個案 必須在呼叫前套用回呼的傳回值 ,詳情請見
workbox-strategies.StrategyHandler#iterateCallbacks
瞭解如何處理此情況。runCallbacks
函式如下所示:(name: C, param: Omit<indexedAccess"state"
>) => {...}-
名稱
C
要在每個外掛程式中執行的回呼名稱。
-
參數
Omit<indexedAccess"state"
>要做為第一個 (且僅限) 參數傳遞的物件 達到這個目的這個物件將與 在執行回呼前目前的外掛程式狀態。
-
returns
承諾<void>
-
-
waitUntil
void
在 [延長生命週期承諾]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
與系統處理請求相關聯的事件事件 (通常是FetchEvent
)。注意:您可以等待
workbox-strategies.StrategyHandler~doneWaiting
得知所有新增的承諾都已結算。waitUntil
函式如下所示:(promise: Promise<T>) => {...}
-
承諾
承諾<T>
承諾在延長期限內做出的承諾 觸發要求的事件。
-
returns
承諾<T>
-
StrategyOptions
屬性
-
cacheName
string optional
-
fetchOptions
RequestInit 選用
-
matchOptions
CacheQueryOptions 選用
-
外掛程式
WorkboxPlugin[] 選用