PWA regularly check for service worker updates and automaticially reload the page

modern/src/App.jsx

@@ -8,6 +8,7 @@ import SocketController from './SocketController';
 import CachingController from './CachingController';
 import { useEffectAsync } from './reactHelper';
 import { sessionActions } from './store';
+import UpdateCheckPrompt from './UpdateCheckPrompt';
 
 const useStyles = makeStyles(() => ({
   page: {
@@ -48,6 +49,7 @@ const App = () => {
     <>
       <SocketController />
       <CachingController />
+      <UpdateCheckPrompt />
       <div className={classes.page}>
         <Outlet />
       </div>

modern/src/UpdateCheckPrompt.tsx

@@ -0,0 +1,57 @@
+import { Snackbar, Button } from '@mui/material';
+import React from 'react'
+import { useTranslation } from './common/components/LocalizationProvider';
+import { useAttributePreference } from './common/util/preferences';
+import { useRegisterSW } from 'virtual:pwa-register/react'
+
+// Based on https://vite-pwa-org.netlify.app/frameworks/react.html
+function UpdateCheckPrompt() {
+  const t = useTranslation();
+
+  const serviceWorkerUpdateInterval = useAttributePreference('serviceWorkerUpdateInterval', 3600000);
+
+  const {
+    needRefresh: [needRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegisteredSW(swUrl, swRegistration) {
+      if (serviceWorkerUpdateInterval > 0 && swRegistration) {
+        setInterval(async () => {
+          if (!(!swRegistration.installing && navigator)) {
+            return;
+          }
+
+          if (('connection' in navigator) && !navigator.onLine) {
+            return;
+          }
+
+          const newSW = await fetch(swUrl, {
+            cache: 'no-store',
+            headers: {
+              'cache': 'no-store',
+              'cache-control': 'no-cache',
+            },
+          });
+
+          if (newSW?.status === 200) {
+            await swRegistration.update();
+          }
+        }, serviceWorkerUpdateInterval);
+      }
+    }
+  });
+
+  return (
+    <Snackbar 
+      open={needRefresh} 
+      message={t('settingsUpdateAvailable')}
+      action={(
+        <Button onClick={() => updateServiceWorker(true)}>
+          {t('settingsReload')}
+        </Button>
+      )}
+      />
+  );
+}
+
+export default UpdateCheckPrompt;

modern/src/common/attributes/useServerAttributes.js

@@ -43,6 +43,10 @@ export default (t) => useMemo(() => ({
     name: t('settingsTotpForce'),
     type: 'boolean',
   },
+  serviceWorkerUpdateInterval: {
+    name: t('settingsServiceWorkerUpdateInterval'),
+    type: 'number',
+  },
   'ui.disableLoginLanguage': {
     name: t('attributeUiDisableLoginLanguage'),
     type: 'boolean',

modern/src/resources/l10n/en.json

@@ -226,6 +226,9 @@
     "settingsDarkMode": "Dark Mode",
     "settingsTotpEnable": "Enable One-time Password",
     "settingsTotpForce": "Force One-time Password",
+    "settingsServiceWorkerUpdateInterval": "ServiceWorker Update Interval",
+    "settingsReload": "Reload",
+    "settingsUpdateAvailable": "There is an update available.",
     "reportTitle": "Reports",
     "reportScheduled": "Scheduled Reports",
     "reportDevice": "Device",

modern/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite-plugin-pwa/react" />

modern/vite.config.js

@@ -19,7 +19,6 @@ export default defineConfig(() => ({
     svgr(),
     react(),
     VitePWA({
-      registerType: 'autoUpdate',
       workbox: {
         navigateFallbackDenylist: [/^\/api/],
       },