Poll for PWA updates

Author: coder13

src/hooks/useRegisterSW/pwaUpdatePolling.test.ts

@@ -0,0 +1,44 @@
+import { startPWAUpdatePolling } from './pwaUpdatePolling';
+
+describe('startPWAUpdatePolling', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('checks for updates immediately and on the polling interval while visible', () => {
+    const registration = { update: jest.fn() };
+
+    const stopPolling = startPWAUpdatePolling(registration, {
+      intervalMs: 1_000,
+      isVisible: () => true,
+    });
+
+    expect(registration.update).toHaveBeenCalledTimes(1);
+
+    jest.advanceTimersByTime(2_000);
+
+    expect(registration.update).toHaveBeenCalledTimes(3);
+
+    stopPolling();
+    jest.advanceTimersByTime(1_000);
+
+    expect(registration.update).toHaveBeenCalledTimes(3);
+  });
+
+  it('skips update checks while the tab is hidden', () => {
+    const registration = { update: jest.fn() };
+
+    startPWAUpdatePolling(registration, {
+      intervalMs: 1_000,
+      isVisible: () => false,
+    });
+
+    jest.advanceTimersByTime(2_000);
+
+    expect(registration.update).not.toHaveBeenCalled();
+  });
+});

src/hooks/useRegisterSW/pwaUpdatePolling.ts

@@ -0,0 +1,28 @@
+export const PWA_UPDATE_CHECK_INTERVAL_MS = 60_000;
+
+type UpdateableServiceWorkerRegistration = Pick<ServiceWorkerRegistration, 'update'>;
+
+interface StartPWAUpdatePollingOptions {
+  intervalMs?: number;
+  isVisible?: () => boolean;
+}
+
+export function startPWAUpdatePolling(
+  registration: UpdateableServiceWorkerRegistration,
+  {
+    intervalMs = PWA_UPDATE_CHECK_INTERVAL_MS,
+    isVisible = () => document.visibilityState === 'visible',
+  }: StartPWAUpdatePollingOptions = {},
+) {
+  const checkForUpdate = () => {
+    if (isVisible()) {
+      void registration.update();
+    }
+  };
+
+  checkForUpdate();
+
+  const intervalId = window.setInterval(checkForUpdate, intervalMs);
+
+  return () => window.clearInterval(intervalId);
+}

src/hooks/useRegisterSW/useRegisterSW.ts

@@ -1,23 +1,38 @@
 import { registerSW } from 'virtual:pwa-register';
 import { useEffect, useRef, useState } from 'react';
+import { startPWAUpdatePolling } from './pwaUpdatePolling';
 
 export function usePWAUpdate() {
   const [updateAvailable, setUpdateAvailable] = useState(false);
   const updateSWRef = useRef<(reloadPage?: boolean) => Promise<void>>();
+  const stopUpdatePollingRef = useRef<() => void>();
 
   useEffect(() => {
     if (!import.meta.env.PROD) {
       return;
     }
 
     updateSWRef.current = registerSW({
+      immediate: true,
       onNeedRefresh() {
         setUpdateAvailable(true);
       },
+      onRegisteredSW(_swUrl, registration) {
+        if (!registration) {
+          return;
+        }
+
+        stopUpdatePollingRef.current?.();
+        stopUpdatePollingRef.current = startPWAUpdatePolling(registration);
+      },
       onOfflineReady() {
         // optionally notify
       },
     });
+
+    return () => {
+      stopUpdatePollingRef.current?.();
+    };
   }, []);
 
   const updateSW = async (reloadPage = true) => {

vite.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
     viteTsconfigPaths(),
     ViteYaml(),
     VitePWA({
-      registerType: 'autoUpdate',
+      registerType: 'prompt',
       workbox: {
         importScripts: ['notification-sw.js'],
       },