如何將staleWhileRevalidate用於workboxSW預緩存項目？

Question

workboxSW.precache默認為cacheFirst，是否可以更改其策略？

workboxSW.precache(myPrecacheItems);

還是有辦法在預緩存項上定義緩存名稱，以便可以通過指定路由覆蓋預緩存項？

Answer 1

precache基本上是為您的靜態資產（例如css / js等）准備的。即使您不附加哈希，對於這些資產，workbox也會在預緩存時附加哈希。

因此，如果您更改這些設置，則將使用一個新的sw並提供新的捆綁軟件。

而staleWhileRevalidate是一種運行時策略（主要用於動態數據，例如API）。 您可以在工作箱中為這些添加運行時處理程序，並期望它們正常工作。

如果仍然認為需要使用運行時策略進行預緩存，請詳細說明用例。

Answer 2

雖然我不知道是否可以更改workbox.precache策略，但我相信您要做的是在服務工作者安裝中的某些頁面上填充路由緩存。

為此，請使用具有已定義的緩存名稱的staleWhileRevalidate策略創建您的工作箱路由：

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

要在SW安裝中為您定義的路由預緩存一些URL。 將此代碼添加到您的服務工作者：

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策略中設置的緩存的名稱。