feat(web): service worker update button mobile (#7512)

* feat(web): service worker update button mobile * remove refresh state change * refactor sw registration
electricitymaps · Dec 12, 2024 · 4d6e4fc · 4d6e4fc
1 parent 2e66843
commit 4d6e4fc
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 10 deletions.
diff --git a/web/src/features/modals/InfoModal.tsx b/web/src/features/modals/InfoModal.tsx
@@ -8,12 +8,21 @@ import { VerticalDivider } from 'components/Divider';
 import Modal from 'components/Modal';
 import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
+import { useRegisterSW } from 'virtual:pwa-register/react';
 
 import InfoText from './InfoText';
 import { isInfoModalOpenAtom } from './modalAtoms';
 
 export function InfoModalContent() {
   const { t } = useTranslation();
+  const {
+    needRefresh: [needRefresh],
+    updateServiceWorker,
+  } = useRegisterSW();
+
+  const handleUpdate = () => {
+    updateServiceWorker(true);
+  };
 
   return (
     <div className="flex flex-col items-center">
@@ -29,7 +38,18 @@ export function InfoModalContent() {
         <VerticalDivider />
         <LegalNoticeButton />
       </div>
-      <p className="mt-2">{t('info.version', { version: APP_VERSION })}</p>
+      <div className="mt-2 flex items-center gap-2">
+        <p>{t('info.version', { version: APP_VERSION })}</p>
+        {needRefresh && (
+          <button
+            onClick={handleUpdate}
+            className="rounded bg-brand-green px-2 py-1 text-xs text-white hover:bg-brand-green/90"
+            title={t('updatePrompt.update')}
+          >
+            {t('updatePrompt.update')}
+          </button>
+        )}
+      </div>
     </div>
   );
 }

diff --git a/web/src/features/service-worker/UpdatePrompt.tsx b/web/src/features/service-worker/UpdatePrompt.tsx
@@ -12,17 +12,23 @@ function UpdatePrompt() {
     updateServiceWorker,
   } = useRegisterSW({
     onRegisteredSW: (_swURL, registration) => {
-      registration &&
-        setInterval(
-          () => {
-            console.info(`Checking for app update...`);
-            registration.update();
-          },
-          import.meta.env.PROD ? ONE_HOUR : 10 * 1000
-        );
+      if (!registration) {
+        console.warn('Service Worker registration is null');
+        return;
+      }
+
+      setInterval(
+        () => {
+          console.info(`Checking for app update...`);
+          registration.update().catch((error) => {
+            console.error('Failed to update Service Worker:', error);
+          });
+        },
+        import.meta.env.PROD ? ONE_HOUR : 10 * 1000
+      );
     },
     onRegisterError(error) {
-      console.error(`SW registration failed: ${error}`);
+      console.error('SW registration failed:', error);
     },
   });