Progressive Web Apps - One App fits all

Donnerstag, 6. September 2018

Progressive Web Apps sind eine ähnliche Weiterentwicklung für Apps wie responsive Websites für Onlineangebote. Während früher sehr aufwändig mobile Versionen für unterschiedliche Endgeräte optimiert wurden, werden heute responsive Websites entwickelt, die sich selbst und ihre Inhalte an die unterschiedlichen Bildschirmgrößen anpassen. Wer heute eine App anbieten möchte, muss diese für iOS, Android und eventuell sogar Windows Phone entwickeln.

PWAs nutzen moderne Webtechnologien wie HTML5, CSS3, JavaScript, Service Worker und Angular und lassen sich einfach auf einem mobilen Geräte abspeichern – ohne Umweg über einen App Store. Sie bieten dabei Funktionen, die sonst nur nativen Apps vorbehalten waren:

• zentrale Entwicklung für alle Browser und Betriebssysteme
• vergleichbare User Experience wie native Apps (sehr schnelle Performance)
• für Anbieter kein Freigabeprozess durch einen App-Store
• für Nutzer kein Download und keine Updates aus einem App-Store
• offline Nutzung möglich
• Push-Nachrichten möglich
• nach Freigabe durch Nutzer Zugriff auf Smartphone-Hardware und -Daten möglich
• Benachrichtigungen zukünftig möglich (roter Kreis mit Anzahl neuer Benachrichtigungen in der rechten oberen Icon-Ecke)

Vereinfacht betrachtet handelt es sich bei PWAs um Browseranwendungen, die auf einem Smartphone in einem Browser laufen, ohne dass Rahmen und Funktionen des Browsers für den Anwender wahrnehmbar sind. Sie lassen sich über Icons auf dem Homescreen wie klassische Apps öffnen und „fühlen“ sich bei der Nutzung wie native Apps an. Sie reagieren sehr schnell und können auch für die offline-Verwendung entwickelt werden.

Das Ziel der Entwickler besteht darin, dass nicht mehr zwischen Website und mobiler Anwendung unterschieden wird. Die Website sollte so entwickelt sein, dass sie bei mobiler Nutzung wie eine App reagiert und funktioniert. Die Inhalte und Funktionen werden dabei für die mobile Nutzung optimiert, damit der Anwender ein optimales Nutzungserlebnis mit der PWA hat. Für Betreiber bietet das den Vorteil, dass die Inhalte der Website auch für die Progressive Web App bereitgestellt werden. Sie müssen damit nicht redaktionell für die App aufbereitet und eventuell sogar mehrfach vorgehalten werden. Damit lassen sich Inhalte für eine PWA auch über ein Content Management System wie CONTENS bereitstellen. Auch Anwendungen mit Login-Funktion können entwickelt werden, wofür bestehende Anmeldefunktionen (z.B. XING, LinkedIn, etc.) genutzt werden können.

Gerade bei der mobilen Nutzung zeigt sich, dass Performance und Geschwindigkeit aus Sicht der Nutzer sehr wichtige Erfolgskriterien sind. PWAs lassen sich durch den Einsatz moderner Webtechnologien hervorragend auf eine schnelle Performance optimieren. Es gibt Beispiele für PWAs, die bis zu 50% bessere Performance erreichen, als die jeweilige Website oder App.

Das folgende Bild zeigt die Speicherung einer Website auf dem Homescreen eines Apple iPhone, was vom Ablauf vergleichbar ist mit der Installation einer Progressive Web App.

1. Öffnen Sie unter iOS mit Safari eine Website (z.B. app.ft.com).
2. Klicken Sie in der unteren Zeile auf das Teilen-Symbol (Rechteck mit Pfeil nach oben).
3. Wählen Sie im folgenden Dialog „Zum Home-Bildschirm“ und klicken Sie danach auf „Hinzufügen“ (rechts oben; in der Grafik nicht abgebildet).
4. Anschließend erscheint das FT-Icon auf dem Homescreen und kann wie eine native App behandelt werden.
5. Bei Klick auf das FT-Icon öffnet sich die Startseite der Financial Times wie eine App im Browser, ohne dass der Browser erkennbar ist.

Gerade aus wirtschaftlicher Sicht sind PWAs für Unternehmen sehr interessant: sie reduzieren die Entwicklungskosten für mobile Apps, da nicht für unterschiedliche Betriebssysteme entwickelt werden muss. Die Bereitstellung kann direkt über eine URL, also ohne zeitaufwändigen Umweg über einen App-Store, erfolgen. Außerdem lassen sich der Aufbau und die Inhalte über moderne Content Management Systeme wie CONTENS bereitstellen.

Interessante Anwendungsbeispiele von Progressive Web Apps finden Sie unter anderem auf pwa.bar und auf pwa.rocks.

Gerne beraten wir Sie bei der Konzeption und Entwicklung Ihrer Progressive Web App.