♻️(SW) change strategy html caching

We will use the network first strategy for the html
files. This will allow us to always have the
latest version of the html files.

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+## Changed
+
+♻️(SW) change strategy html caching #460
+
 
 ## [1.8.1] - 2024-11-27
 

src/frontend/apps/impress/src/features/service-worker/service-worker.ts

@@ -47,9 +47,13 @@ setCacheNameDetails({
 const getStrategy = (
   options?: NetworkFirstOptions | StrategyOptions,
 ): NetworkFirst | CacheFirst => {
-  return SW_DEV_URL.some((devDomain) =>
+  const isDev = SW_DEV_URL.some((devDomain) =>
     self.location.origin.includes(devDomain),
-  ) || isApiUrl(self.location.href)
+  );
+  const isApi = isApiUrl(self.location.href);
+  const isHTMLRequest = options?.cacheName?.includes('html');
+
+  return isDev || isApi || isHTMLRequest
     ? new NetworkFirst(options)
     : new CacheFirst(options);
 };
@@ -77,7 +81,7 @@ self.addEventListener('activate', function (event) {
           }),
         );
       })
-      .then(void self.clients.claim()),
+      .then(() => self.clients.claim()),
   );
 });
 
@@ -139,6 +143,18 @@ setCatchHandler(async ({ request, url, event }) => {
   }
 });
 
+// HTML documents
+registerRoute(
+  ({ request }) => request.destination === 'document',
+  new NetworkFirst({
+    cacheName: getCacheNameVersion('html'),
+    plugins: [
+      new CacheableResponsePlugin({ statuses: [0, 200] }),
+      new ExpirationPlugin({ maxAgeSeconds: 24 * 60 * 60 * DAYS_EXP }),
+    ],
+  }),
+);
+
 /**
  * External urls cache strategy
  */