Was ist eine Progressive Web App?
Hast du schon einmal beim Surfen auf einer Website einen Banner mit der Aufschrift „Zum Startbildschirm hinzufügen“ gesehen? Wenn du auf die Schaltfläche klickst, „installiert“ sich die „Anwendung“ im Hintergrund. Wenn du diese Anwendung, die sich jetzt in deiner App-Übersicht befindet, öffnest, navigierst du genau so durch diese Website, hast jedoch eine App-ähnliche Umgebung und beispielsweise keine Browser-Navigation deines Smartphones.
Letztendlich hast du auf deinem Smartphone nun eine App-ähnliche Version der Website, jedoch ohne tatsächlich eine App über GooglePlay oder den AppStore heruntergeladen zu haben.
Diese Progressive Web App (PWA) kann auch Daten lokal speichern, sodass diese Offline nutzbar sind. Das heißt einfach gesagt: Inhalte der Website, die du schon einmal besucht hast, kannst du anschließend auch ohne Internetverbindung wieder öffnen.
Wie funktioniert eine Progressive Web App?
Es ist kein neues Framework oder eine neue Technologie. Es handelt sich um bewährte Methoden, um eine Website bzw. Webanwendung einer Desktop- oder Mobilanwendung ähnlich zu machen. Ziel ist es, durch PWA dem Benutzer eine einheitliche Darstellung und Bedienung der Website zu ermöglichen, sodass der Benutzer den Unterschied zwischen einer Progressive Web App und einer nativen mobilen App nicht erkennen kann.
Progressive Webanwendungen bieten Benutzererlebnisse durch progressive Verbesserungen. Dies bedeutet im Wesentlichen, dass ein PWA auf einem neuen iPhone 8 dieselben Funktionen ausführt wie auf einem iPhone der älteren Generation. Sicher, einige Funktionen sind möglicherweise nicht verfügbar, aber die App funktioniert weiterhin und funktioniert so, wie es sollte.
Wozu benötigt man eine PWA?
Bevor wir verstehen, warum wir eine Progressive Web App benötigen, wollen wir uns mit einigen der Themen befassen, denen wir uns heute mit nativen Apps und Websites gegenübersehen.
Internetverbindung und -geschwindigkeit: Je nachdem, wo du lebst, wirst du es nicht bemerken, aber 60% der Weltbevölkerung nutzen immer noch das 2G-Internet. Sogar in den USA müssen einige Leute sich einwählen, um auf das Internet zuzugreifen.
Langsames Laden der Website: Weist du wie lange ein User beim Laden einer Website wartet und auf die Schaltfläche „Schließen X“ klickt, wenn diese zu langsam ist? Drei Sekunden! 53% der Benutzer verlassen eine Website, wenn sie zu langsam ist.
Benutzer Interaktion: Benutzer verbringen den größten Teil ihrer Zeit mit nativen Apps, aber die mobile Webreichweite ist fast dreimal so hoch wie bei nativen Apps. Daher sind die meisten Benutzer nicht aktiv beteiligt. Außerdem verbringen Benutzer 80% ihrer Zeit nur mit ihren drei wichtigsten nativen Apps.
PWAs helfen, diese Probleme zu lösen. Es gibt mehrere Gründe für die Verwendung einer progressiven Web App. Dies sind unserer Ansicht nach die wichtigsten:
- Schnell: PWAs bieten konstant schnelle Erlebnisse. Von dem Moment an, in dem ein Benutzer eine App herunterlädt, bis zu dem Moment, in dem er damit interagiert, geschieht alles sehr schnell. Da du die Daten Zwischenspeichern kannst, ist ein erneutes Öffnen der App extrem schnell, ohne eine Internetverbindung zu benötigen.
- Integrierte Benutzererfahrung: PWAs fühlen und verhalten sich wie native Apps. Sie befinden auf dem Startbildschirm eines Benutzers, können Push-Benachrichtigungen wie native Apps senden und haben Zugriff auf verschiedene Funktionen eines Geräts. Die Umgebung fühlt sich für den User wie in einer „echten“ App an.
- Zuverlässige Funktionen: Mit Hilfe von Service Worker können wir bspw. ein Bild auf den Bildschirm eines Benutzers darstellen, auch wenn das Netzwerk offline ist.
- Interaktion: Durch zum Beispiel Push-Benachrichtigungen können wir den Benutzer auf dem Laufenden halten und zur Interaktion motivieren.
Wie erstellt man eine PWA?
Google hat eine Checkliste der Anforderungen an Progressive Web Apps veröffentlicht. Dies sind jedoch die minimalen Voraussetzungen für eine PWA:
1. Web App Manifest
Dies ist eine JSON-Datei, die Metainformationen über die Web-App enthält. Sie enthält Informationen wie das Symbol der App (das Icon, welches der Benutzer nach der Installation auf seinem Bildschirm sieht), die Hintergrundfarbe der App, den Namen der App, den Kurznamen usw. Wir können diese Manifestdatei selbst schreiben oder mithilfe von Tools eine für uns generieren.
2. Service Worker
Service-Worker sind ereignisgesteuerte Dienste, die im Hintergrund einer Anwendung ausgeführt werden und als Proxy zwischen dem Netzwerk und der Anwendung fungieren. Sie können Netzwerkanforderungen abfangen und Informationen für uns im Hintergrund zwischenspeichern. Hiermit können Daten für die Offline-Verwendung geladen werden. In der Regel sind diese Service-Worker als JavaSkript (JS) Datei geschrieben.
3. Icon
Das Icon wird verwendet, um ein App-Symbol bereitzustellen, wenn ein Benutzer die PWA auf seinem Startbildschirm speichert. Dies kann beispielsweise ein einfaches JPG-Bild sein. Das oben verlinkte Manifest-Tool, hilft beim Generieren von Symbolen für mehrere Formate. Für den Anfang kann dies recht nützlich sein.
4. Bereitstellung über HTTPS
Um PWA fähig zu sein, muss die Webanwendung über eine sichere Verbindung – HTTPS – bereitgestellt werden. Mit Diensten wie LetsEncrypt ist es sehr einfach, ein SSL-Zertifikat zu erhalten. Eine sichere Seite ist mittlerweile nicht nur üblich, sondern schützt auch deine Benutzer und schafft Vertrauen.
Für WordPress gibt es Plugins, welche die Bereitstellung einer PWA-Version deiner WordPress-Website erleichtern. Diese funktionieren jedoch nur dann gut, wenn deine Website überwiegend statische (gleichbleibende) Inhalte hat. Für Shops, wie z. B. WooCommerce, ist eine Progressive Web App nicht einfach durch die Installation eines Plugins erstellt. Ein Shop erfordert z. B. für den Warenkorb und Bezahlvorgang eine Internetverbindung, sodass die PWA manuell richtig erstellt werden muss, um verschiedene Bereiche der Website online und offline zugänglich zu machen.
