data/baustelle-pwa
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Service Worker nach claude-db #31 Pattern (Network-First + Auto-Update)
All checks were successful
Deploy baustelle-pwa / deploy (push) Successful in 1s
Details

Browse source 
Problem: User sehen alte Version weil der SW Cache-First ausliefert
und neue Versionen nur nach App-Neustart aktiv werden.

Fix (Pattern aus PWA Best Practices in claude-db #31):
- Network-First für alle eigenen Assets (fetch → ok → cache update,
  bei offline Fallback zum Cache). Vorher: Cache-First.
- self.skipWaiting() direkt nach Install
- self.clients.claim() nach Activate
- updatefound-Listener im index.html → bei neuem SW SKIP_WAITING
  senden, dann controllerchange-Event löst einmaligen Reload aus
- CSS/JS haben jetzt ?v=9 Query-String (Cache-Buster)
- Cache-Version 'baustelle-v9'

Damit zieht sich jede PWA beim nächsten Start automatisch die neueste
Version ohne manuellen Reinstall. Das Share-Target-Manifest-Caching
ist ein separates Android-Thema (dafür braucht's weiterhin Reinstall
der PWA beim ersten Mal).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
This commit is contained in:
Eduard Wisch 2026-04-09 01:17:57 +02:00
parent bb02fb247e
commit f2c41059a6
2 changed files with 86 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
index.html
View file

@ -12,7 +12,7 @@
<link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png"> <link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="icons/icon-512.png"> <link rel="icon" type="image/png" sizes="512x512" href="icons/icon-512.png">
<link rel="apple-touch-icon" href="icons/icon-192.png"> <link rel="apple-touch-icon" href="icons/icon-192.png">
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="app.css?v=9">
</head> </head>
<body> <body>
@ -35,15 +35,34 @@
<div id="toast-container"></div> <div id="toast-container"></div>
<script src="lib/idb.js"></script> <script src="lib/idb.js?v=9"></script>
<script src="lib/api.js"></script> <script src="lib/api.js?v=9"></script>
<script src="lib/offline.js"></script> <script src="lib/offline.js?v=9"></script>
<script src="lib/router.js"></script> <script src="lib/router.js?v=9"></script>
<script src="app.js"></script> <script src="app.js?v=9"></script>
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js').catch(e => console.warn('SW reg failed', e)); navigator.serviceWorker.register('sw.js').then(reg => {
// Update-Check: wenn ein neuer SW wartet, sofort aktivieren
reg.addEventListener('updatefound', () => {
const nw = reg.installing;
if (!nw) return;
nw.addEventListener('statechange', () => {
if (nw.state === 'installed' && navigator.serviceWorker.controller) {
// Neue Version ist bereit — sofort übernehmen
nw.postMessage({ type: 'SKIP_WAITING' });
}
});
});
// Beim Controller-Change einmal neu laden (damit neuer SW aktive Clients kontrolliert)
let refreshed = false;
navigator.serviceWorker.addEventListener('controllerchange', () => {
if (refreshed) return;
refreshed = true;
window.location.reload();
});
}).catch(e => console.warn('SW reg failed', e));
}); });
} }
</script> </script>

104
sw.js
View file

