工作框策略

首次引入 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());

仅缓存

仅缓存 策略确保从缓存获取响应。这种情况不太常见 但如果您有自己的预缓存步骤，则会发现该方法非常有用。

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() 返回的内容；当 promise 之前 添加到策略中的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：返回一个 promise，它会在传递给 waitUntil() 的所有 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

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

  注意：如果自定义策略类扩展了基本策略类，并且 所需的其他属性，也无需定义自己的 构造函数。

  constructor 函数如下所示：

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

  • 选项

    StrategyOptions 可选

  • 返回

    CacheFirst

• cacheName

  字符串

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    承诺<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    Promise&lt;Response&gt;

• 句柄

  void

  执行请求策略，并返回 Promise，解析时将使用 一个 Response，调用所有相关的插件回调。

  向 Workbox 注册策略实例时 workbox-routing.Route，此方法会自动 在路由匹配时调用。

  或者，您也可以在独立的 FetchEvent 中使用此方法 方法是将其传递给 event.respondWith()。

  handle 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    Promise&lt;Response&gt;

• handleAll

  void

  与“workbox-strategies.Strategy~handle”类似，但 而不是仅返回解析为 Response 的 Promise， 它将返回一个 [response, done] promise 的元组，其中前者 (response) 相当于 handle() 返回的内容，后者是一个 任何添加到 promise 后，都会解析的 promise 在执行该策略的过程中，event.waitUntil()已完成。

  您可以等待 done 的承诺，以确保 策略（通常是缓存响应）成功完成。

  handleAll 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    [Promise<Response>、Promise<void>]

    [响应、完成]的元组 promise，可用来确定响应何时解析为 以及处理程序完成所有工作的时间。

CacheOnly

仅缓存的实现 请求策略

如果您想利用 Workbox 插件。

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

属性

• 构造函数

  void

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

  注意：如果自定义策略类扩展了基本策略类，并且 所需的其他属性，也无需定义自己的 构造函数。

  constructor 函数如下所示：

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

  • 选项

    StrategyOptions 可选

  • 返回

    CacheOnly

• cacheName

  字符串

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise&lt;Response&gt;

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    承诺<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    Promise&lt;Response&gt;

• 句柄

  void

  执行请求策略，并返回 Promise，解析时将使用 一个 Response，调用所有相关的插件回调。

  向 Workbox 注册策略实例时 workbox-routing.Route，此方法会自动 在路由匹配时调用。

  或者，您也可以在独立的 FetchEvent 中使用此方法 方法是将其传递给 event.respondWith()。

  handle 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    Promise&lt;Response&gt;

• handleAll

  void

  与“workbox-strategies.Strategy~handle”类似，但 而不是仅返回解析为 Response 的 Promise， 它将返回一个 [response, done] promise 的元组，其中前者 (response) 相当于 handle() 返回的内容，后者是一个 任何添加到 promise 后，都会解析的 promise 在执行该策略的过程中，event.waitUntil()已完成。

  您可以等待 done 的承诺，以确保 策略（通常是缓存响应）成功完成。

  handleAll 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    [Promise<Response>、Promise<void>]

    [响应、完成]的元组 promise，可用来确定响应何时解析为 以及处理程序完成所有工作的时间。

NetworkFirst

通过 广告联盟优先 请求策略

默认情况下，此策略将缓存状态代码为 200 的响应，如 以及不透明响应。 不透明响应是指响应不透明的跨源请求 支持 CORS。

如果网络请求失败，且没有缓存匹配项， WorkboxError 异常。

属性

• 构造函数

  void

  constructor 函数如下所示：

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

  • 选项

    NetworkFirstOptions 可选

  • 返回

    NetworkFirst

• cacheName

  字符串

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise&lt;Response&gt;

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    承诺<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    Promise&lt;Response&gt;

• 句柄

  void

  执行请求策略，并返回 Promise，解析时将使用 一个 Response，调用所有相关的插件回调。

  向 Workbox 注册策略实例时 workbox-routing.Route，此方法会自动 在路由匹配时调用。

  或者，您也可以在独立的 FetchEvent 中使用此方法 方法是将其传递给 event.respondWith()。

  handle 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    Promise&lt;Response&gt;

• handleAll

  void

  与“workbox-strategies.Strategy~handle”类似，但 而不是仅返回解析为 Response 的 Promise， 它将返回一个 [response, done] promise 的元组，其中前者 (response) 相当于 handle() 返回的内容，后者是一个 任何添加到 promise 后，都会解析的 promise 在执行该策略的过程中，event.waitUntil()已完成。

  您可以等待 done 的承诺，以确保 策略（通常是缓存响应）成功完成。

  handleAll 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    [Promise<Response>、Promise<void>]

    [响应、完成]的元组 promise，可用来确定响应何时解析为 以及处理程序完成所有工作的时间。

NetworkFirstOptions

属性

• cacheName

  字符串（可选）

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• networkTimeoutSeconds

  编号（选填）

• 插件

  WorkboxPlugin[] 可选

NetworkOnly

通过 仅网络 请求策略

如果您想利用 Workbox 插件。

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

