Question

workboxSW.precache默认是cacheFirst，有没有办法改变它的策略？

workboxSW.precache(myPrecacheItems);

或者有没有办法在预缓存项目上定义缓存名称，因此可以通过指定路由覆盖预缓存项目？

Answer 1

预缓存主要用于静态资产，如css / js等。对于这些资产，即使你不附加散列，工作箱也会在预先缓存时附加散列。

因此，如果您更改这些内容，新的sw将会发挥作用，并且将提供新的捆绑包。

而staleWhileRevalidate是一种运行时策略（主要用于动态数据，例如API）。您可以在工作箱中为这些添加运行时处理程序并期望它们能够正常工作。

如果您仍然认为需要使用运行时策略的预缓存，请详细说明您的用例。

Answer 2

虽然我不知道是否可以更改workbox.precache策略，但我相信您要做的是在服务工作者安装页面上填充一些页面。

为此，请先使用具有已定义的缓存名称的staleWhileRevalidate策略创建您的工作箱路由：

workbox.routing.registerRoute(
    /.*\.html/,
    workbox.strategies.staleWhileRevalidate({  
        cacheName: 'MY-CACHE',
    })
);

要在SW安装中为您定义的路由预缓存一些URL。将此代码添加到您的Service Worker：

self.addEventListener('install', (event) => {
    const urls = ['https://url1.html','https://url2.html','etc'];
    event.waitUntil(caches.open('MY-CACHE').then((cache) => cache.addAll(urls)));
});

MY-CACHE 是您的 staleWhileRevalidate 策略中设置的缓存的名称。

如何对workboxSW预缓存项使用staleWhileRevalidate？

2 个答案: