PWAs sind seit einigen Jahren eine gute Möglichkeit um Websites die Möglichkeit zu geben sich wie native Apps anzufühlen und das nur durch die Verwendung von Web Technologien. Aber bevor wir anfangen gemeinsam eine PWA zu erstellen, wollen wir uns erstmal einen Überblick verschaffen.
Was ist eine PWA?
Eine Progressive Web App ist nichts anderes als eine Website, welche durch moderne APIs zu einer Web Applikation wird. Dadurch werden dieser neue Features wie Offline-Fähigkeit oder Kamerazugriff zugänglich gemacht.
Pro Tip: Lasst einen Installations Prompt beim Besuchen der Website einblenden, sodass der User darüber die PWA installieren kann.
Ein Paradebeispiel für eine PWA ist https://twitter.com.
Die Installation der Twitter PWA ist in wenigen Sekunden erledigt und zeigt, dass sich das User Interface nicht mehr wie eine normale Website anfühlt. So fehlt z.B. die Adresszeile oder das Browser-Menü.
5 großartige PWA Features
PWAs bieten mittlerweile sehr viele Features an, die man sich vor einigen Jahren nur bei nativen bzw. hybrid Apps vorstellen konnte. Durch die Einführung neuer Web APIs erweitern sich auch die Möglichkeiten von PWAs. Einige davon stellen wir euch kurz vor:
1. Offlinemodus
PWAs können auch offline verwendet werden. So kann man bei der Twitter noch immer durch den Feed scrollen. Außerdem kann man den User darauf hinweisen, dass neue Daten verfügbar sind und diese dann nachladen.
2. Push Notifications
Die Notification API können wir nutzen um User zu informieren oder einen Call To Action zu initiieren.
3. Geolocation
Für viele Use Cases ist es auch praktisch den Standort des Users zu ermitteln um standortabhängige Informationen anzuzeigen. Siehe auch: Geolocation API.
4. Kamera Zugriff
PWAs wie von Twitter erhalten einen großen Mehrwert dadurch, dass sie Zugriff auf die Kamera des Smartphones haben. Nutzen wir dafür die MediaDevices API.
5. Authentifizierung
Da die Kameras und Fingerabdrucksensoren der Smartphones immer besser werden, kann diese auch wunderbar für eine komfortable Authentifizierung mit nur einer Hand genutzt werden. Weitere Informationen zur Web Authentication API.
Noch viele weitere Features wie z.B. Web Share, der Zugriff auf die Kontakte, Gyro- und andere Sensoren, sowie Idle Detection werden durch PWAs ermöglicht.
Wie ist eine PWA aufgebaut?
Die Magie hinter den 3 Buchstaben sind eigentlich nur zwei Dateien: manifest.json und service-worker.js.
Das sogenannte Web App Manifest beinhaltet Informationen über unsere PWA. Diese könnten z.B. das Icon oder der Titel für den Homescreen sein, aber auch welche Farbe der Ladebildschirm beim öffnen der App hat.
Der Service Worker (siehe Web Worker) ist eine JavaScript Datei und läuft parallel zum Main Thread des Browsers. Dieser ermöglicht uns Requests abzufangen, mit dem Cache zu interagieren und Push Notifications zu senden.
Ein Beispiel
Erstelle die Folgende Ordnerstruktur:
/blogPWA
|-- index.html
|-- logo.png
|-- manifest.json
|-- service-worker.jsindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog PWA</title>
<link rel="manifest" href="manifest.json" />
</head>
<body>
<h1>Blog PWA</h1>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
</script>
</body>
</html>Im <head> laden wir unser manifest.json und registrieren im <script> den Service Worker service-worker.js.
manifest.json
{
"name": "DEMV Blog PWA",
"short_name": "DEMV Blog",
"start_url": ".",
"background_color": "#fff",
"display": "fullscreen",
"orientation": "portrait"
"icons": []
}Um genauere Informationen über die Optionen des Manifest zu erhalten, empfiehlt sich ein Blick in die MDN Dokumentation dazu.
Das icons Array erwartet eine Liste von Objekten die u.a. die Pfade und Auflösung der Icons beschreibt. Für diesen Zweck gibt es Generatoren wie pwa-asset-generator, welche unterschiedliche Auflösungen unserer Quelldatei logo.png und ein passendes JSON Snippet für unser Manifest generiert.
Wechsle daher in deinem Terminal in blogPWA/ und führe den folgenden Befehl aus:
npx pwa-asset-generator logo.png iconsDeine Ordnerstruktur sollte nun wie folgt aussehen:
/blogPWA
|-- /icons
|-- manifest-icon-192.png
|-- manifest-icon-512.png
|-- ...
|-- index.html
|-- logo.png
|-- manifest.json
|-- service-worker.jsIm Terminal wirst du nun einen Snippet mit einer Liste von JSON Objekten sehen, die du einfach in die manifest.json überträgst.
manifest.json
{
"name": "DEMV Blog PWA",
"short_name": "DEMV Blog",
"start_url": ".",
"background_color": "#fff",
"display": "fullscreen",
"orientation": "portrait"
"icons": [
{
"src": "icons/manifest.icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/manifest.icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
},
]
}Der letzte Schritt beinhaltet die Konfiguration des Service Workers. Hierfür werden wir Google's Workbox verwenden. Dies ist eine praktische Sammlung von Libraries um sich unkompliziert einen Service Worker zusammenzustellen.
Für dieses Beispiel nutzen wir Workbox via CDN. Durch sogenannte Strategies haben wir die Möglichkeit Features wie das Caching zu kontrollieren.
service-worker.js
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js');
workbox.routing.registerRoute(
({request}) => request.destination === 'image',
new workbox.strategies.CacheFirst()
);Starten wir nun einen Webserver über npx serve und öffne die DevTools. Im Lighthouse Tab werden wir nun darüber informiert, dass wir eine PWA vor uns haben.
Fazit
Wie Du siehst sind PWAs nicht nur schnell umgesetzt und installiert, sondern können plattformunabhängig von jedem Web Developer umgesetzt werden.
Da einige APIs aktuell aber noch experimentell sind, könnten einige Features noch nicht so etabliert sein. So unterstützt iOS Safari aktuell noch keine Push Benachrichtigungen. Leider hat Mozilla auch entschieden die Desktop-Version von Firefox zukünftig ohne PWA Support zu veröffentlichen.
Dennoch werden PWAs immer mehr zu einer echten Alternative für native Apps, insbesondere durch Trusted Web Activities (TWA) über die wir APKs für Android generieren und dann sogar bei Google Play als App anbieten können.