PWA: Move to a Reload Prompt model - WIP

5 files changed, 69 insertions, 28 deletions

diff --git a/modern/src/ReloadPrompt.tsx b/modern/src/ReloadPrompt.tsx
new file mode 100644
index 00000000..1f93f913
--- /dev/null
+++ b/modern/src/ReloadPrompt.tsx
@@ -0,0 +1,61 @@
+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 serviceWorkerUpdateInterval = 60000;
+
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegisteredSW(swUrl, r) {
+      console.log('serviceWorkerUpdateCheck', serviceWorkerUpdateInterval);
+
+      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 color="secondary" size="small" onClick={() => updateServiceWorker(true)}>
+          {t('sharedReload')}
+        </Button>
+      )}
+      />
+  );
+}
+
+export default ReloadPrompt;
\ No newline at end of file
diff --git a/modern/src/common/attributes/useServerAttributes.js b/modern/src/common/attributes/useServerAttributes.js
index 4339840e..e724c2b0 100644
--- a/modern/src/common/attributes/useServerAttributes.js
+++ b/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',
diff --git a/modern/src/index.jsx b/modern/src/index.jsx
index 33524e97..0c342b23 100644
--- a/modern/src/index.jsx
+++ b/modern/src/index.jsx
@@ -16,33 +16,7 @@ import NativeInterface from './common/components/NativeInterface';
 import ServerProvider from './ServerProvider';
 import ErrorBoundary from './ErrorBoundary';
 import AppThemeProvider from './AppThemeProvider';
-import { registerSW } from 'virtual:pwa-register'
-
-const ServiceWorkerUpdateCheckInterval = 60 * 60 * 1000;
-
-registerSW({
-  onRegisteredSW(swUrl, r) {
-    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()
-    }, ServiceWorkerUpdateCheckInterval)
-  },
-  immediate: true
-});
+import ReloadPrompt from './ReloadPrompt';
 
 preloadImages();
 
@@ -58,6 +32,7 @@ root.render(
               <BrowserRouter>
                 <Navigation />
               </BrowserRouter>
+              <ReloadPrompt />
               <ErrorHandler />
               <NativeInterface />
             </ServerProvider>
diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json
index ed9516b5..01779c1e 100644
--- a/modern/src/resources/l10n/en.json
+++ b/modern/src/resources/l10n/en.json
@@ -99,6 +99,8 @@
     "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",
diff --git a/modern/vite.config.js b/modern/vite.config.js
index 200579da..9f6df445 100644
--- a/modern/vite.config.js
+++ b/modern/vite.config.js
@@ -19,7 +19,6 @@ export default defineConfig(() => ({
     svgr(),
     react(),
     VitePWA({
-      registerType: 'autoUpdate',
       workbox: {
         navigateFallbackDenylist: [/^\/api/],
       },