service-worker: use Stale-While-Revalidate strategy

apps/web/package.json

@@ -66,6 +66,7 @@
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.3",
+    "workbox-cacheable-response": "^7.0.0",
     "workbox-core": "^7.0.0",
     "workbox-expiration": "^7.0.0",
     "workbox-routing": "^7.0.0",

apps/web/service-worker.ts

@@ -1,11 +1,11 @@
+import { CacheableResponsePlugin } from 'workbox-cacheable-response';
 import { clientsClaim } from 'workbox-core';
-import { ExpirationPlugin } from 'workbox-expiration';
 import { registerRoute } from 'workbox-routing';
-import { CacheFirst } from 'workbox-strategies';
+import { StaleWhileRevalidate } from 'workbox-strategies';
 
 declare let self: ServiceWorkerGlobalScope;
 
-const cacheName = 'my-cache';
+const cacheName = 'pages-cache';
 
 self.addEventListener('install', () => {
   self.skipWaiting();
@@ -14,13 +14,12 @@ self.addEventListener('install', () => {
 clientsClaim();
 
 registerRoute(
-  /\/(unlimited)?$/u,
-  new CacheFirst({
+  ({ request }) => request.destination === 'document',
+  new StaleWhileRevalidate({
     cacheName,
     plugins: [
-      new ExpirationPlugin({
-        maxAgeSeconds: 1 * 60,
-        maxEntries: 8,
+      new CacheableResponsePlugin({
+        statuses: [200],
       }),
     ],
   })

pnpm-lock.yaml

@@ -268,6 +268,9 @@ importers:
       typescript:
         specifier: ^5.3.3
         version: 5.3.3
+      workbox-cacheable-response:
+        specifier: ^7.0.0
+        version: 7.0.0
       workbox-core:
         specifier: ^7.0.0
         version: 7.0.0
@@ -14273,6 +14276,12 @@ packages:
     dependencies:
       isexe: 2.0.0
 
+  /workbox-cacheable-response@7.0.0:
+    resolution: {integrity: sha512-0lrtyGHn/LH8kKAJVOQfSu3/80WDc9Ma8ng0p2i/5HuUndGttH+mGMSvOskjOdFImLs2XZIimErp7tSOPmu/6g==}
+    dependencies:
+      workbox-core: 7.0.0
+    dev: true
+
   /workbox-core@7.0.0:
     resolution: {integrity: sha512-81JkAAZtfVP8darBpfRTovHg8DGAVrKFgHpOArZbdFd78VqHr5Iw65f2guwjE2NlCFbPFDoez3D3/6ZvhI/rwQ==}
     dev: true