如何预缓存workbox NavigationRoute NetworkFirst请求？

Question

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

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

当我导航到一个页面时，导航请求被缓存，然后我可以在脱机时再次访问它。到目前一切尚好。

但是，我需要预先缓存PWA开始URL，因此，如果用户从任何页面安装PWA，进入脱机状态，并尝试打开它，则PWA开始URL将被缓存并可用。事实上，从Chrome91开始，这将是可安装性提示的要求。

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)-should，尽管我建议您在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,
  },
})