@ -1,10 +1,11 @@
/* Baustelle PWA Service Worker. /* Baustelle PWA Service Worker — v9
* Cache-Strategie: * Pattern nach claude-db #31:
* - App-Shell (HTML/CSS/JS): cache-first, network update * - Network-First für eigene Assets (immer aktuell, Fallback Cache)
* - API-Calls: network-first, kein offline-cache (da auth-pflichtig) * - skipWaiting() + clients.claim() damit Updates sofort greifen
* - Web Share Target via POST → share.html
*/ */
const CACHE = 'baustelle-v8'; const CACHE = 'baustelle-v9';
const SHELL = [ const SHELL = [
'./', './',
'./index.html', './index.html',
@ -18,13 +19,30 @@ const SHELL = [
'./lib/router.js', './lib/router.js',
'./icons/icon-192.png', './icons/icon-192.png',
'./icons/icon-512.png', './icons/icon-512.png',
'./icons/icon.svg',
]; ];
// Web Share Target: eingehende POSTs an share.html abfangen und in IDB zwischenspeichern self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE)
.then(c => c.addAll(SHELL).catch(() => null))
.then(() => self.skipWaiting())
);
});
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys()
.then(keys => Promise.all(
keys.filter(k => k !== CACHE).map(k => caches.delete(k))
))
.then(() => self.clients.claim())
);
});
/* Web Share Target: POST auf share.html abfangen */
async function handleShareTarget(request) { async function handleShareTarget(request) {
const fd = await request.formData(); const fd = await request.formData();
// Alle bekannten Feldnamen durchprobieren — verschiedene Android-Gallery-Apps
// nutzen unterschiedliche Namen
let files = []; let files = [];
for (const key of ['photos', 'file', 'files', 'image', 'images']) { for (const key of ['photos', 'file', 'files', 'image', 'images']) {
const v = fd.getAll(key); const v = fd.getAll(key);
@ -32,10 +50,11 @@ async function handleShareTarget(request) {
} }
// Fallback: alle File-Entries im FormData durchsuchen // Fallback: alle File-Entries im FormData durchsuchen
if (!files.length) { if (!files.length) {
for (const [k, v] of fd.entries()) { for (const [, v] of fd.entries()) {
if (v && typeof v === 'object' && v.size !== undefined) files.push(v); if (v && typeof v === 'object' && v.size !== undefined) files.push(v);
} }
} }
if (files.length) { if (files.length) {
const db = await new Promise((res, rej) => { const db = await new Promise((res, rej) => {
const req = indexedDB.open('baustelle-pwa-v1', 1); const req = indexedDB.open('baustelle-pwa-v1', 1);
@ -48,30 +67,19 @@ async function handleShareTarget(request) {
req.onerror = () => rej(req.error); req.onerror = () => rej(req.error);
}); });
const tx = db.transaction('kv', 'readwrite'); const tx = db.transaction('kv', 'readwrite');
tx.objectStore('kv').put(files.map(f => ({ name: f.name, type: f.type, data: f })), 'shared_files'); tx.objectStore('kv').put(
await new Promise(res => tx.oncomplete = res); files.map(f => ({ name: f.name || 'photo.jpg', type: f.type || 'image/jpeg', data: f })),
'shared_files'
);
await new Promise(res => { tx.oncomplete = res; });
} }
return Response.redirect('./share.html', 303); return Response.redirect('./share.html', 303);
} }
self.addEventListener('install', (e) => {
e.waitUntil(caches.open(CACHE).then(c => c.addAll(SHELL).catch(() => null)));
self.skipWaiting();
});
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(keys => Promise.all(
keys.filter(k => k !== CACHE).map(k => caches.delete(k))
))
);
self.clients.claim();
});
self.addEventListener('fetch', (e) => { self.addEventListener('fetch', (e) => {
const url = new URL(e.request.url); const url = new URL(e.request.url);
// Web Share Target: POST auf share.html abfangen // Web Share Target POST → share.html
if (e.request.method === 'POST' && url.pathname.endsWith('/share.html')) { if (e.request.method === 'POST' && url.pathname.endsWith('/share.html')) {
e.respondWith(handleShareTarget(e.request)); e.respondWith(handleShareTarget(e.request));
return; return;
@ -79,28 +87,36 @@ self.addEventListener('fetch', (e) => {
// API-Requests: nicht cachen, durchreichen // API-Requests: nicht cachen, durchreichen
if (url.pathname.includes('/custom/bericht/api/')) { if (url.pathname.includes('/custom/bericht/api/')) {
return; // default network return;
} }
// App-Shell: cache-first // Nicht-GETs: durchreichen
if (e.request.method === 'GET' && url.origin === location.origin) { if (e.request.method !== 'GET') {
return;
}
// Eigene Assets: Network-First mit Cache-Fallback
if (url.origin === location.origin) {
e.respondWith( e.respondWith(
caches.match(e.request).then(hit => { fetch(e.request)
if (hit) { .then(response => {
// Background-Update // Cache aktualisieren (nur erfolgreiche responses)
fetch(e.request).then(r => { if (response && response.ok) {
if (r.ok) caches.open(CACHE).then(c => c.put(e.request, r.clone())); const clone = response.clone();
}).catch(() => null); caches.open(CACHE).then(c => c.put(e.request, clone)).catch(() => null);
return hit;
}
return fetch(e.request).then(r => {
if (r.ok) {
const clone = r.clone();
caches.open(CACHE).then(c => c.put(e.request, clone));
} }
return r; return response;
}); })
}) .catch(() => caches.match(e.request))
); );
return;
}
});
/* Message-Handler: Client kann "SKIP_WAITING" schicken um ein wartenden SW
* sofort zu aktivieren (für In-App-Update-Button). */
self.addEventListener('message', (e) => {
if (e.data && e.data.type === 'SKIP_WAITING') {
self.skipWaiting();
} }
}); });