elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

fix(pwa): weiße Seite nach Android-Neustart ohne Master-Key vermeiden

Browse Source 
Erzwingt Login wenn nur die HTTP-Session übrig ist, begrenzt SW-Reloads,
fängt Bootstrap-/Render-Fehler ab und stabilisiert den PWA-Kaltstart.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
elpatron
2026-05-31 11:30:37 +02:00
parent 04b822b263
commit 634eb622fd
6 changed files with 167 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+1 -1
View File
@@ -36,7 +36,7 @@
<script defer data-domain="kapteins-daagbok.eu" src="https://plausible.elpatron.me/js/script.tagged-events.js"></script>
<title>Kapteins Daagbok – Kostenloses digitales Yacht-Logbuch (werbefrei)</title>
</head>
<body>
<body style="margin:0;background:#0b0c10;color:#e2e8f0">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
client/src/App.tsx
+69 -15
View File
@@ -15,7 +15,13 @@ import InvitationAcceptance from './components/InvitationAcceptance.tsx'
import AppTourOverlay from './components/AppTourOverlay.tsx'
import { AppTourProvider, useAppTour, type AppTab } from './context/AppTourContext.tsx'
import { UnsavedChangesProvider, useUnsavedChangesContext } from './context/UnsavedChangesContext.tsx'
import { getActiveMasterKey, logoutUser, checkServerSession } from './services/auth.js'
import {
getActiveMasterKey,
logoutUser,
checkServerSession,
hasUnlockedLocalSession
} from './services/auth.js'
import AppErrorBoundary from './components/AppErrorBoundary.tsx'
import { PlausibleEvents, trackPlausibleEvent } from './services/analytics.js'
import {
applyAppearanceToDocument,
@@ -208,6 +214,52 @@ function App() {
}
}, [])
const clearAuthenticatedAppState = useCallback(() => {
setIsAuthenticated(false)
setActiveLogbookId(null)
setActiveLogbookTitle(null)
setShowUserProfile(false)
setTourSelectedEntryId(null)
setDemoHighlightEntryId(null)
}, [])
/** After PWA/bfcache resume, React state may still say "logged in" while the master key is gone. */
const enforceUnlockedSession = useCallback(() => {
if (isViewerMode || isDemoMode || isAcceptingInvite) return
if (isAuthenticated && !hasUnlockedLocalSession()) {
clearAuthenticatedAppState()
}
}, [
isAuthenticated,
isViewerMode,
isDemoMode,
isAcceptingInvite,
clearAuthenticatedAppState
])
useEffect(() => {
enforceUnlockedSession()
}, [enforceUnlockedSession])
useEffect(() => {
const onPageShow = (event: PageTransitionEvent) => {
if (event.persisted) {
enforceUnlockedSession()
}
}
const onVisibility = () => {
if (document.visibilityState === 'visible') {
enforceUnlockedSession()
}
}
window.addEventListener('pageshow', onPageShow)
document.addEventListener('visibilitychange', onVisibility)
return () => {
window.removeEventListener('pageshow', onPageShow)
document.removeEventListener('visibilitychange', onVisibility)
}
}, [enforceUnlockedSession])
useEffect(() => {
let cancelled = false
@@ -220,9 +272,7 @@ function App() {
localStorage.setItem('active_userid', session.userId)
}
const savedUser = localStorage.getItem('active_username')
const key = getActiveMasterKey()
if (session.authenticated && savedUser && key) {
if (session.authenticated && hasUnlockedLocalSession()) {
setIsAuthenticated(true)
const savedLogbookId = localStorage.getItem('active_logbook_id')
const savedLogbookTitle = localStorage.getItem('active_logbook_title')
@@ -230,6 +280,8 @@ function App() {
setActiveLogbookId(savedLogbookId)
setActiveLogbookTitle(savedLogbookTitle)
}
} else if (session.authenticated) {
clearAuthenticatedAppState()
}
} catch (err) {
if (!cancelled) {
@@ -241,7 +293,7 @@ function App() {
return () => {
cancelled = true
}
}, [])
}, [clearAuthenticatedAppState])
useEffect(() => {
syncRouteFromLocation()
@@ -630,15 +682,17 @@ function App() {
export default function AppWrapper() {
return (
<DialogProvider>
<UnsavedChangesProvider>
<AppTourProvider>
<PwaUpdatePrompt />
<App />
<AppTourOverlay />
</AppTourProvider>
<AppFooter />
</UnsavedChangesProvider>
</DialogProvider>
<AppErrorBoundary>
<DialogProvider>
<UnsavedChangesProvider>
<AppTourProvider>
<PwaUpdatePrompt />
<App />
<AppTourOverlay />
</AppTourProvider>
<AppFooter />
</UnsavedChangesProvider>
</DialogProvider>
</AppErrorBoundary>
)
}
client/src/components/AppErrorBoundary.tsx
+42
View File
@@ -0,0 +1,42 @@
import { Component, type ErrorInfo, type ReactNode } from 'react'
interface Props {
children: ReactNode
}
interface State {
error: Error | null
}
export default class AppErrorBoundary extends Component<Props, State> {
state: State = { error: null }
static getDerivedStateFromError(error: Error): State {
return { error }
}
componentDidCatch(error: Error, info: ErrorInfo) {
console.error('Unhandled app error:', error, info.componentStack)
}
render() {
if (!this.state.error) {
return this.props.children
}
return (
<div className="auth-screen">
<div className="auth-card glass" role="alert">
<h2 style={{ marginTop: 0 }}>Kapteins Daagbok</h2>
<p style={{ color: 'var(--app-text-muted)', lineHeight: 1.5 }}>
Die App ist nach dem Neustart in einen fehlerhaften Zustand geraten. Bitte neu laden
oder die App vollständig beenden und erneut öffnen.
</p>
<button type="button" className="btn primary" style={{ width: '100%', marginTop: 16 }} onClick={() => window.location.reload()}>
Neu laden
</button>
</div>
</div>
)
}
}
client/src/hooks/usePwaUpdate.ts
+7
View File
@@ -6,6 +6,8 @@ const UPDATE_SUPPRESS_KEY = 'pwa_update_suppress_until'
const UPDATE_SUPPRESS_MS = 30_000
const UPDATE_DISMISS_SUPPRESS_MS = 60 * 60 * 1000
const UPDATE_RELOAD_FALLBACK_MS = 2000
/** Prevent Android PWA cold-start reload loops from onNeedReload. */
const PWA_INITIAL_RELOAD_KEY = 'pwa_sw_initial_reload_done'
function isUpdateSuppressed(): boolean {
const suppressUntil = Number(sessionStorage.getItem(UPDATE_SUPPRESS_KEY) || '0')
@@ -50,6 +52,11 @@ export function usePwaUpdate() {
} = useRegisterSW({
immediate: !import.meta.env.DEV,
onNeedReload() {
// First SW takeover requires one reload; guard against repeated reloads on Android PWA resume.
if (sessionStorage.getItem(PWA_INITIAL_RELOAD_KEY)) {
return
}
sessionStorage.setItem(PWA_INITIAL_RELOAD_KEY, '1')
clearUpdateSuppression()
setNeedRefresh(false)
window.location.reload()
client/src/main.tsx
+32 -6
View File
@@ -3,9 +3,11 @@ import { createRoot } from 'react-dom/client'
import 'leaflet/dist/leaflet.css'
import './themes.css'
import './index.css'
import './i18n'
import App from './App.tsx'
import { applyAppearanceToDocument } from './services/appearance.ts'
/** Stale PWA precache on localhost can shadow Vite dev modules and old locale bundles. */
/** Stale PWA precache on localhost can shadow Vite dev modules. */
async function clearDevServiceWorkerCaches(): Promise<void> {
if (!import.meta.env.DEV || !('serviceWorker' in navigator)) return
const regs = await navigator.serviceWorker.getRegistrations()
@@ -16,16 +18,40 @@ async function clearDevServiceWorkerCaches(): Promise<void> {
}
}
function renderBootstrapError(message: string): void {
const root = document.getElementById('root')
if (!root) return
root.innerHTML = `
<div class="auth-screen">
<div class="auth-card glass" role="alert" style="max-width:420px">
<h2 style="margin-top:0">Kapteins Daagbok</h2>
<p style="color:var(--app-text-muted);line-height:1.5">${message}</p>
<button type="button" class="btn primary" style="width:100%;margin-top:16px" onclick="location.reload()">
Neu laden
</button>
</div>
</div>`
}
async function bootstrap(): Promise<void> {
await clearDevServiceWorkerCaches()
await import('./i18n')
const { default: App } = await import('./App.tsx')
applyAppearanceToDocument()
createRoot(document.getElementById('root')!).render(
await clearDevServiceWorkerCaches()
const rootEl = document.getElementById('root')
if (!rootEl) {
throw new Error('Missing #root element')
}
createRoot(rootEl).render(
<StrictMode>
<App />
</StrictMode>,
)
}
void bootstrap()
void bootstrap().catch((err) => {
console.error('App bootstrap failed:', err)
renderBootstrapError(
'Die App konnte nicht gestartet werden. Bitte neu laden oder die App vollständig beenden und erneut öffnen.',
)
})
client/src/services/auth.ts
+16 -1
View File
@@ -33,13 +33,28 @@ export function setActiveMasterKey(key: ArrayBuffer | null) {
}
export async function checkServerSession(): Promise<{ authenticated: boolean; userId?: string }> {
const controller = new AbortController()
const timeoutId = window.setTimeout(() => controller.abort(), 8_000)
try {
return await apiJson<{ authenticated: boolean; userId?: string }>(`${API_BASE}/session`)
return await apiJson<{ authenticated: boolean; userId?: string }>(`${API_BASE}/session`, {
signal: controller.signal
})
} catch {
return { authenticated: false }
} finally {
window.clearTimeout(timeoutId)
}
}
/** Master key is memory-only; after process kill the HTTP session may outlive local crypto state. */
export function hasUnlockedLocalSession(): boolean {
return !!(
getActiveMasterKey() &&
localStorage.getItem('active_username') &&
localStorage.getItem('active_userid')
)
}
export async function reauthWithPasskey(): Promise<boolean> {
const options = await apiJson<any>(`${API_BASE}/reauth-options`, {
method: 'POST'