FetchEvent：preloadResponse 属性

注意：此功能仅在 Service Workers 中可用。

preloadResponse 是 FetchEvent 接口的只读属性，它返回一个 Promise，如果触发了导航预加载 导航预加载，则解析为导航预加载 Response，否则解析为 undefined。

如果 启用了导航预加载，请求为 GET 请求，并且请求为导航请求（在加载页面和 iframe 时由浏览器生成），则会触发导航预加载。

服务工作线程可以在其 fetch 事件处理程序中等待此 promise，以便跟踪在服务工作线程启动期间发出的 fetch 请求的完成情况。

值

一个 Promise，它解析为 Response 或解析为 undefined。

示例

此代码片段摘自 使用导航预加载加速 Service Worker。

onfetch 事件处理程序侦听 fetch 事件。当触发时，处理程序调用 FetchEvent.respondWith() 将 promise 传回给受控页面。此 promise 将解析为请求的资源。

如果 Cache 对象中存在匹配的 URL 请求，则代码返回一个从缓存中获取响应的 promise。如果在缓存中找不到匹配项，则代码返回 preloadResponse 中的 promise。如果没有匹配的缓存或预加载的响应，则代码从网络获取响应并返回关联的 promise。

js
addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      // Respond from the cache if we can
      const cachedResponse = await caches.match(event.request);
      if (cachedResponse) return cachedResponse;

      // Else, use the preloaded response, if it's there
      const response = await event.preloadResponse;
      if (response) return response;

      // Else try the network.
      return fetch(event.request);
    })(),
  );
});

规范

规范
Service Workers
# fetch-event-preloadresponse

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