PWA: Update check rework per feedback

4 files changed, 61 insertions, 59 deletions

diff --git a/modern/src/App.jsx b/modern/src/App.jsx
index 3e491d49..631b9718 100644
--- a/modern/src/App.jsx
+++ b/modern/src/App.jsx
@@ -8,7 +8,7 @@ import SocketController from './SocketController';
 import CachingController from './CachingController';
 import { useEffectAsync } from './reactHelper';
 import { sessionActions } from './store';
-import ReloadPrompt from './ReloadPrompt';
+import UpdateCheckPrompt from './UpdateCheckPrompt';
 
 const useStyles = makeStyles(() => ({
   page: {
@@ -49,7 +49,7 @@ const App = () => {
     <>
       <SocketController />
       <CachingController />
-      <ReloadPrompt />
+      <UpdateCheckPrompt />
       <div className={classes.page}>
         <Outlet />
       </div>
diff --git a/modern/src/ReloadPrompt.tsx b/modern/src/ReloadPrompt.tsx
deleted file mode 100644
index 05ebfaf3..00000000
--- a/modern/src/ReloadPrompt.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-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 ReloadPrompt() {
-  const t = useTranslation();
-
-  const serviceWorkerUpdateInterval = useAttributePreference('serviceWorkerUpdateInterval', 3600000);
-
-  const {
-    needRefresh: [needRefresh],
-    updateServiceWorker,
-  } = useRegisterSW({
-    onRegisteredSW(swUrl, r) {
-      serviceWorkerUpdateInterval > 0 && r && setInterval(async () => {
-        if (!(!r.installing && navigator)) {
-          return;
-        }
-  
-        if (('connection' in navigator) && !navigator.onLine) {
-          return;
-        }
-  
-        const resp = await fetch(swUrl, {
-          cache: 'no-store',
-          headers: {
-            'cache': 'no-store',
-            'cache-control': 'no-cache',
-          },
-        });
-  
-        if (resp?.status === 200) {
-          await r.update();
-        }
-      }, serviceWorkerUpdateInterval)
-    }
-  });
-
-  return (
-    <Snackbar 
-      open={needRefresh} 
-      message={t('updateAvailable')}
-      action={(
-        <Button onClick={() => updateServiceWorker(true)}>
-          {t('sharedReload')}
-        </Button>
-      )}
-      />
-  );
-}
-
-export default ReloadPrompt;
diff --git a/modern/src/UpdateCheckPrompt.tsx b/modern/src/UpdateCheckPrompt.tsx
new file mode 100644
index 00000000..096cca8a
--- /dev/null
+++ b/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;
diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json
index a0f3b22b..05c8d54e 100644
--- a/modern/src/resources/l10n/en.json
+++ b/modern/src/resources/l10n/en.json
@@ -99,8 +99,6 @@
     "sharedImport": "Import",
     "sharedColumns": "Columns",
     "sharedDropzoneText": "Drag and drop a file here or click",
-    "sharedReload": "Reload",
-    "updateAvailable": "New update available, click on the reload button to update.",
     "calendarSimple": "Simple",
     "calendarRecurrence": "Recurrence",
     "calendarOnce": "Once",
@@ -229,6 +227,8 @@
     "settingsTotpEnable": "Enable One-time Password",
     "settingsTotpForce": "Force One-time Password",
     "settingsServiceWorkerUpdateInterval": "ServiceWorker Update Interval",
+    "settingsReload": "Reload",
+    "settingsUpdateAvailable": "New update available, click on the reload button to update.",
     "reportTitle": "Reports",
     "reportScheduled": "Scheduled Reports",
     "reportDevice": "Device",