Mobile Overview

Was ist eine PWA?

Eine Progressive Web App (PWA) ist eine Web-App, die sich auf Mobilgeräten wie eine installierte App verhält.

In Shifty bedeutet das:

• Installierbar auf dem Home Screen
• Eigenes App-Icon und App-Name
• Push-Benachrichtigungen
• Service Worker für Hintergrundfunktionen

Shifty als PWA

Die App nutzt in der aktuellen Implementierung:

• Web App Manifest via src/app/manifest.ts
• Service Worker unter public/service-worker.js
• Push-Subscription Flow im Frontend

Kernfunktionen

• Installierbarkeit über Browser-Installationsfluss
• Push Notifications (mit Berechtigung)
• App-Icons inkl. maskable Icons
• Start im standalone Modus

Was offline funktioniert?

Wichtig: Der vorhandene Service Worker verarbeitet aktuell Push-Events und Notification Clicks, enthält aber keinen umfassenden Fetch-Cache-Fallback.

Daraus folgt für Endnutzer:

• Push-bezogene Funktionen sind vorbereitet.
• Ein generischer voller Offline-Modus (Cache-first für ganze App) ist so nicht vollständig implementiert.
• Offline-Verhalten hängt stark von Browser-Cache und bereits geladenen Inhalten ab.

Push-Funktion

Push läuft über:

• VAPID Public Key in src/global-config.ts
• Service Worker Registrierung im UI
• Browser Notification Permission Dialog
• Speicherung/Löschung von Push-Subscriptions via API

Unterstützte Geräte (praktisch)

• iOS Safari (mit iOS-spezifischen Installationshinweisen)
• Android Browser (typisch Chrome/Edge)
• Desktop Browser mit PWA-Support

Quellen (Code)

• src/app/manifest.ts
• public/service-worker.js
• src/components/push-notifications-button.tsx
• src/utils/pwa-detection.ts