baustelle-pwa/sw.js

/* Baustelle PWA Service Worker
 * Pattern nach claude-db #201 (filemtime-basiert):
 * - Cache-Version kommt aus URL-Query ?v=<mtime>, kein manuelles Hochzählen
 * - Network-First für eigene Assets (immer aktuell, Fallback Cache)
 * - skipWaiting() + clients.claim() damit Updates sofort greifen
 * - Web Share Target via POST → share.html
 */

// Cache-Version dynamisch aus ?v=<mtime> — wird von index.php gesetzt
const SW_VERSION = (new URL(self.location.href)).searchParams.get('v') || 'static';
const CACHE = 'baustelle-' + SW_VERSION;

/* Bild-Cache für die Thumbnails aus photo.php — bewusst NICHT versioniert, damit ein
 * Deploy die schon geladenen Fotos nicht wegräumt. Ohne das ist auf der Baustelle ohne
 * Netz kein einziges Foto sichtbar, auch keins, das man vorher schon angesehen hat. */
const MEDIA_CACHE = 'baustelle-media';
const MEDIA_MAX = 300;

async function trimMediaCache() {
    const c = await caches.open(MEDIA_CACHE);
    const keys = await c.keys();
    // keys() liefert in Einfüge-Reihenfolge — die ältesten stehen vorn
    for (let i = 0; i < keys.length - MEDIA_MAX; i++) await c.delete(keys[i]);
}

/* Thumbnails: erst Cache, dann Netz (und im Hintergrund auffrischen).
 * Die URL enthält relpath + Größe, und der Server schickt ein ETag aus der mtime —
 * ein ersetztes Original bekommt damit ohnehin eine neue Antwort. */
async function mediaCacheFirst(request) {
    const c = await caches.open(MEDIA_CACHE);
    const hit = await c.match(request);
    if (hit) {
        // Auffrischen ohne den Nutzer warten zu lassen
        fetch(request).then(r => {
            if (r && r.ok) c.put(request, r.clone()).then(trimMediaCache);
        }).catch(() => null);
        return hit;
    }
    try {
        const r = await fetch(request);
        if (r && r.ok) { await c.put(request, r.clone()); trimMediaCache(); }
        return r;
    } catch (e) {
        // Offline und nichts im Cache — der Aufrufer zeigt seinen Platzhalter
        return new Response('', { status: 504, statusText: 'Offline' });
    }
}
const SHELL = [
    './',
    './index.php',
    './share.html',
    './icons/icon-192.png',
    './icons/icon-512.png',
    './icons/icon.svg',
    // CSS/JS werden mit ?v=<mtime> geladen und dynamisch gecached
    // beim ersten fetch — nicht in SHELL damit Pre-Cache nicht mit alten v's läuft
];

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(
                // MEDIA_CACHE ausnehmen — der überlebt Deploys bewusst
                keys.filter(k => k.startsWith('baustelle-') && k !== CACHE && k !== MEDIA_CACHE)
                    .map(k => caches.delete(k))
            ))
            .then(() => self.clients.claim())
    );
});

/* Web Share Target: POST auf share.html abfangen */
async function handleShareTarget(request) {
    const fd = await request.formData();
    let files = [];
    for (const key of ['photos', 'file', 'files', 'image', 'images']) {
        const v = fd.getAll(key);
        if (v && v.length) files = files.concat(v);
    }
    // Fallback: alle File-Entries im FormData durchsuchen
    if (!files.length) {
        for (const [, v] of fd.entries()) {
            if (v && typeof v === 'object' && v.size !== undefined) files.push(v);
        }
    }

    if (files.length) {
        const db = await new Promise((res, rej) => {
            const req = indexedDB.open('baustelle-pwa-v1', 1);
            req.onupgradeneeded = () => {
                const d = req.result;
                if (!d.objectStoreNames.contains('kv')) d.createObjectStore('kv');
                if (!d.objectStoreNames.contains('queue')) d.createObjectStore('queue', { keyPath: 'id', autoIncrement: true });
            };
            req.onsuccess = () => res(req.result);
            req.onerror = () => rej(req.error);
        });
        const tx = db.transaction('kv', 'readwrite');
        tx.objectStore('kv').put(
            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);
}

self.addEventListener('fetch', (e) => {
    const url = new URL(e.request.url);

    // Web Share Target POST → share.html
    if (e.request.method === 'POST' && url.pathname.endsWith('/share.html')) {
        e.respondWith(handleShareTarget(e.request));
        return;
    }

    // Thumbnails aus photo.php: cache-first, damit die Fotoliste offline steht
    if (e.request.method === 'GET'
        && url.pathname.endsWith('/custom/bericht/api/photo.php')
        && url.searchParams.get('size') === 'thumb') {
        e.respondWith(mediaCacheFirst(e.request));
        return;
    }

    // Übrige API-Requests: nicht cachen, durchreichen
    if (url.pathname.includes('/custom/bericht/api/')) {
        return;
    }

    // Nicht-GETs: durchreichen
    if (e.request.method !== 'GET') {
        return;
    }

    // Eigene Assets: Network-First mit Cache-Fallback
    if (url.origin === location.origin) {
        e.respondWith(
            fetch(e.request)
                .then(response => {
                    // Cache aktualisieren (nur erfolgreiche responses)
                    if (response && response.ok) {
                        const clone = response.clone();
                        caches.open(CACHE).then(c => c.put(e.request, clone)).catch(() => null);
                    }
                    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();
    }
    // Beim Abmelden dürfen keine Kundenfotos auf dem Gerät zurückbleiben
    if (e.data && e.data.type === 'CLEAR_MEDIA') {
        e.waitUntil(caches.delete(MEDIA_CACHE));
    }
});