ClaudeandClaude Opus 5.5
20bf5afe28
Auf dem Handy (unter 880 px und Handys quer) sieht der Kundenbereich aus wie eine App; der Desktop bleibt pixelgleich. - Kopfzeile als App-Leiste: Logo, beim Scrollen der Seitentitel, Avatar - Navigation als Tab-Leiste unten mit Symbolen und Zaehlern; neuer Tab "Wartung" mit der Abo-Karte, Stundenkonto/Bestellung und Uebernahmegutschrift als Unterseiten mit Zurueck (auch Android-Geste) - Konto als Bottom-Sheet (Ansprechpartner, Vertraege kuendigen/widerrufen, Rechtliches, Abmelden), am Desktop als Popover unter dem Avatar - Rechnungen als Karten, Fortschritt als Zeitleiste, Chat fuellt den Bildschirm; bei offener Tastatur verschwindet die Tab-Leiste (kommt auch nach der Android-Zurueck-Geste wieder) - Installierbar: Manifest, App-Icons (WEBklar-Logo), Favicon, Hinweis "Zum Home-Bildschirm"; Service Worker nur fuer die Offline-Seite, Kundendaten werden nicht zwischengespeichert - Installierte App: Kuendigen/Widerrufen mit Link zurueck in den Kundenbereich (nur dort sichtbar, Texte unveraendert); Login-Links zu Bedingungen/Datenschutz/Impressum oeffnen wie im Dashboard ein neues Fenster - Login mit App-Icon und Abstaenden fuer Statusleiste/Home-Balken - Hinweise "in der Seitenleiste" haben auf dem Handy eine eigene Fassung Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
// Service Worker des Kundenbereichs: macht die App installierbar (Homescreen) und zeigt ohne
|
|
// Internet eine Offline-Seite. Kundendaten (Seiten, API, PDFs) werden bewusst NICHT
|
|
// zwischengespeichert - alles kommt immer frisch vom Server. Bei Aenderungen CACHE hochzaehlen.
|
|
const CACHE = 'kb-offline-v1'
|
|
const OFFLINE_URL = '/offline.html'
|
|
|
|
self.addEventListener('install', (event) => {
|
|
event.waitUntil(
|
|
caches.open(CACHE)
|
|
.then((cache) => cache.add(new Request(OFFLINE_URL, { cache: 'reload' })))
|
|
.then(() => self.skipWaiting())
|
|
)
|
|
})
|
|
|
|
self.addEventListener('activate', (event) => {
|
|
event.waitUntil((async () => {
|
|
for (const key of await caches.keys()) {
|
|
if (key !== CACHE) await caches.delete(key)
|
|
}
|
|
// Seitenaufrufe starten parallel zum Hochfahren des Workers (kein Zeitverlust)
|
|
if (self.registration.navigationPreload) await self.registration.navigationPreload.enable()
|
|
await self.clients.claim()
|
|
})())
|
|
})
|
|
|
|
// Nur Seitenaufrufe: Netz zuerst, bei fehlender Verbindung die Offline-Seite.
|
|
// Alle anderen Anfragen (API, Bilder, Downloads) laufen unveraendert ans Netz.
|
|
self.addEventListener('fetch', (event) => {
|
|
const { request } = event
|
|
if (request.mode !== 'navigate' || request.method !== 'GET') return
|
|
event.respondWith((async () => {
|
|
try {
|
|
const preloaded = await event.preloadResponse
|
|
if (preloaded) return preloaded
|
|
return await fetch(request)
|
|
} catch {
|
|
const cache = await caches.open(CACHE)
|
|
return (await cache.match(OFFLINE_URL)) || Response.error()
|
|
}
|
|
})())
|
|
})
|