如何使用workbox.streams解决服务工作者中的提取事件

Question

我正在使用workbox.streams尝试合并数据以创建响应。提取事件未触发。

我正在努力了解workbox.streams的工作方式。

下面的代码是第三次迭代。我认为正则表达式存在问题，因此我将其更改为以下代码中的内容。

我确保我使用的是最新版本的Workbox，以确保所使用的版本不是问题。

我还更改了文件的预缓存，以消除此问题的根源。

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.0.0-beta.0/workbox-sw.js');

// Make this a debug build
workbox.setConfig({
  debug: true,
});

const HEAD = '/page-top.html';
const FOOT = '/page-bottom.html';
// const ERROR = '/page-error.html';

const cacheStrategy = workbox.strategies.cacheFirst({
  cacheName: workbox.core.cacheNames.precache,
});

const networkStrategy = workbox.strategies.staleWhileRevalidate({
  cacheName: 'content',
  plugins: [
    new workbox.expiration.Plugin({
      maxEntries: 50,
    }),
  ],
});

workbox.precaching.precacheAndRoute([]);

workbox.routing.registerRoute(
  new RegExp('\.*\.html'),
  workbox.streams.strategy([
    () => cacheStrategy.makeRequest({request: HEAD}),
    async ({event}) => {
      try {
        const contentResponse = networkStrategy.makeRequest({
          request: event.request.url,
        });
        const contentData = await contentResponse.text();
        return contentData;
      } catch (error) {
        return cacheStrategy.makeRequest({request: ERROR});
      }
    },
    () => cacheStrategy.makeRequest({request: FOOT}),
  ])
);

我希望浏览器呈现由workbox.streams.strategy缓存的所有组件组成的页面。相反，我只得到页面的正文；似乎整个路线都被忽略了。