🐛(service-worker) networkFirst on api request

Some api requests were served by the cache first,
which caused the data to be outdated.
This change makes sure that the api requests
are always served by the network first.

Author: AntoLC

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

@@ -1,5 +1,16 @@
+import pkg from '@/../package.json';
+
 export const SW_DEV_URL = [
   'http://localhost:3000',
   'https://impress.127.0.0.1.nip.io',
   'https://impress-staging.beta.numerique.gouv.fr',
 ];
+
+export const SW_DEV_API = 'http://localhost:8071';
+
+export const SW_VERSION = `v-${process.env.NEXT_PUBLIC_BUILD_ID}`;
+
+export const DAYS_EXP = 5;
+
+export const getCacheNameVersion = (cacheName: string) =>
+  `${pkg.name}-${cacheName}-${SW_VERSION}`;

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

@@ -1,9 +1,12 @@
+import { CacheableResponsePlugin } from 'workbox-cacheable-response';
+import { ExpirationPlugin } from 'workbox-expiration';
 import { registerRoute } from 'workbox-routing';
-import { NetworkOnly } from 'workbox-strategies';
+import { NetworkFirst, NetworkOnly } from 'workbox-strategies';
 
 import { ApiPlugin } from './ApiPlugin';
 import { DocsDB } from './DocsDB';
 import { SyncManager } from './SyncManager';
+import { DAYS_EXP, SW_DEV_API, getCacheNameVersion } from './conf';
 
 declare const self: ServiceWorkerGlobalScope;
 
@@ -14,10 +17,9 @@ self.addEventListener('activate', function (event) {
 });
 
 export const isApiUrl = (href: string) => {
-  const devDomain = 'http://localhost:8071';
   return (
     href.includes(`${self.location.origin}/api/`) ||
-    href.includes(`${devDomain}/api/`)
+    href.includes(`${SW_DEV_API}/api/`)
   );
 };
 
@@ -91,3 +93,17 @@ registerRoute(
   }),
   'DELETE',
 );
+
+registerRoute(
+  ({ url }) => isApiUrl(url.href),
+  new NetworkFirst({
+    cacheName: getCacheNameVersion('api'),
+    plugins: [
+      new CacheableResponsePlugin({ statuses: [0, 200] }),
+      new ExpirationPlugin({
+        maxAgeSeconds: 24 * 60 * 60 * DAYS_EXP,
+      }),
+    ],
+  }),
+  'GET',
+);

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

@@ -19,7 +19,7 @@ import {
 
 // eslint-disable-next-line import/order
 import { ApiPlugin } from './ApiPlugin';
-import { SW_DEV_URL } from './conf';
+import { DAYS_EXP, SW_DEV_URL, SW_VERSION, getCacheNameVersion } from './conf';
 import { isApiUrl } from './service-worker-api';
 
 // eslint-disable-next-line import/order
@@ -31,16 +31,11 @@ declare const self: ServiceWorkerGlobalScope & {
 
 self.__WB_DISABLE_DEV_LOGS = true;
 
-const version = `v-${process.env.NEXT_PUBLIC_BUILD_ID}`;
-
 setCacheNameDetails({
   prefix: pkg.name,
-  suffix: version,
+  suffix: SW_VERSION,
 });
 
-const getCacheNameVersion = (cacheName: string) =>
-  `${pkg.name}-${cacheName}-${version}`;
-
 /**
  * In development, use NetworkFirst strategy, in production use CacheFirst strategy
  * We will be able to test the application in development without having to clear the cache.
@@ -53,7 +48,7 @@ const getStrategy = (
 ): NetworkFirst | CacheFirst => {
   return SW_DEV_URL.some((devDomain) =>
     self.location.origin.includes(devDomain),
-  )
+  ) || isApiUrl(self.location.href)
     ? new NetworkFirst(options)
     : new CacheFirst(options);
 };
@@ -66,7 +61,7 @@ self.addEventListener('install', function (event) {
 });
 
 self.addEventListener('activate', function (event) {
-  const cacheAllow = `${version}`;
+  const cacheAllow = SW_VERSION;
 
   event.waitUntil(
     // Delete old caches
@@ -135,8 +130,6 @@ setCatchHandler(async ({ request, url, event }) => {
   }
 });
 
-const DAYS_EXP = 5;
-
 /**
  * Cache stategy static files images (images / svg)
  */