如何预缓存工作箱 NavigationRoute NetworkFirst 请求？

Question

我在基于工作箱的服务工作者中为 NavigationRoute 使用 NetworkFirst 策略，以便在用户离线时为导航请求提供缓存响应。

workbox.routing.registerRoute(
    new workbox.routing.NavigationRoute(
        new workbox.strategies.NetworkFirst({
            cacheName: 'static-pages',
        }),
    ),
);

当我导航到一个页面时，导航请求会被缓存，然后我可以在离线时再次访问它。到目前为止一切顺利。

但是，我需要预先缓存 PWA 启动 URL，因此如果用户从任何页面安装 PWA、脱机并尝试打开它，PWA 启动 URL 将被缓存并可用。事实上，这将是 Chrome 91 的可安装提示的要求。

self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.open('static-pages').then(cache => {
            const startUrl = 'https://my-pwa-start-url...';
            return cache.add(startUrl);
        })
    );
});

这里的问题是startUrl 的请求不是navigation 请求，因此即使它被缓存在static-pages 缓存中，导航到起始 URL 时也不会使用它。

我尝试手动构建导航请求，例如

const startUrlRequest = new Request(startUrl, { mode: 'navigate' });
return cache.add(startUrlRequest);

然后我得到这个错误：

TypeError: Failed to construct 'Request': Cannot construct a Request with a RequestInit whose mode member is set as 'navigate'.

有没有办法在不实际导航到页面的情况下预先缓存 NavigationRequest？

Answer 1

您尝试的基本方法（调用 cache.add(startUrl)）应该没问题，但我建议在您的 install 处理程序中这样做，而不是 activate。

一般而言，无需手动构造导航请求并将其传递给cache.add()，而且正如您所发现的，您无法在不引发异常的情况下实际构造一个。

关于导航请求和缓存响应的唯一“特殊”之处在于重定向响应 can't be used 以满足导航请求，因此请确保您正在缓存的 URL 不会导致 30 倍重定向。

所以，我的猜测是您的缓存已正确预填充，但您的 NetworkFirst 策略中存在缓存未命中。一种可能的解释是您明确缓存的 URL 中存在查询参数，并且在导航期间请求的 URL 中的这些参数不匹配。您应该能够通过使用 Chrome 的 DevTools 检查缓存和网络流量来确认这一点。如果这确实是问题所在，您可以通过传入 ignoreSearch 匹配选项告诉 Workbox 在尝试查找匹配的缓存条目时忽略查询参数：

new workbox.strategies.NetworkFirst({
  cacheName: 'static-pages',
  matchOptions: {
    ignoreSearch: true,
  },
})