SS2019: Technologierecherche – Frontend Strategie
PWA ist eine App-Strategie und eine Zusammensetzung aus den Stärken von Native Apps und Web Apps. Dabei werden die vorhandenen Techniken, wie die Realisierung der Offline-Nutzung oder der Installation auf dem Homescreen implementiert. Diese Strategie wurde im Jahr 2015 das erste Mal von Google vorgestellt. PWAs werden üblicherweise mit den Web-Technologien HTML, CSS und JavaScript entwickelt. Das Wort >>Progressiv<< im Begriff Progressive Web App bedeutet, dass sich die PWA und deren Funktionsumfang an die Umstände des jeweiligen Webbrowsers anpasst. Dieses Prinzip wird auch Feature Detection genannt.
„A PWA is a website running in a browser that will progressvely add more features based on compatibility. The features involve using serivce workers for offline usage, optional web push notification, and letting the user install the web app in the home screen through the manifest“ Quelle: Firtman, M. (2016). High Performance Mobile Web: Best practices for optimizing mobile web apps.
Das Ziel von PWAs ist die Benutzererfahrung von Web Apps/Webseiten zu verbessern, indem dem Nutzer natives Verhalten geboten wird. Ebenfalls ein Ziel von PWAs ist eine einzige Codebasis zu besitzen, um die Entwicklung für alle Plattformen abzudecken, damit die PWA in Zukunft auch als Alternative zu Native Apps entwickelt und genutzt werden, um den Aufwand und die daraus resultierenden Entwicklungskosten zu reduzieren.
Mozilla.org führt eine Abbildung auf, die die Eigenschaften von PWAs aufzeigt:
Quelle: https://developer.mozilla.org/de/docs/Web/Progressive_web_apps
| Eigenschaft | Technische Komponente(n) |
|---|---|
| Homescreen-Installation | Web App Manifest |
| Offline | Service Worker/Application Shell Architektur |
| Progressive | JavaScript (Feature Detection) |
| Benachrichtigung | Service Worker/Notifications API |
| Responsive | Web-Technologien |
| Sicher | HTTPS |
Das Web App Manifest enthält Informationen über eine Anwendung in einer JSON-Datei
Quelle: https://developers.google.com/web/fundamentals/web-app-manifest/
Ein Service Worker ist ein Skript, dass separat vom Browser läuft. Service Worker befinden sich dabei zwischen Web Apps, bzw. dem Webbrowser und dem Netzwerk und fungieren hierbei im Wesentlichen als Vermittler. Dabei werden sie in einem separaten Thread abgrenzend von der Benutzeroberfläche ausgeführt. Wird eine Web App geschlossen läuft der Service Worker im Hintergrund weiter. Mit dem Service Worker sollen insbesondere Ressourcen dem Cache hinzugefügt werden, damit diese bei einem Offline-Zustand geladen werden. Als Alternative kann der Service Worker ebenfalls Ressourcen über das Netzwerk anfragen und anschließend dem Cache hinzugefügt werden.
Quelle: Die Application Shell Architektur trennt den Inhalt von der statischen Navigation um den Nutzer die Benutzeroberfläche ebenfalls in einem Offline-Zustand oder bei einer schlechten Internetverbindung unmittelbar zur Verfügung zu stellen. Dabei wird die Benutzeroberfläche unmittelbar nach der Installation des Service Workers dem Cache hinzugefügt.
Quelle: https://developers.google.com/web/fundamentals/architecture/app-shell
...
- Vereinfachte Updates aufgrund einer einzelnen Plattform
- Schnellere, einfachere und kostengünstigere Entwicklung
- App-Store unabhängig
- ...