最初引入 Service Worker 时,出现了一组常用的缓存策略。缓存策略是一种模式,用于确定 Service Worker 在收到提取事件后如何生成响应。
workbox-strategies
提供了最常用的缓存策略,因此您可以轻松地在 Service Worker 中应用这些策略。
除了 Workbox 支持的策略之外,我们不会深入探讨更多细节,但您可以在离线实战宝典中了解详情。
使用策略
在以下示例中,我们将向您展示如何将 Workbox 缓存策略与 workbox-routing
搭配使用。您可以在本文档的“配置策略”部分中介绍一些适用于每种策略的选项。
在“高级用法”部分,我们将介绍如何在没有 workbox-routing
的情况下直接使用缓存策略。
过时重新验证
借助 stale-while-revalidate 模式,您可以使用缓存的响应(如果有)尽快响应请求,如果请求未缓存,则回退到网络请求。然后,使用网络请求更新缓存。与某些实现过时的“重新验证”相反,无论缓存响应的存在时间如何,此策略将始终发出重新验证请求。
这是一种相当常见的策略,采用最新的资源对于应用并不重要。
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/images/avatars/'),
new StaleWhileRevalidate()
);
缓存优先(缓存回退到网络)
离线 Web 应用将严重依赖缓存,但对于非关键且可逐步缓存的资产,缓存优先是最佳选项。
如果缓存中有响应,将使用缓存的响应完成请求,并且完全不使用网络。如果没有缓存的响应,该请求将通过网络请求来执行,并且响应将被缓存,以便直接从缓存中提供下一个请求。
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()
的 promise 完成时解析。
这两个请求策略均通过以下两个参数调用:
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
:接受回调并返回匹配插件回调的 iterable,其中每个回调都封装有当前处理程序状态(即,当您调用每个回调时,您传递的任何对象参数都将与插件的当前状态合并)。waitUntil
:向与所处理的请求相关联的事件的延长生命周期 promise 添加一个 promise(通常为FetchEvent
)。doneWaiting
:返回一个在传递给waitUntil()
的所有 promise 均解决后解析的 promise。destroy
:停止运行策略并立即解析所有待处理的waitUntil()
promise。
自定义缓存网络竞态策略
以下示例基于离线实战宝典中的 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
缓存优先请求策略的实现。
缓存优先策略对于修改过的资源(例如 /styles/example.a8f5f1.css
等网址)非常有用,因为它们可以缓存较长时间。
如果网络请求失败,并且没有匹配的缓存,则会抛出 WorkboxError
异常。
属性
-
构造函数
void
创建策略的新实例,并将所有记录的选项属性设置为公共实例属性。
注意:如果自定义策略类扩展了 Strategy 基类,并且不需要这些属性,则不需要定义自己的构造函数。
constructor
函数如下所示:(options?: StrategyOptions) => {...}
-
选项
-
-
cacheName
string
-
fetchOptions
RequestInit(可选)
-
matchOptions
CacheQueryOptions 可选
-
插件
-
_awaitComplete
void
_awaitComplete
函数如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<void>
-
-
_getResponse
void
_getResponse
函数如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<Response>
-
-
标识名
void
执行请求策略,并返回将通过
Response
进行解析的Promise
,从而调用所有相关插件回调。使用 Workbox
workbox-routing.Route
注册策略实例时,系统会在路由匹配时自动调用此方法。或者,您可以将此方法传递给
event.respondWith()
,从而在独立的FetchEvent
监听器中使用该方法。handle
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
Promise<Response>
-
-
handleAll
void
与
workbox-strategies.Strategy~handle
类似,但并非仅返回一个解析为Response
的Promise
,而是返回一个[response, done]
promise 的元组,其中前一个 (response
) 等同于handle()
返回的内容,而后一个是 promise,会在执行策略过程中添加到event.waitUntil()
的任何 promise 完成后进行解析。您可以等待
done
promise,以确保策略执行的任何额外工作(通常是缓存响应)成功完成。handleAll
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
[Promise<Response>, Promise<void>]
[response, complete] 元组 promise 可用于确定响应何时解析,以及处理程序何时完成所有工作。
-
属性
-
构造函数
void
创建策略的新实例,并将所有记录的选项属性设置为公共实例属性。
注意:如果自定义策略类扩展了 Strategy 基类,并且不需要这些属性,则不需要定义自己的构造函数。
constructor
函数如下所示:(options?: StrategyOptions) => {...}
-
选项
-
-
cacheName
string
-
fetchOptions
RequestInit(可选)
-
matchOptions
CacheQueryOptions 可选
-
插件
-
_awaitComplete
void
_awaitComplete
函数如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<void>
-
-
_getResponse
void
_getResponse
函数如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<Response>
-
-
标识名
void
执行请求策略,并返回将通过
Response
进行解析的Promise
,从而调用所有相关插件回调。使用 Workbox
workbox-routing.Route
注册策略实例时,系统会在路由匹配时自动调用此方法。或者,您可以将此方法传递给
event.respondWith()
,从而在独立的FetchEvent
监听器中使用该方法。handle
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
Promise<Response>
-
-
handleAll
void
与
workbox-strategies.Strategy~handle
类似,但并非仅返回一个解析为Response
的Promise
,而是返回一个[response, done]
promise 的元组,其中前一个 (response
) 等同于handle()
返回的内容,而后一个是 promise,会在执行策略过程中添加到event.waitUntil()
的任何 promise 完成后进行解析。您可以等待
done
promise,以确保策略执行的任何额外工作(通常是缓存响应)成功完成。handleAll
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
[Promise<Response>, Promise<void>]
[response, complete] 元组 promise 可用于确定响应何时解析,以及处理程序何时完成所有工作。
-
NetworkFirst
网络优先请求策略的实现。
默认情况下,此策略将使用状态代码 200 和不透明响应来缓存响应。不透明响应是指响应不支持 CORS 的跨源请求。
如果网络请求失败,并且没有匹配的缓存,则会抛出 WorkboxError
异常。
属性
-
构造函数
void
constructor
函数如下所示:(options?: NetworkFirstOptions) => {...}
-
选项
-
-
cacheName
string
-
fetchOptions
RequestInit(可选)
-
matchOptions
CacheQueryOptions 可选
-
插件
-
_awaitComplete
void
_awaitComplete
函数如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<void>
-
-
_getResponse
void
_getResponse
函数如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<Response>
-
-
标识名
void
执行请求策略,并返回将通过
Response
进行解析的Promise
,从而调用所有相关插件回调。使用 Workbox
workbox-routing.Route
注册策略实例时,系统会在路由匹配时自动调用此方法。或者,您可以将此方法传递给
event.respondWith()
,从而在独立的FetchEvent
监听器中使用该方法。handle
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
Promise<Response>
-
-
handleAll
void
与
workbox-strategies.Strategy~handle
类似,但并非仅返回一个解析为Response
的Promise
,而是返回一个[response, done]
promise 的元组,其中前一个 (response
) 等同于handle()
返回的内容,而后一个是 promise,会在执行策略过程中添加到event.waitUntil()
的任何 promise 完成后进行解析。您可以等待
done
promise,以确保策略执行的任何额外工作(通常是缓存响应)成功完成。handleAll
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
[Promise<Response>, Promise<void>]
[response, complete] 元组 promise 可用于确定响应何时解析,以及处理程序何时完成所有工作。
-
NetworkFirstOptions
属性
-
cacheName
字符串(可选)
-
fetchOptions
RequestInit(可选)
-
matchOptions
CacheQueryOptions 可选
-
networkTimeoutSeconds
数字可选
-
插件
WorkboxPlugin[] 可选
属性
-
构造函数
void
constructor
函数如下所示:(options?: NetworkOnlyOptions) => {...}
-
选项
-
-
cacheName
string
-
fetchOptions
RequestInit(可选)
-
matchOptions
CacheQueryOptions 可选
-
插件
-
_awaitComplete
void
_awaitComplete
函数如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<void>
-
-
_getResponse
void
_getResponse
函数如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<Response>
-
-
标识名
void
执行请求策略,并返回将通过
Response
进行解析的Promise
,从而调用所有相关插件回调。使用 Workbox
workbox-routing.Route
注册策略实例时,系统会在路由匹配时自动调用此方法。或者,您可以将此方法传递给
event.respondWith()
,从而在独立的FetchEvent
监听器中使用该方法。handle
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
Promise<Response>
-
-
handleAll
void
与
workbox-strategies.Strategy~handle
类似,但并非仅返回一个解析为Response
的Promise
,而是返回一个[response, done]
promise 的元组,其中前一个 (response
) 等同于handle()
返回的内容,而后一个是 promise,会在执行策略过程中添加到event.waitUntil()
的任何 promise 完成后进行解析。您可以等待
done
promise,以确保策略执行的任何额外工作(通常是缓存响应)成功完成。handleAll
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
[Promise<Response>, Promise<void>]
[response, complete] 元组 promise 可用于确定响应何时解析,以及处理程序何时完成所有工作。
-
NetworkOnlyOptions
属性
-
fetchOptions
RequestInit(可选)
-
networkTimeoutSeconds
数字可选
-
插件
WorkboxPlugin[] 可选
StaleWhileRevalidate
stale-while-revalidate 请求策略的实现。
从缓存和网络并行请求资源。策略将使用缓存版本进行响应(如果有),否则等待网络响应。每次成功请求时,缓存都会根据网络响应进行更新。
默认情况下,此策略将使用状态代码 200 和不透明响应来缓存响应。不透明响应是指响应不支持 CORS 的跨源请求。
如果网络请求失败,并且没有匹配的缓存,则会抛出 WorkboxError
异常。
属性
-
构造函数
void
constructor
函数如下所示:(options?: StrategyOptions) => {...}
-
选项
-
-
cacheName
string
-
fetchOptions
RequestInit(可选)
-
matchOptions
CacheQueryOptions 可选
-
插件
-
_awaitComplete
void
_awaitComplete
函数如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<void>
-
-
_getResponse
void
_getResponse
函数如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<Response>
-
-
标识名
void
执行请求策略,并返回将通过
Response
进行解析的Promise
,从而调用所有相关插件回调。使用 Workbox
workbox-routing.Route
注册策略实例时,系统会在路由匹配时自动调用此方法。或者,您可以将此方法传递给
event.respondWith()
,从而在独立的FetchEvent
监听器中使用该方法。handle
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
Promise<Response>
-
-
handleAll
void
与
workbox-strategies.Strategy~handle
类似,但并非仅返回一个解析为Response
的Promise
,而是返回一个[response, done]
promise 的元组,其中前一个 (response
) 等同于handle()
返回的内容,而后一个是 promise,会在执行策略过程中添加到event.waitUntil()
的任何 promise 完成后进行解析。您可以等待
done
promise,以确保策略执行的任何额外工作(通常是缓存响应)成功完成。handleAll
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
[Promise<Response>, Promise<void>]
[response, complete] 元组 promise 可用于确定响应何时解析,以及处理程序何时完成所有工作。
-
Strategy
所有其他策略类都必须从其扩展的抽象基类:
属性
-
构造函数
void
创建策略的新实例,并将所有记录的选项属性设置为公共实例属性。
注意:如果自定义策略类扩展了 Strategy 基类,并且不需要这些属性,则不需要定义自己的构造函数。
constructor
函数如下所示:(options?: StrategyOptions) => {...}
-
选项
-
返回
-
-
cacheName
string
-
fetchOptions
RequestInit(可选)
-
matchOptions
CacheQueryOptions 可选
-
插件
-
_awaitComplete
void
_awaitComplete
函数如下所示:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<void>
-
-
_getResponse
void
_getResponse
函数如下所示:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
请求
-
event
ExtendableEvent
-
返回
Promise<Response>
-
-
_标识名
void
_handle
函数如下所示:(request: Request, handler: StrategyHandler) => {...}
-
request
请求
-
handler
-
返回
Promise<Response>
-
-
标识名
void
执行请求策略,并返回将通过
Response
进行解析的Promise
,从而调用所有相关插件回调。使用 Workbox
workbox-routing.Route
注册策略实例时,系统会在路由匹配时自动调用此方法。或者,您可以将此方法传递给
event.respondWith()
,从而在独立的FetchEvent
监听器中使用该方法。handle
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
Promise<Response>
-
-
handleAll
void
与
workbox-strategies.Strategy~handle
类似,但并非仅返回一个解析为Response
的Promise
,而是返回一个[response, done]
promise 的元组,其中前一个 (response
) 等同于handle()
返回的内容,而后一个是 promise,会在执行策略过程中添加到event.waitUntil()
的任何 promise 完成后进行解析。您可以等待
done
promise,以确保策略执行的任何额外工作(通常是缓存响应)成功完成。handleAll
函数如下所示:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
选项
FetchEvent | HandlerCallbackOptions
FetchEvent
或具有下列属性的对象。
-
返回
[Promise<Response>, Promise<void>]
[response, complete] 元组 promise 可用于确定响应何时解析,以及处理程序何时完成所有工作。
-
StrategyHandler
每次 Strategy 实例实例调用 workbox-strategies.Strategy~handle
或 workbox-strategies.Strategy~handleAll
时都会创建的类,该类会将所有提取和缓存操作封装在插件回调周围,并跟踪策略何时“完成”(即所有添加的 event.waitUntil()
promise 均已解析)。
属性
-
构造函数
void
创建与所传递的策略和处理请求的事件相关联的新实例。
该构造函数还会初始化将传递给处理此请求的每个插件的状态。
constructor
函数如下所示:(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
策略
-
-
event
ExtendableEvent
-
params
任意(可选)
-
request
请求
-
网址
网址(可选)
-
cacheMatch
void
使用针对策略对象定义的
cacheName
、matchOptions
和plugins
匹配来自缓存的请求(并调用所有适用的插件回调方法)。使用此方法时,系统会调用以下插件生命周期方法:
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
cacheMatch
函数如下所示:(key: RequestInfo) => {...}
-
key
RequestInfo
要用作缓存键的请求或网址。
-
返回
Promise<Response>
匹配的响应(如果找到)。
-
cachePut
void
使用在策略对象上定义的
cacheName
和plugins
,将请求/响应对放入缓存中(并调用所有适用的插件回调方法)。使用此方法时,系统会调用以下插件生命周期方法:
- cacheKeyWillByUsed()
- cacheWillUpdate()
- cacheDidUpdate()
cachePut
函数如下所示:(key: RequestInfo, response: Response) => {...}
-
key
RequestInfo
用作缓存键的请求或网址。
-
条回复
响应
对缓存的响应。
-
返回
Promise<boolean>
如果 cacheWillUpdate 会导致响应无法缓存,则为
false
,否则为true
。
-
destroy
void
停止运行策略并立即解析任何待处理的
waitUntil()
promise。destroy
函数如下所示:() => {...}
-
doneWaiting
void
返回一个在传递给
workbox-strategies.StrategyHandler~waitUntil
的所有 promise 都结束后解析的 promise。注意:在
doneWaiting()
稳定后完成的任何工作都应手动传递给事件的waitUntil()
方法(而不是此处理程序的waitUntil()
方法),否则 Service Worker 线程会在您的工作完成之前被终止。doneWaiting
函数如下所示:() => {...}
-
返回
Promise<void>
-
-
fetch
void
使用
Strategy
对象中定义的fetchOptions
(针对非导航请求)和plugins
获取指定的请求(并调用所有适用的插件回调方法)。使用此方法时,系统会调用以下插件生命周期方法:
requestWillFetch()
fetchDidSucceed()
fetchDidFail()
fetch
函数如下所示:(input: RequestInfo) => {...}
-
输入
RequestInfo
要获取的网址或请求。
-
返回
Promise<Response>
-
fetchAndCachePut
void
调用
this.fetch()
并(在后台)对this.fetch()
生成的响应运行this.cachePut()
。调用
this.cachePut()
会自动调用this.waitUntil()
,因此您不必对事件手动调用waitUntil()
。fetchAndCachePut
函数如下所示:(input: RequestInfo) => {...}
-
输入
RequestInfo
要提取和缓存的请求或网址。
-
返回
Promise<Response>
-
-
getCacheKey
void
检查
cacheKeyWillBeUsed
回调的插件列表,然后按顺序执行找到的任何回调。最后一个插件返回的最终Request
对象被视为缓存读取和/或写入的缓存键。如果没有注册任何cacheKeyWillBeUsed
插件回调,将以未经修改的形式返回传递的请求getCacheKey
函数如下所示:(request: Request, mode: "read"
| "write"
) => {...}-
request
请求
-
模式
-
返回
Promise<Request>
-
-
hasCallback
void
如果策略至少包含一个具有指定回调的插件,则返回 true。
hasCallback
函数如下所示:(name: C) => {...}
-
name
C
要检查的回调的名称。
-
返回
boolean
-
-
iterateCallbacks
void
接受回调并返回匹配插件回调的可迭代对象,其中每个回调都封装有当前处理程序状态(即,当您调用每个回调时,您传递的任何对象参数都将与插件的当前状态合并)。
iterateCallbacks
函数如下所示:(name: C) => {...}
-
name
C
要运行的回调的名称
-
返回
生成器<NonNullable<indexedAccess>anyunknown>
-
-
runCallbacks
void
按顺序运行与指定名称匹配的所有插件回调,并将指定参数对象(与当前插件状态合并)作为唯一参数传递。
注意:由于此方法会运行所有插件,因此不适合需要在调用下一个回调之前应用回调的返回值的情况。请参阅下文的
workbox-strategies.StrategyHandler#iterateCallbacks
,了解如何处理这种情况。runCallbacks
函数如下所示:(name: C, param: Omit<indexedAccess"state"
>) => {...}-
name
C
要在每个插件中运行的回调的名称。
-
param
省略<indexedAccess"state"
>在执行每个回调时作为第一个(也是唯一)参数传递的对象。在执行回调之前,此对象将与当前插件状态合并。
-
返回
Promise<void>
-
-
waitUntil
void
向与所处理请求相关联的事件事件的 [extend life promises]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
添加一个 promise(通常为FetchEvent
)。注意:您可以等待
workbox-strategies.StrategyHandler~doneWaiting
知道添加的所有 promise 何时结束。waitUntil
函数如下所示:(promise: Promise<T>) => {...}
-
许诺
Promise<T>
向触发请求的事件的延长生命周期 promise 添加的 promise。
-
返回
Promise<T>
-
StrategyOptions
属性
-
cacheName
字符串(可选)
-
fetchOptions
RequestInit(可选)
-
matchOptions
CacheQueryOptions 可选
-
插件
WorkboxPlugin[] 可选