fix(frontend): destroy service worker in dev mode

If the application is run in both production and development mode on the
same domain, make sure to clean up the production service worker.

5 files changed, 15 insertions, 2 deletions

diff --git a/.gitignore b/.gitignore
index 8fedc4bd..56961dd2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,7 @@
 !.yarn/versions
 bin/
 build/
+dev-dist/
 emf-gen/
 xtend-gen/
 *.xtendbin
diff --git a/subprojects/frontend/.eslintrc.cjs b/subprojects/frontend/.eslintrc.cjs
index 68636f4e..625aab7a 100644
--- a/subprojects/frontend/.eslintrc.cjs
+++ b/subprojects/frontend/.eslintrc.cjs
@@ -36,7 +36,7 @@ module.exports = {
   env: {
     browser: true,
   },
-  ignorePatterns: ['build/**/*'],
+  ignorePatterns: ['build/**/*', 'dev-dist/**/*'],
   rules: {
     // In typescript, some class methods implementing an inderface do not use `this`:
     // https://github.com/typescript-eslint/typescript-eslint/issues/1103
diff --git a/subprojects/frontend/build.gradle b/subprojects/frontend/build.gradle
index da237411..dd50860c 100644
--- a/subprojects/frontend/build.gradle
+++ b/subprojects/frontend/build.gradle
@@ -93,6 +93,10 @@ tasks.register('serveFrontend', RunYarn) {
         description = 'Start a Vite dev server with hot module replacement.'
 }
 
+tasks.named('clean') {
+        delete 'dev-dist'
+}
+
 sonarqube.properties {
         properties['sonar.sources'] += ['src']
         property 'sonar.nodejs.executable', "${frontend.nodeInstallDirectory.get()}/bin/node"
diff --git a/subprojects/frontend/src/RegisterServiceWorker.tsx b/subprojects/frontend/src/RegisterServiceWorker.tsx
index c9b2e353..5f46bc3d 100644
--- a/subprojects/frontend/src/RegisterServiceWorker.tsx
+++ b/subprojects/frontend/src/RegisterServiceWorker.tsx
@@ -50,7 +50,8 @@ function UpdateSnackbarActions({
 export default function RegisterServiceWorker(): null {
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   useEffect(() => {
-    if (import.meta.env.DEV) {
+    if (window.location.host === 'localhost') {
+      // Do not register service worker during local development.
       return;
     }
     if (!('serviceWorker' in navigator)) {
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index 7c0c2605..bb421788 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -66,6 +66,12 @@ export default defineConfig({
       strategies: 'generateSW',
       registerType: 'prompt',
       injectRegister: null,
+      devOptions: {
+        enabled: true,
+      },
+      // Unregister service worker installed in production mode
+      // if Vite is started in development mode on the same domain.
+      selfDestroying: isDevelopment,
       workbox: {
         globPatterns: [
           '**/*.{css,html,js}',
@@ -74,6 +80,7 @@ export default defineConfig({
         ],
         dontCacheBustURLsMatching: /\.(?:css|js|woff2?)$/,
         navigateFallbackDenylist: [/^\/xtext-service/],
+        sourcemap: isDevelopment,
       },
       includeAssets: ['apple-touch-icon.png', 'favicon.svg', 'mask-icon.svg'],
       manifest: {