data/baustelle-pwa
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Mobile PWA für Baustellen-Doku — Foto-Upload, Sprachnotizen, Skizzen, offline-fähig. SvelteKit + Workbox.
16 commits 1 branch 0 tags 1.3 MiB
JavaScript 81.2%
CSS 13.6%
PHP 3.4%
HTML 1.8%
Find a file
Eduard Wisch 7c9563ec90
All checks were successful
Deploy baustelle-pwa / deploy (push) Successful in 1s
Details
feat: PWA Cache-Busting via filemtime (claude-db #201) — kein manuelles Hochzählen mehr 
Das bisherige 'CACHE = baustelle-vN' Pattern erforderte, dass ich bei
jeder Änderung drei Stellen synchron halte (sw.js, index.html ?v=,
manifest). Eddy hat klargestellt dass das nicht akzeptabel ist.

Fix nach KB #201 Pattern (referenz: dolibarr.stundenzettel v2.2.0):

1. index.html → index.php
   PHP berechnet bei jedem Request filemtime() von app.css, app.js,
   lib/*.js, manifest.webmanifest. Die mtimes kommen automatisch
   beim Deploy (rsync preserviert sie default) und werden als ?v=
   an alle Asset-URLs gehängt.

2. sw.js liest Version aus eigener URL-Query:
   const SW_VERSION = (new URL(self.location.href)).searchParams.get('v')
   const CACHE = 'baustelle-' + SW_VERSION
   activate() löscht alle caches die mit 'baustelle-' anfangen aber
   nicht der aktuelle sind.

3. Client-Registration mit Auto-Update:
   - setInterval 60s reg.update()
   - visibilitychange-Listener für Tab-Fokus
   - updatefound → SKIP_WAITING postMessage
   - controllerchange → einmaliger location.reload

4. SHELL pre-cache enthält nur statische Dateien (index.php, share.html,
   icons). CSS/JS werden beim ersten fetch dynamisch gecached — so
   gibt es keinen Mix zwischen alten und neuen ?v= Versionen.

5. manifest.webmanifest start_url auf /custom/baustelle/index.php

Ergebnis: Ich deploye → mtime ändert sich → neue URLs → Browser holt
frische Files → SW aktiviert automatisch beim nächsten Tab-Fokus.
Nie wieder manuelles Hochzählen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
2026-04-09 01:26:26 +02:00
.forgejo/workflows fix: Deploy nach modules/baustelle/ statt baustelle/ 2026-04-08 22:56:42 +02:00
icons feat: Neues PWA-Logo — Klemmbrett mit Schraubenschlüssel (SVG + PNG) 2026-04-09 01:12:47 +02:00
lib feat: Phase 4 Block 1 — Seite bearbeiten, PDF-Vorschau, Unterschrift, Share Target 2026-04-09 01:00:24 +02:00
.gitignore feat: Initiales Release Baustelle PWA v1.0.0 [deploy] 2026-04-08 22:50:01 +02:00
app.css feat: Phase 4 Block 1 — Seite bearbeiten, PDF-Vorschau, Unterschrift, Share Target 2026-04-09 01:00:24 +02:00
app.js feat: Phase 4 Block 1 — Seite bearbeiten, PDF-Vorschau, Unterschrift, Share Target 2026-04-09 01:00:24 +02:00
index.php feat: PWA Cache-Busting via filemtime (claude-db #201) — kein manuelles Hochzählen mehr 2026-04-09 01:26:26 +02:00
manifest.webmanifest feat: PWA Cache-Busting via filemtime (claude-db #201) — kein manuelles Hochzählen mehr 2026-04-09 01:26:26 +02:00
README.md feat: Initiales Release Baustelle PWA v1.0.0 [deploy] 2026-04-08 22:50:01 +02:00
share.html feat: Phase 4 Block 1 — Seite bearbeiten, PDF-Vorschau, Unterschrift, Share Target 2026-04-09 01:00:24 +02:00
sw.js feat: PWA Cache-Busting via filemtime (claude-db #201) — kein manuelles Hochzählen mehr 2026-04-09 01:26:26 +02:00

README.md

Baustelle PWA

Mobile Progressive Web App für die Baustellen-Doku — Foto-Upload, Sprachnotizen, Skizzen, offline-fähig. Spricht die REST-API des Dolibarr-Bericht-Moduls.

Stack

  • Vanilla JavaScript — kein Build, keine Framework-Abhängigkeit
  • Service Worker für App-Shell-Cache (Workbox-frei, eigene Implementierung)
  • IndexedDB für JWT-Storage und Offline-Upload-Queue
  • REST API des bericht-Dolibarr-Moduls unter /custom/bericht/api/

Features (MVP)

  • ✅ Login mit Dolibarr-Credentials → JWT (7 Tage gültig)
  • ✅ Auftragsliste mit Suche, gefiltert auf eigene Aufträge (Multi-User)
  • ✅ Auftragsdetail mit Kunde, Adresse, Telefon (Click-to-Call)
  • ✅ Foto-Aufnahme direkt aus der Kamera oder aus Galerie
  • ✅ Clientseitige Bild-Verkleinerung auf 2000px (JPEG q=0.85)
  • ✅ Offline-Queue: bei fehlgeschlagenem Upload landet das Foto in IndexedDB
  • ✅ Auto-Sync wenn wieder online (mit Status-Badge)
  • ✅ Service Worker für Offline-Start
  • ✅ Installierbar als PWA (Home-Screen-Icon)

Geplant (Phase 4)

  • Sprachnotizen via MediaRecorder
  • Touch-Skizzen-Editor für Bilder
  • Schnell-Bericht direkt in der PWA erstellen
  • Touch-Unterschrift abnehmen
  • PIN-Schutz / WebAuthn
  • Push-Notifications für neue Aufträge
  • Web Share Target API

Hosting

Wird bei jedem Push nach /srv/http/baustelle/ (lokal) bzw. /mnt/appdata/firma/dolibarr-202509/baustelle/ (prod) deployt. Apache-Alias unter https://awl.data-it-solution.de/baustelle/.

Verzeichnis-Struktur

baustelle-pwa/
├── index.html              App-Shell
├── manifest.webmanifest    PWA Manifest
├── sw.js                   Service Worker
├── app.js                  Hauptlogik (Routes, Views)
├── app.css                 Mobile-first Styling
├── lib/
│   ├── idb.js              IndexedDB-Wrapper
│   ├── api.js              REST-API-Client (JWT)
│   ├── offline.js          Offline-Queue + Sync
│   └── router.js           Hash-Router
└── icons/
    ├── icon-192.png
    └── icon-512.png

API

Die App spricht ausschließlich die Bericht-API:

  • POST /api/auth.php — Login mit Dolibarr-Credentials
  • GET /api/orders.php — Aufträge des Users
  • GET /api/orders.php?id=X — Auftrag-Detail
  • GET /api/orders.php?id=X&action=photos — Anhang-Liste
  • POST /api/orders.php?id=X&action=upload_photo — Foto-Upload
  • GET /api/reports.php?id=X — Bericht-Detail

Lizenz

GPL v3+