Progressive Web Apps: Das App-Modell der Zukunft?

Progressive Web Apps: Das App-Modell der Zukunft?

Bei der Entwicklung einer mobilen App stellt sich die Frage: Welche Technologie soll zur Implementierung genutzt werden? Die Antwort: Es hängt von den Anforderungen der App ab. Dieser Artikel beleuchtet die Progressive Web App als Technologie und stellt auf dieser Basis Anwendungsfälle im B2C-Bereich vor.

Im Jahr 2007 etablierte Apple mit der Einführung des ersten iPhones den Begriff „Apps“. Damit sind vor allem schlanke, mobile Anwendungen gemeint. Von der ursprünglichen Idee, dass Apps immer eine bestehende Onlineverbindung benötigen sollten, verabschiedete man sich schnell wieder – denn damals wie heute stellt die flächendeckende Verfügbarkeit des mobilen Internets, mit einer für den Nutzer akzeptablen Geschwindigkeit, ein zentrales Problem dar.

Wie unterscheiden sich Native Apps, Hybride Apps, Web Apps und Progressive Web Apps voneinander?

Heute werden mobile Anwendungen generell als Apps bezeichnet, da eine weitere Unterscheidung die Nutzer nur verwirren würde. Aus technischer Sicht lassen sich jedoch sehr wohl differenzieren:

  • Native App

    Apps, die in der vom Betriebssystem (beispielsweise iOS oder Android) vorgesehenen Art umgesetzt und optimiert sind, werden als Native Apps bezeichnet. Diese sind speziell auf ein System angepasst und laufen nur auf diesem. Eine Native App eignet sich insbesondere bei komplexen und rechenintensiven Anwendungen.

  • Hybride App

    Die Basis von Hybriden Apps sind die Webtechnologien JavaScript, HTML5 und CSS, die innerhalb eines Containers ausgeführt werden. Die Container stellen generische Schnittstellen zum darunterliegenden System bereit (beispielsweise für den Zugriff auf Dateien oder den Beschleunigungssensor). Eine einmal entwickelte Hybride App kann dann als ein Gesamtpaket, bestehend aus App und Container, für die jeweiligen Betriebssysteme erzeugt und genutzt werden.

  • Web App

    Eine Web App ist eine Online-Anwendung, die nur mit bestehender Verbindung zum Online-Dienst funktioniert. Dies stellt auch den größten Nachteil einer Web App dar. Andererseits stehen dadurch Aktualisierungen in der Web App direkt nach der Veröffentlichung auf dem Server für den Nutzer bereit. Der Zugriff auf Web Apps erfolgt normalerweise mittels Webbrowser. Das Endgerät und Betriebssystem sind hierbei zweitrangig.

  • Progressive Web App

    Im Unterschied zu klassischen Web Apps nutzen Progressive Web Apps zusätzlich neue Technologien, um Funktionalitäten wie Offline-Fähigkeit, den Empfang von Push Nachrichten oder Mechanismen zum optimierten Laden von Daten zur Verfügung zu stellen. Damit wird der Nachteil der „ständigen Onlinepflicht“ von klassischen Web Apps aufgehoben.

Welche Merkmale besitzt eine Progressive Web App?

Der Begriff „Progressive Web App“ (PWA)“ wurde von Google etabliert (Googles Definition). Letztlich handelt es sich um eine Anwendung, die innerhalb einer Browser Engine ausgeführt wird. Eine PWA wird mit etablierten Webtechnologien – HTML5, CSS3 und JavaScript – realisiert. Mit dem Manifest und dem Einsatz von Service Workern erreicht man, dass sich die Web App auf dem Gerät wie eine native Anwendung verhält.

Im Web App Manifest wird das Erscheinungsbild der App definiert und durch eine JSON (Java Script Object Notation) definiert. Im Manifest werden diverse Parameter beschrieben. Dazu zählen unter anderem, welchen Namen und welches Icon die App trägt und welches Verhalten die App haben soll (z. B. Vollbildanwendung im Browser oder als Stand-Alone-Anwendung).

Der Service Worker stellt im Grunde einen Proxy zwischen Browser und Server dar, der im Hintergrund ausgeführt wird und nur über eine sichere Verbindung kommuniziert. Mit ihm können beispielsweise die offline- oder Push-Funktionalität bereitgestellt werden. Der Service Worker wird Event Driven gesteuert. Das heißt: Es muss erst ein definiertes Ereignis eintreten, damit er seine Aufgaben ausführt und auch nur dann Ressourcen beansprucht.

Darüber hinaus bietet eine Progressive Web App die „Add-To-Homescreen“-Möglichkeit an. Das Icon der App kann auf dem Home-Bildschirm platziert werden, ohne dabei den Umweg über eine Installation aus einem Store gehen zu müssen.

