Eine Webanwendung in eine installierbare Offline-PWA umwandeln

Wir haben bereits eine funktionierende Webanwendung und möchten, dass sie sich wie eine vollwertige mobile Anwendung verhält, jedoch ohne alles von Grund auf neu zu schreiben. Die Aufgabe besteht darin, das aktuelle Frontend in eine Progressive Web App zu verwandeln, damit Besucher von Smartphones und Tablets sie auf dem Startbildschirm installieren, in einem separaten Fenster ohne die Adressleiste des Browsers starten und wichtige Bildschirme auch offline weiter nutzen können. Backend und Geschäftslogik bleiben unverändert; die Arbeit konzentriert sich auf die Client-Seite und die Offline-Zugriffsschicht darum herum.

Konkret benötigt wird ein Service Worker, der das Anwendungs-Shell und kritische Ressourcen cached, sowie eine angemessene API-Antwort-Caching-Strategie, damit zuvor geladene Daten offline verfügbar bleiben und beim Wiederherstellen des Netzwerks synchronisiert werden. Ein korrektes Web-App-Manifest mit Icons, Farbthemen und der richtigen Start-URL sollte die Anwendung auf Android und iOS installierbar machen, und ich möchte, dass die Installationsaufforderung ordentlich behandelt wird, anstatt sie sich selbst zu überlassen. Darüber hinaus müssen Sie Push-Benachrichtigungen vollständig konfigurieren: Berechtigung anfordern, das Abonnement speichern und eine einfache Möglichkeit zum Senden eines Test-Pushs.

Leistung und Zuverlässigkeit sind Teil des Ergebnisses: Die App sollte den Installierbarkeits-Audit bestehen, sich ordnungsgemäß mit einer Offline-Stubs-Seite degradieren und das bestehende Verhalten für Desktop-Benutzer nicht beeinträchtigen.

— Service Worker mit Caching von Shell und Ressourcen
— Offline-Stubs-Seite und API-Lese-Cache
— Web-App-Manifest, Icons und Installationshandling
— Push-Benachrichtigungen: Berechtigung, Abonnement, Testversand
— Bestehen des Installierbarkeits-Audits/Lighthouse PWA
— Dokumentation für Bereitstellung und Cache-Versionierung