Progressive Webapps sind derzeit in aller Munde und scheinen der Trend der Zukunft zu sein. Insbesondere Google hat die Technik der webbasierten Apps stark forciert, Apple sträubt sich dagegen derzeit noch etwas gegen diese Art der App-Entwicklung.
Doch was sind denn nun diese Progressive Webapps genau, was können sie und vor allem was können sie derzeit noch nicht? Und brauche ich überhaupt noch aufwendig und teuer entwickelte native Apps? Wir als App-Agentur geben Ihnen hier die Antwort auf diese Fragen:
Was sind Progressive Webapps?
Eine Progressive Webapp (kurz PWA) kann man sich wie eine mobile Website vorstellen, die zusätzliche Merkmale und Eigenschaften besitzt, die bis dato nativen Apps vorbehalten waren. Dazu zählen zum Beispiel eine echte Offline-Fähigkeit, Hintergrundprozesse, Zugriff auf Geräte-Funktionen und Unterstützung von Push-Nachrichten. Insbesondere der letzte Punkt dürfte für viele Auftraggeber interessant sein, da der Empfang von Push-Nachrichten bislang nur „echten“ Apps aus den App Stores vorbehalten waren. Progressive Webapps transportieren dieses Verhalten nun auch auf Webtechnologien. Das heißt, an eine als PWA umgesetzte Website können – auch wenn diese gar nicht geöffnet ist oder das mobile Gerät in der Hosentasche steckt – ebenfalls kleine Benachrichtigungen (Stichwort Kundenbindung) gesendet werden.
Was ist die Technik dahinter?
Wie der Name schon sagt, basieren Progressive Webapps auf Standard-Webtechnologien wie HTML5, CSS3 und Javascript. Das Layout ist entweder komplett für mobile Geräte („Mobile First“) optimiert oder passt sich per Responsive Webdesign den unterschiedlichen Geräten und Auflösungen automatisch an. Das richtige App-Feeling kommt bei Progressive Webapps aber erst durch eine sogenannte Manifest-Datei und einem Service Worker auf. In der Manifest-Datei wird die Offline-Fähigkeit und das Caching-Verhalten definiert. Sobald der Benutzer die PWA im Browser aufruft, lädt dieser sich die im Manifest definierten Dateien automatisch in den Cache. Danach steht die PWA auch ohne aktive Internetverbindung offline zur Verfügung.
Zudem kann eine PWA mit einem Klick auf dem Homescreen des Gerätes installiert werden. Beim nächsten Aufruf über das App-Icon im Homescreen startet die PWA ohne die bekannte Browser-Umgebung (Adresszeile, Vor-Zurück-Navigation, Lesezeichen, etc.) und sieht damit für den Benutzer aus wie eine „echte“ App.
Der Service Worker ist eine Javascript-Datei, bzw. eine Javascript-Funktion, die im Hintergrund läuft – auch wenn die PWA, bzw. der Browser geschlossen ist. Damit können Hintergrundprozesse wie Daten-Synchronisierung oder die bereits angesprochene Push-Funktionalität realisiert werden. Letztendlich kann jede beliebige Website mit einer Manifest-Datei und einem Javascript Service Worker in eine Progressive Webapp umgewandelt werden. Sinnvoller ist es aber gleich auf entsprechende Javascript- und HTML5-Frameworks wie Angular, Ionic oder React Native zu setzen.
Wie können Progressive Webapps aufgerufen und installiert werden?
Progessive Webapps sind – von außen betrachtet – mobile Webseiten und werden entsprechend wie diese über einen normalen Internetbrowser über eine Domain oder Subdomain aufgerufen. Ihre Firma hat beispielsweise bereits eine Website und möchte zusätzlich noch eine kleine Bestellapp als Progressive Webapp zur Verfügung stellen. Dann könnten sie zu ihrer Website www.musterfirma-gmbh.de eine Subdomain bestellungen.musterfirma-gmbh.de einrichten und dort die Bestellapp aufspielen. Sobald ihre Kunden die Domain bestellungen.musterfirma-gmbh.de auf einem Smartphone (oder natürlich auch auf einem normalen Rechner) aufrufen, erscheint die Progressive Webapp im Browser. / PWA
Auf Android-Geräten oder aktuellen Google Chrome Browsern werden PWAs (anhand der Manifest-Datei oder dem Service Worker) automatisch erkannt und der Benutzer erhält ein Popup-Fenster, über das er die PWA mit einem Klick auf dem Homescreen installieren kann. Danach kann die Bestellapp direkt über das App-Icon auf dem Homescreen geöffnet werden. Der „Umweg“ über den Aufruf der (Sub)Domain im Browser ist bei PWAs also eigentlich nur beim ersten Aufruf nötig. Vergleichbar mit dem Öffnen und Installieren einer App aus den App Stores.
Auf iOS-Geräten von Apple werden PWAs leider noch nicht automatisch erkannt. Hier kann/muss die PWA über die Safari-Toolbar-Funktion „Teilen -> Zum Homebildschirm“ mit Eingabe eines Namens zum Homescreen hinzugefügt werden.
Kann eine PWA heute schon echte/native Apps ersetzen?
Ja und nein. Leider ist die Unterstützung noch nicht in allen Browsern und Plattformen durchgängig und vollumfänglich gegeben. Zwar hat Apple mit der Einführung von iOS 11.3 endlich die Ablehnung gegenüber PWAs aufgegeben, die Unterstützung ist aber noch eher rudimentär und etwas lieblos umgesetzt. Push-Notifications oder Hintergrundprozesse werden von Apple beispielsweise noch gar nicht unterstützt.
Zwar punkten PWAs mit ihrer Offline-Fähigkeit, kommen aber bei größeren Datenmengen an ihre Grenzen. Für kleinere Datenmengen können PWAs durchaus stabil funktionieren, ab bestimmten Datenmengen muss die zusätzliche Datenspeicherung in der Regel explizit vom Benutzer freigegeben werden. Das ist natürlich aus der Sicht der Usability nicht optimal. Zudem müssen Alternativ-Funktionen umgesetzt werden, wenn der Benutzer der erweiterten Datenspeicherung nicht zustimmt.
Letztendlich muss anhand den Anforderungen abgewägt werden, ob die Umsetzung einer Progessive Webapp oder einer echten App Sinn macht.
Bleiben wir also bei den nativen Apps oder gibt es Alternativen?
Sollte eine Progressive Webapp aus oben genannten Gründen nicht die richtige Option sein, muss nicht zwingend auf die native App-Entwicklung umgestiegen werden. Denn bei der nativen Umsetzung muss für jede Plattform ein getrennter Code geschrieben werden, zudem ist die native Entwicklung sehr kompliziert und aufwendig. Für mindestens 80% aller (Business-)Apps sind native Technologien schlichtweg überdimensioniert und aus Kosten-Nutzen-Sicht viel zu teuer.
Hier empfiehlt es sich auf sogenannte hybride Frameworks wie Ionic zu setzen, die das Beste aus webbasierter Entwicklung und nativen Möglichkeiten verbinden – und das zu einem Bruchteil der Entwicklungskosten einer echten nativen App.
Sie wollen mehr über Ionic Apps oder Progressive Webapps wissen?
Dann sprechen Sie uns an. Wir sind Ihre App-Agentur und Spezialist für Ionic Framework Apps und Progresseive Webapps.