Kurz gesagt: Man vereint die Vorteile einer nativen App mit den Vorteilen einer klassischen Web App.

Die Grafik zeigt die Merkmale einer Progressive Web App.

Warum sollte man auf Progressive Web Apps setzen?

Die Progressive Web App besteht aus klassischen Webtechnologien und erweitert diese. Für die Implementierung von PWAs werden HTML5, CSS3 und JavaScript eingesetzt. Das senkt die Hürden für (Web-) Entwickler. Etablierte und verbreitete Frameworks wie Angular, Ionic und Polymer bieten die Unterstützung für Progressive Web Apps bereits seit einiger Zeit an.

Heute unterstützen alle bedeutenden Browser (u. a. Chrome, Edge, Firefox und Safari) Progressive Web Apps. Durch die hohe Kompatibilität ist der Weg für PWAs bereits geebnet und die potenzielle Reichweite wird in Zukunft vergleichbar der einer klassischen Web App sein.

Aus Betreibersicht bieten Progressive Web Apps noch einen weiteren Vorteil: Google nutzt zur Indexierung einer Webseite seit vergangenem Jahr den sogenannten „Mobile-First-Index“. Hierfür zieht die Suchmaschine die mobile Version einer Webseite als Basis heran, um die Relevanz für den Nutzer zu bewerten. Der Stellenwert einer optimierten, mobilen Webseite hat damit deutlich zugenommen und eine PWA kann als Maßnahme für eine bessere Indexierung genutzt werden. Google stellt mit „Lighthouse“ hierfür sogar eigens ein freies Tool zur Prüfung und Optimierung von Progressive Web Apps zur Verfügung.

Auch für den Nutzer bieten Progressive Web Apps zahlreiche Vorteile, da sie sich in zahlreichen Punkten wie native Apps verhalten. Die Ladezeiten sind minimal, Push-Benachrichtigungen sind möglich und die App ist auch ohne Internetanbindung funktionsfähig. Hinzu kommt, dass PWAs im Gegensatz zu nativen oder hybriden Apps sehr schlank sind. Vor allem aber ist die Schwelle zur Installation vergleichsweise niedrig, da kein Umweg über einen Store nötig ist. Nutzer können die App mit einem Klick aus dem Browser heraus ins System einbinden.

Welches Potenzial haben Progressive Web Apps?

Progressive Web Apps können verschiedenste Anwendungsfälle im B2C-Bereich abdecken, hier ein paar Beispiele:

  • App zum Kauf und Speichern von mobilen Tickets: Der Kunde kann so bequem seine Zahlungsdaten hinterlegen und muss keine E-Mails oder PDF-Dateien mit dem „mobilen Ticket“ vorhalten – es befindet sich alles in der App. Auch offline.

  • App zum Suchen von ÖPNV Verbindungen: Auch bei schlechtem Empfang können Verbindungen gesucht und der Standort zur Ermittlung der nächsten Haltestelle genutzt werden.
  • App mit Informationen zu einem Medikament: Der Nutzer erhält Zugriff auf die Packungsbeilage in digitaler Form und profitiert von einer Prüfung auf Wechselwirkung bei Eingabe von Wirkstoffen anderer Medikamente. Zudem können Erinnerungsfunktion zur Einnahme und Dosierung des Medikaments implementiert werden.
  • App für Kfz-Versicherung: Der Kunden hat seine Versicherungsnummer und Kontaktdaten zur Versicherung immer parat. Offline Checklisten/ Assistenten (z. B. zur Abmeldung von Fahrzeugen, Schadensaufnahme und Meldung) sowie Beitragsrechner lassen sich implementieren.

Doch Progressive Web Apps haben auch Nachteile. Rechenintensive Anwendungen, wie grafisch aufwendige Spiele, sind als PWA nicht geeignet. Hier sollte auf die native App zurückgegriffen werden, da diese das System des Nutzers optimal nutzen kann.

Progressive Web Apps: Das App Modell der Zukunft?

Die Antwort ist Ja und Nein: PWAs schlagen die Brücke zwischen nativen und Web Apps und werden sich durch die Unabhängigkeit vom Betriebssystem schneller verbreiten. Jedoch werden sie die nativen Apps nicht verdrängen, da diese weiterhin für spezielle Anwendungen benötigt werden.

Einige Progressive Web App Beispiele sind auf https://pwa.bar/ und zu https://pwa.rocks/ finden.

Mehr zum Thema

WIR SIND FÜR SIE DA!

Mit Q_PERIOR steht Ihnen ein starker Partner zur Seite.
Wir freuen uns auf Ihre Herausforderung!