🔧(frontend) add a buildId to service worker

We add a buildId to the service worker to force
the browser to update the service worker when
the buildId changes.
Before we were on the tag version, but
the browser was not updating the service worker
easily on the staging environment.

src/frontend/apps/impress/next.config.js

@@ -1,5 +1,9 @@
+const crypto = require('crypto');
+
 const { InjectManifest } = require('workbox-webpack-plugin');
 
+const buildId = crypto.randomBytes(256).toString('hex').slice(0, 8);
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export',
@@ -11,6 +15,10 @@ const nextConfig = {
     // Enables the styled-components SWC transform
     styledComponents: true,
   },
+  generateBuildId: () => buildId,
+  env: {
+    NEXT_PUBLIC_BUILD_ID: buildId,
+  },
   webpack(config, { isServer }) {
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) =>

src/frontend/apps/impress/src/core/service-worker/__tests__/_app.test.tsx

@@ -22,6 +22,7 @@ jest.mock('@/core/', () => ({
 
 describe('App', () => {
   it('checks service-worker is register', () => {
+    process.env.NEXT_PUBLIC_BUILD_ID = '123456';
     jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const registerSpy = jest.fn();
@@ -42,11 +43,12 @@ describe('App', () => {
       wrapper: AppWrapper,
     });
 
-    expect(registerSpy).toHaveBeenCalledWith('/service-worker.js');
+    expect(registerSpy).toHaveBeenCalledWith('/service-worker.js?v=123456');
   });
 
   it('checks service-worker is not register', () => {
     process.env.NEXT_PUBLIC_SW_DEACTIVATED = 'true';
+    process.env.NEXT_PUBLIC_BUILD_ID = '123456';
 
     const registerSpy = jest.fn();
     registerSpy.mockImplementation(
@@ -66,6 +68,6 @@ describe('App', () => {
       wrapper: AppWrapper,
     });
 
-    expect(registerSpy).not.toHaveBeenCalledWith('/service-worker.js');
+    expect(registerSpy).not.toHaveBeenCalledWith('/service-worker.js?v=123456');
   });
 });

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

@@ -30,13 +30,15 @@ declare const self: ServiceWorkerGlobalScope & {
 
 self.__WB_DISABLE_DEV_LOGS = true;
 
+const version = `v-${process.env.NEXT_PUBLIC_BUILD_ID}`;
+
 setCacheNameDetails({
   prefix: pkg.name,
-  suffix: `v${pkg.version}`,
+  suffix: version,
 });
 
 const getCacheNameVersion = (cacheName: string) =>
-  `${pkg.name}-${cacheName}-v${pkg.version}`;
+  `${pkg.name}-${cacheName}-${version}`;
 
 /**
  * In development, use NetworkFirst strategy, in production use CacheFirst strategy
@@ -69,7 +71,7 @@ self.addEventListener('install', function (event) {
 });
 
 self.addEventListener('activate', function (event) {
-  const cacheAllow = `v${pkg.version}`;
+  const cacheAllow = `${version}`;
 
   event.waitUntil(
     // Delete old caches

src/frontend/apps/impress/src/pages/_app.tsx

@@ -21,9 +21,11 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
       'serviceWorker' in navigator &&
       process.env.NEXT_PUBLIC_SW_DEACTIVATED !== 'true'
     ) {
-      navigator.serviceWorker.register('/service-worker.js').catch((err) => {
-        console.error('Service worker registration failed:', err);
-      });
+      navigator.serviceWorker
+        .register(`/service-worker.js?v=${process.env.NEXT_PUBLIC_BUILD_ID}`)
+        .catch((err) => {
+          console.error('Service worker registration failed:', err);
+        });
     }
   }, []);