🐛(service-worker) fix sw registration and page reload logic

When a new service worker is installed, the page
was reloaded to ensure the new service worker took
control, it is not a big issue in normal browsing mode
because the service worker is only updated once in a
while (every release).
However, in incognito mode, the service worker has to be
re-registered on each new session, which means that
the page was reloading each time the user opened a
new incognito window, creating a bad user experience.
We now take in consideration the case where the
service-worker is installed for the first time, and don't
reload if it is this case.

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Fixed
+
+🐛(service-worker) fix sw registration and page reload logic #1500
+
 ## [3.8.1] - 2025-10-17
 
 ### Fixed

src/frontend/apps/impress/src/features/service-worker/hooks/useSWRegister.tsx

@@ -3,51 +3,69 @@ import { useEffect } from 'react';
 export const useSWRegister = () => {
   useEffect(() => {
     if (
-      'serviceWorker' in navigator &&
-      process.env.NEXT_PUBLIC_SW_DEACTIVATED !== 'true'
+      !('serviceWorker' in navigator) ||
+      process.env.NEXT_PUBLIC_SW_DEACTIVATED === 'true'
     ) {
-      navigator.serviceWorker
-        .register(`/service-worker.js`)
-        .then((registration) => {
-          registration.onupdatefound = () => {
-            const newWorker = registration.installing;
-            if (!newWorker) {
-              return;
+      return;
+    }
+
+    const hadControllerAtStart = !!navigator.serviceWorker.controller;
+
+    navigator.serviceWorker
+      .register(`/service-worker.js`)
+      .then((registration) => {
+        registration.onupdatefound = () => {
+          const newWorker = registration.installing;
+          if (!newWorker) {
+            return;
+          }
+
+          newWorker.onstatechange = () => {
+            if (
+              newWorker.state === 'installed' &&
+              navigator.serviceWorker.controller
+            ) {
+              newWorker.postMessage({ type: 'SKIP_WAITING' });
             }
-
-            newWorker.onstatechange = () => {
-              if (
-                newWorker.state === 'installed' &&
-                navigator.serviceWorker.controller
-              ) {
-                newWorker.postMessage({ type: 'SKIP_WAITING' });
-              }
-            };
           };
-        })
-        .catch((err) => {
-          console.error('Service worker registration failed:', err);
-        });
+        };
+      })
+      .catch((err) => {
+        console.error('Service worker registration failed:', err);
+      });
 
-      let refreshing = false;
-      const onControllerChange = () => {
-        if (refreshing) {
-          return;
-        }
-        refreshing = true;
+    let refreshing = false;
+    const onControllerChange = () => {
+      if (!hadControllerAtStart || refreshing) {
+        return;
+      }
+
+      refreshing = true;
+
+      if (document.visibilityState === 'visible') {
         window.location.reload();
+        return;
+      }
+
+      const onVisible = () => {
+        if (document.visibilityState === 'visible') {
+          window.location.reload();
+        }
       };
-      navigator.serviceWorker.addEventListener(
+
+      document.addEventListener('visibilitychange', onVisible, { once: true });
+    };
+
+    navigator.serviceWorker.addEventListener(
+      'controllerchange',
+      onControllerChange,
+    );
+
+    return () => {
+      navigator.serviceWorker.removeEventListener(
         'controllerchange',
         onControllerChange,
       );
-
-      return () => {
-        navigator.serviceWorker.removeEventListener(
-          'controllerchange',
-          onControllerChange,
-        );
-      };
-    }
+    };
   }, []);
 };