From 268500237dd3c76286393289306bb0aad14afc6b Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Fri, 29 May 2026 18:33:43 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20PWA-Update-Banner=20nach=20Reload=20zuve?=
 =?UTF-8?q?rl=C3=A4ssig=20ausblenden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

needRefresh zurücksetzen, Reload-Fallback ergänzen und kurze Suppression nach Update,
damit die Benachrichtigung nicht erneut erscheint.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 client/src/components/PwaUpdatePrompt.tsx | 11 +++--
 client/src/hooks/usePwaUpdate.ts          | 52 +++++++++++++++++++++--
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/client/src/components/PwaUpdatePrompt.tsx b/client/src/components/PwaUpdatePrompt.tsx
index dc1e575..491c9ee 100644
--- a/client/src/components/PwaUpdatePrompt.tsx
+++ b/client/src/components/PwaUpdatePrompt.tsx
@@ -5,17 +5,16 @@ import { usePwaUpdate } from '../hooks/usePwaUpdate.js'
 
 export default function PwaUpdatePrompt() {
   const { t } = useTranslation()
-  const { needRefresh, updateApp } = usePwaUpdate()
+  const { needRefresh, updateApp, dismissUpdate } = usePwaUpdate()
   const [updating, setUpdating] = useState(false)
-  const [dismissed, setDismissed] = useState(false)
 
-  if (!needRefresh || dismissed) return null
+  if (!needRefresh) return null
 
   const handleUpdate = async () => {
     setUpdating(true)
     try {
       await updateApp()
-    } finally {
+    } catch {
       setUpdating(false)
     }
   }
@@ -43,7 +42,7 @@ export default function PwaUpdatePrompt() {
         <button
           type="button"
           className="pwa-update-link"
-          onClick={() => setDismissed(true)}
+          onClick={dismissUpdate}
         >
           {t('pwa.later')}
         </button>
@@ -52,7 +51,7 @@ export default function PwaUpdatePrompt() {
       <button
         type="button"
         className="pwa-update-close"
-        onClick={() => setDismissed(true)}
+        onClick={dismissUpdate}
         aria-label={t('pwa.later')}
       >
         <X size={18} />
diff --git a/client/src/hooks/usePwaUpdate.ts b/client/src/hooks/usePwaUpdate.ts
index 206387e..51f606e 100644
--- a/client/src/hooks/usePwaUpdate.ts
+++ b/client/src/hooks/usePwaUpdate.ts
@@ -2,9 +2,26 @@ import { useEffect, useRef } from 'react'
 import { useRegisterSW } from 'virtual:pwa-register/react'
 
 const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000
+const UPDATE_SUPPRESS_KEY = 'pwa_update_suppress_until'
+const UPDATE_SUPPRESS_MS = 30_000
+const UPDATE_RELOAD_FALLBACK_MS = 2000
+
+function isUpdateSuppressed(): boolean {
+  const suppressUntil = Number(sessionStorage.getItem(UPDATE_SUPPRESS_KEY) || '0')
+  return Date.now() < suppressUntil
+}
+
+function suppressUpdatePrompt(): void {
+  sessionStorage.setItem(UPDATE_SUPPRESS_KEY, String(Date.now() + UPDATE_SUPPRESS_MS))
+}
+
+function clearUpdateSuppression(): void {
+  sessionStorage.removeItem(UPDATE_SUPPRESS_KEY)
+}
 
 function scheduleUpdateChecks(registration: ServiceWorkerRegistration): () => void {
   const checkForUpdate = () => {
+    if (isUpdateSuppressed()) return
     registration.update().catch(() => {})
   }
 
@@ -27,28 +44,57 @@ export function usePwaUpdate() {
   const cleanupRef = useRef<(() => void) | null>(null)
 
   const {
-    needRefresh: [needRefresh],
+    needRefresh: [needRefresh, setNeedRefresh],
     updateServiceWorker
   } = useRegisterSW({
     immediate: true,
+    onNeedReload() {
+      clearUpdateSuppression()
+      setNeedRefresh(false)
+      window.location.reload()
+    },
+    onNeedRefresh() {
+      if (isUpdateSuppressed()) return
+      setNeedRefresh(true)
+    },
     onRegisteredSW(_swUrl: string, registration: ServiceWorkerRegistration | undefined) {
       if (!registration) return
 
+      if (isUpdateSuppressed() || !registration.waiting) {
+        setNeedRefresh(false)
+      }
+
       cleanupRef.current?.()
       cleanupRef.current = scheduleUpdateChecks(registration)
     }
   })
 
   useEffect(() => {
+    if (isUpdateSuppressed()) {
+      setNeedRefresh(false)
+    }
+
     return () => {
       cleanupRef.current?.()
       cleanupRef.current = null
     }
-  }, [])
+  }, [setNeedRefresh])
 
   const updateApp = async () => {
+    setNeedRefresh(false)
+    suppressUpdatePrompt()
+
     await updateServiceWorker(true)
+
+    // vite-plugin-pwa reloads via the "controlling" event; fallback if that does not fire.
+    window.setTimeout(() => {
+      window.location.reload()
+    }, UPDATE_RELOAD_FALLBACK_MS)
   }
 
-  return { needRefresh, updateApp }
+  const dismissUpdate = () => {
+    setNeedRefresh(false)
+  }
+
+  return { needRefresh, updateApp, dismissUpdate }
 }