属性

• 构造函数

  void

  constructor 函数如下所示：

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

  • 选项

    NetworkOnlyOptions 可选

  • 返回

    NetworkOnly

• cacheName

  字符串

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise&lt;Response&gt;

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    承诺<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    Promise&lt;Response&gt;

• 句柄

  void

  执行请求策略，并返回 Promise，解析时将使用 一个 Response，调用所有相关的插件回调。

  向 Workbox 注册策略实例时 workbox-routing.Route，此方法会自动 在路由匹配时调用。

  或者，您也可以在独立的 FetchEvent 中使用此方法 方法是将其传递给 event.respondWith()。

  handle 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    Promise&lt;Response&gt;

• handleAll

  void

  与“workbox-strategies.Strategy~handle”类似，但 而不是仅返回解析为 Response 的 Promise， 它将返回一个 [response, done] promise 的元组，其中前者 (response) 相当于 handle() 返回的内容，后者是一个 任何添加到 promise 后，都会解析的 promise 在执行该策略的过程中，event.waitUntil()已完成。

  您可以等待 done 的承诺，以确保 策略（通常是缓存响应）成功完成。

  handleAll 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    [Promise<Response>、Promise<void>]

    [响应、完成]的元组 promise，可用来确定响应何时解析为 以及处理程序完成所有工作的时间。

NetworkOnlyOptions

属性

• fetchOptions

  RequestInit（可选）

• networkTimeoutSeconds

  编号（选填）

• 插件

  WorkboxPlugin[] 可选

StaleWhileRevalidate

通过 stale-while-revalidate 请求策略

从缓存和网络并行请求资源。 该策略将使用缓存的版本进行响应（如果有），否则 等待网络响应缓存会根据网络响应进行更新 每个成功的请求

默认情况下，此策略将缓存状态代码为 200 的响应，如 以及不透明响应。 不透明响应是指响应不透明的跨源请求 支持 CORS。

如果网络请求失败，且没有缓存匹配项， WorkboxError 异常。

属性

• 构造函数

  void

  constructor 函数如下所示：

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

  • 选项

    StrategyOptions 可选

  • 返回

    StaleWhileRevalidate

• cacheName

  字符串

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise&lt;Response&gt;

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    承诺<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    Promise&lt;Response&gt;

• 句柄

  void

  执行请求策略，并返回 Promise，解析时将使用 一个 Response，调用所有相关的插件回调。

  向 Workbox 注册策略实例时 workbox-routing.Route，此方法会自动 在路由匹配时调用。

  或者，您也可以在独立的 FetchEvent 中使用此方法 方法是将其传递给 event.respondWith()。

  handle 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    Promise&lt;Response&gt;

• handleAll

  void

  与“workbox-strategies.Strategy~handle”类似，但 而不是仅返回解析为 Response 的 Promise， 它将返回一个 [response, done] promise 的元组，其中前者 (response) 相当于 handle() 返回的内容，后者是一个 任何添加到 promise 后，都会解析的 promise 在执行该策略的过程中，event.waitUntil()已完成。

  您可以等待 done 的承诺，以确保 策略（通常是缓存响应）成功完成。

  handleAll 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    [Promise<Response>、Promise<void>]

    [响应、完成]的元组 promise，可用来确定响应何时解析为 以及处理程序完成所有工作的时间。

Strategy

所有其他策略类都必须从中扩展的抽象基类：

属性

• 构造函数

  void

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

  注意：如果自定义策略类扩展了基本策略类，并且 所需的其他属性，也无需定义自己的 构造函数。

  constructor 函数如下所示：

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

  • 选项

    StrategyOptions 可选

  • 返回

    战略

• cacheName

  字符串

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[]

• _awaitComplete

  void

  _awaitComplete 函数如下所示：

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

  • responseDone

    Promise&lt;Response&gt;

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    承诺<void>

• _getResponse

  void

  _getResponse 函数如下所示：

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

  • handler

    StrategyHandler

  • request

    请求

  • 事件

    ExtendableEvent

  • 返回

    Promise&lt;Response&gt;

• _handle

  void

  _handle 函数如下所示：

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

  • request

    请求

  • handler

    StrategyHandler

  • 返回

    Promise&lt;Response&gt;

• 句柄

  void

  执行请求策略，并返回 Promise，解析时将使用 一个 Response，调用所有相关的插件回调。

  向 Workbox 注册策略实例时 workbox-routing.Route，此方法会自动 在路由匹配时调用。

  或者，您也可以在独立的 FetchEvent 中使用此方法 方法是将其传递给 event.respondWith()。

  handle 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    Promise&lt;Response&gt;

• handleAll

  void

  与“workbox-strategies.Strategy~handle”类似，但 而不是仅返回解析为 Response 的 Promise， 它将返回一个 [response, done] promise 的元组，其中前者 (response) 相当于 handle() 返回的内容，后者是一个 任何添加到 promise 后，都会解析的 promise 在执行该策略的过程中，event.waitUntil()已完成。

  您可以等待 done 的承诺，以确保 策略（通常是缓存响应）成功完成。

  handleAll 函数如下所示：

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

  • 选项

    FetchEvent |HandlerCallbackOptions

    FetchEvent 或包含 属性。

  • 返回

    [Promise<Response>、Promise<void>]

    [响应、完成]的元组 promise，可用来确定响应何时解析为 以及处理程序完成所有工作的时间。

