Mobile PWA für Baustellen-Doku — Foto-Upload, Sprachnotizen, Skizzen, offline-fähig. SvelteKit + Workbox.
Eduard Wisch
bd9580bd46
All checks were successful
Deploy baustelle-pwa / deploy (push) Successful in 1s
- Bericht-Detail: Button ist jetzt immer da, bei Final heißt er 'PDF neu erzeugen'. Bei 0 Seiten disabled statt versteckt, mit Hinweis-Empty-State darüber. - Auftrags-Detail: Audio-Files (webm/mp3/ogg/m4a/wav) werden aus 'Weitere Dokumente' rausgefiltert und in eine eigene Sektion '🎙 Sprachnotizen' mit Play-Button je Eintrag gelegt. Tap auf ▶ lädt die Datei als Blob (mit JWT) und setzt einen <audio>-Player inline ein. - Service Worker v3. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> [deploy] |
||
|---|---|---|
| .forgejo/workflows | ||
| icons | ||
| lib | ||
| .gitignore | ||
| app.css | ||
| app.js | ||
| index.html | ||
| manifest.webmanifest | ||
| README.md | ||
| sw.js | ||
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-CredentialsGET /api/orders.php— Aufträge des UsersGET /api/orders.php?id=X— Auftrag-DetailGET /api/orders.php?id=X&action=photos— Anhang-ListePOST /api/orders.php?id=X&action=upload_photo— Foto-UploadGET /api/reports.php?id=X— Bericht-Detail
Lizenz
GPL v3+