工作框策略

最初引入 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。

注意：如需查看每项操作接受的所有参数，请参阅 StrategyHandler 的源代码实现。

自定义缓存网络竞态策略

以下示例基于离线实战宝典中的 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)=> {...}

  • 选项

    StrategyOptions 可选

  • 返回

    CacheFirst

• cacheName

  string

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    请求

  • event

    ExtendableEvent

  • 返回

    Promise<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • 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 可用于确定响应何时解析，以及处理程序何时完成所有工作。

CacheOnly

仅缓存请求策略的实现。

如果您想利用任何 Workbox 插件，该类非常有用。

如果没有缓存匹配项，则会抛出 WorkboxError 异常。

属性

• 构造函数

  void

  创建策略的新实例，并将所有记录的选项属性设置为公共实例属性。

  注意：如果自定义策略类扩展了 Strategy 基类，并且不需要这些属性，则不需要定义自己的构造函数。

  constructor 函数如下所示：

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

  • 选项

    StrategyOptions 可选

  • 返回

    CacheOnly

• cacheName

  string

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    请求

  • event

    ExtendableEvent

  • 返回

    Promise<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • 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)=> {...}

  • 选项

    NetworkFirstOptions 可选

  • 返回

    NetworkFirst

• cacheName

  string

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    请求

  • event

    ExtendableEvent

  • 返回

    Promise<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • 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[] 可选

NetworkOnly

仅限网络的请求策略的实现。

如果您想利用任何 Workbox 插件，该类非常有用。

如果网络请求失败，则会抛出 WorkboxError 异常。

属性

• 构造函数

  void

  constructor 函数如下所示：

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

  • 选项

    NetworkOnlyOptions 可选

  • 返回

    NetworkOnly

• cacheName

  string

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    请求

  • event

    ExtendableEvent

  • 返回

    Promise<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • 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)=> {...}

  • 选项

    StrategyOptions 可选

  • 返回

    StaleWhileRevalidate

• cacheName

  string

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    请求

  • event

    ExtendableEvent

  • 返回

    Promise<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • 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)=> {...}

  • 选项

    StrategyOptions 可选

  • 返回

    战略

• cacheName

  string

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    请求

  • event

    ExtendableEvent

  • 返回

    Promise<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • request

    请求

  • event

    ExtendableEvent

  • 返回

    Promise<Response>

• _标识名

  void

  _handle 函数如下所示：

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

  • request

    请求

  • handler

    StrategyHandler

  • 返回

    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)=> {...}

  • 策略

    战略

  • 选项

    HandlerCallbackOptions

  • 返回

    StrategyHandler

• 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[] 可选