StrategyHandler

每次 Strategy 实例实例调用时创建的类 workbox-strategies.Strategy~handle 或 workbox-strategies.Strategy~handleAll，用于封装所有提取和 围绕插件回调缓存操作，并跟踪 “完成”（即所有添加的 event.waitUntil() promise 均已解析）。

属性

• 构造函数

  void

  创建与传递的策略和事件关联的新实例 处理请求的容器。

  构造函数还会初始化要传递给每个 处理此请求的插件。

  constructor 函数如下所示：

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

  • 策略

    战略

  • 选项

    HandlerCallbackOptions

  • 返回

    StrategyHandler

• 事件

  ExtendableEvent

• params

  任何选填字段

• request

  请求

• 网址

  网址（可选）

• cacheMatch

  void

  匹配来自缓存的请求（并调用所有适用的插件） 使用 cacheName、matchOptions 和 plugins 在策略对象上定义。

  使用此方法时，系统会调用以下插件生命周期方法：

  • cacheKeyWillByUsed()
  • cachedResponseWillByUsed()

  cacheMatch 函数如下所示：

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

  • 键

    RequestInfo

    要用作缓存键的请求或网址。

  • 返回

    Promise&lt;Response&gt;

    匹配的响应（如果找到）。

• cachePut

  void

  在缓存中放入一个请求/响应对（并调用 cacheName 和 plugins 上定义的 策略对象。

  使用此方法时，系统会调用以下插件生命周期方法：

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

  cachePut 函数如下所示：

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

  • 键

    RequestInfo

    要用作缓存键的请求或网址。

  • Response

    响应

    对缓存的响应。

  • 返回

    Promise&lt;boolean&gt;

    如果由 cacheWillUpdate 导致响应，则为 false 不能缓存，否则返回 true。

• 销毁

  void

  停止运行策略，并立即解决所有待处理 waitUntil() 承诺。

  destroy 函数如下所示：

  () => {...}

• doneWaiting

  void

  返回一个在传递到所有 promise 后解析的 promise workbox-strategies.StrategyHandler~waitUntil 已经结清。

  注意：doneWaiting()结算后完成的所有工作都必须手动完成 传递给事件的 waitUntil() 方法（不是此处理程序的 waitUntil() 方法），否则 Service Worker 线程会被终止 然后再完成这些任务

  doneWaiting 函数如下所示：

  () => {...}

  • 返回

    承诺<void>

• 提取

  void

  获取指定的请求（并调用所有适用的插件回调） 方法）使用 fetchOptions（针对非导航请求）和 针对 Strategy 对象定义的 plugins。

  使用此方法时，系统会调用以下插件生命周期方法：

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

  fetch 函数如下所示：

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

  • 输入

    RequestInfo

    要提取的网址或请求。

  • 返回

    Promise&lt;Response&gt;

• fetchAndCachePut

  void

  调用 this.fetch() 并（在后台）在this.cachePut() this.fetch() 生成的回答。

  对 this.cachePut() 的调用会自动调用 this.waitUntil()。 因此您不必对事件手动调用 waitUntil()。

  fetchAndCachePut 函数如下所示：

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

  • 输入

    RequestInfo

    要提取和缓存的请求或网址。

  • 返回

    Promise&lt;Response&gt;

• getCacheKey

  void

  检查插件列表中是否存在 cacheKeyWillBeUsed 回调；以及 按顺序执行找到的任何回调。最后一个Request 最后一个插件返回的对象被视为缓存的缓存键 读取和/或写入如果没有 cacheKeyWillBeUsed 插件回调 则传递的请求将以原封不动的方式返回

  getCacheKey 函数如下所示：

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

  • request

    请求

  • 模式

    "read"
     |"write"
    

  • 返回

    Promise&lt;Request&gt;

• hasCallback

  void

  如果策略中至少有一个插件具有指定的参数，则返回 true 回调。

  hasCallback 函数如下所示：

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

  • name

    C

    要检查的回调的名称。

  • 返回

    布尔值

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

    要作为第一个（也是唯一一个）参数传递的对象 。此对象将与 当前插件状态。

  • 返回

    承诺<void>

• waitUntil

  void

  向 [延长有效期承诺]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises 与正在处理的请求相关的事件事件（通常是 FetchEvent）。

  注意：您可以等待 workbox-strategies.StrategyHandler~doneWaiting 了解所有添加的 promise 何时处理完毕。

  waitUntil 函数如下所示：

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

  • 承诺

    承诺<T>

    对延长生命周期承诺增加的 promise 触发请求的事件的名称

  • 返回

    承诺<T>

StrategyOptions

属性

• cacheName

  字符串（可选）

• fetchOptions

  RequestInit（可选）

• matchOptions

  CacheQueryOptions 可选

• 插件

  WorkboxPlugin[] 可选