Progressive Web Apps

Was ist eine Progressive Web App?

Der Begriff Progressive Web App ist höchstwahrscheinlich den meisten nicht bekannt, obwohl wahrscheinlich jeder eine solche App schon einmal benutzt hat. Eine Progressive Web App ist grundsätzlich eine Web App mit modernen Funktionalitäten, um Benutzern eine App-ähnliche Erfahrung zu bieten. Natürlich muss diese, wie jede Web App, in einem Browser ausgeführt werden. Das Schöne an PWAs ist, dass die App auf jedem Gerät zur Verfügung steht und das mit einer einzelnen Code Basis. Notwendig für PWAs ist allerdings eine Verbindung zum Internet – zumindest beim ersten Besuch. Man muss eine Page mindestens einmal aufgemacht haben, um diese danach auch ohne Verbindung wieder öffnen zu können. Daher kommt auch der Name „Progressive“. Um als PWA zu gelten, muss die App mehreren verschiedenen Anforderungen entsprechen. Die Anforderungen, die notwendig für eine PWA sind, beschreibt Google mit folgenden Grundanforderungen:

•  Performance: Die App muss schnell starten und der Speed darf auch während der Interaktion nicht vernachlässigt werden.

•  Browser-unabhängig: Die App muss in jedem Browser funktionieren und grundsätzlich auf jedem Gerät mit einem integrierten Browser. Hier gibt es allerdings Ausnahmen, auf die ich später noch eingehen werde.

• Responsive: Jede Größe des Screens muss unterstützt werden. Das beginnt mit den Standard Größen wie Desktop, Handy und Tablet, allerdings müssen auch Sonderfälle berücksichtigt werden.

• Offline-Fähigkeit: Eine Möglichkeit muss geschaffen werden, um den User das Gefühl zu geben, er wäre in einer nativen App. Daher sollte auch möglichst nie auf die Default Offline Page des Browsers weitergeleitet werden.

• Installierbar: Es muss eine Möglichkeit geben die App zum Homescreen hinzuzufügen. Apps, die auch am Startscreen vorhanden sind, werden laut Statistik öfter genutzt.

PWAs bringen auch unabhängig von den Grundvoraussetzungen eine Menge an Vorteilen mit sich. Die wichtigsten werde ich kurz auflisten.

• Store-unabhängig: Eine Progressive Web App muss nicht in den App-Store. Sie kann ganz einfach zum Homescreen hinzugefügt werden, da sie ja über den jeweiligen Browser geöffnet wird. Dadurch erspart man sich das ständige Uploaden in den App Store. Vor allem bei IOS kann dies langfristig viel Zeit sparen, da man sich den ganzen Review Prozess dadurch erspart, der ja bei jedem kleinen Update durchlaufen werden muss. Was mich gleich zum nächsten Punkt kommen lässt.

• Up to date: Eine PWA ist immer up to date. Sobald eine Änderung durchgeführt wird, wird diese in der App nachgezogen. Man muss kein Update downloaden oder die App neu installieren, sondern es passiert automatisch. Dies kann wiederum die User Experience verbessern.

• Der Content wird erst dann gedownloadet, wenn man die jeweilige Seite aufruft. Das sichert wiederum Speicher am Gerät. Auch in Sachen Speed kann den PWAs keiner so schnell etwas vormachen. PWAs verwenden Service Worker, um Anfragen zu handeln und Files zu cachen. Daher laden PWAs im Normalfall weitaus schneller als native Apps. Wie bereits erwähnt, funktioniert es auch ohne Verbindung zum Internet, solange man Seiten aufruft, die man bereits besucht hat.

• Die gemeinsame Code Basis ist auch für Unternehmen, die solche Apps entwickeln, eine Bereicherung. Da eine PWA plattform-unabhängig ist, werden auch die Kosten für die Entwicklung reduziert. Man benötigt daher nicht immer beide Teams – Android und IOS – zur Entwicklung der nativen Apps.

Allein die Integration von all diesen Anforderungen bildet für eine PWA schon einmal eine gute Basis.
Zusätzlich können und dürfen natürlich Tools wie Lighthouse nicht fehlen. Lighthouse testet die App auf Metriken, wie auf Schnelligkeit oder Offline Fähigkeit, und berechnet einen bestimmten Gesamtscore, der als Maßstab für eine Best Practice PWA hergenommen werden kann.
Auch die Vorteile von PWAs sprechen für diese Technologie. Was heißt das jetzt genau für die Entwicklung von Apps im Allgemeinen? Sollen zukünftig nur noch PWAs entwickelt werden?
Die Antwort ist ganz klar: Nein.
Native Apps sind der momentane Marktführer und das auch aus gutem Grund. Es gibt Funktionalitäten, über die eine PWA nicht verfügt. Ein wichtiger Punkt wäre da zum Beispiel die Sicherheit. Auch wenn Progressive Web Apps HTTPS verwenden, sind Apps in der Regel sicherer und zuverlässiger. Weiters ist die Verwendung von verschiedenen nativen Apps miteinander viel leichter anzuwenden, wie zum Beispiel eine Login Möglichkeit über Facebook.

PWAs im Jahr 2020

Aufgrund der Tatsache, dass PWAs eigentlich erst seit ein paar Jahren (exakt seit 2015 unter diesem Namen) bekannt sind, hat es eine Zeit lang gedauert, bis alle Betriebssysteme PWAs auch unterstützen. Seit Ende 2019 ist es nun auch möglich, unter Windows 10 vor allem mit Google Chrome, PWAs zu installieren. Ein bekanntes Beispiel hierfür wäre Outlook von Microsoft oder auch Twitter. Eine Reihe an erfolgreichen Progressive Web Apps, lässt sich hier finden.

Auf Android und iOS lassen sich PWAs ganz einfach über den Browser installieren. Vorzugsweise ist hier Chrome zu verwenden, aber auch die anderen Browser werden unterstützt. Leider gibt es unter iOS immer noch das Problem mit dem Hinzufügen der App zum Startbildschirm. Das ist weiterhin nur mit Safari möglich. Mit dem Update auf iOS 13 können aktuelle Features, wie zum Beispiel Apple Pay oder der Dark Mode, ohne Probleme verwendet werden.
Dennoch gibt es immer noch Systeme, die PWAs nicht unterstützen, unter anderem Smartwatches, Smart TVs, Chromecast, Android TVs, Amazon Echos, VR/AR Headsets oder eingebaute Systeme im Tesla. Allerdings ist es meiner Meinung nach verkraftbar, in diesen Bereichen auf den Support zu verzichten.
Nachdem 2019 schon als das Jahr der Progressive Web Apps angepriesen wurde, muss man im Grunde genommen sagen, dass sich PWAs am Markt noch nicht durchsetzen haben können. Dazu funktionieren klassische native Apps einfach zu gut. Dennoch kann man sich mit einer Progressive Web App zusätzlich zu einem Komplettsystem die Möglichkeit schaffen, die User Experience zu erhöhen und Nutzen zu schaffen. Wir werden sehen was die Zukunft bringt!

Quelle Titelbild: https://www.techfriend.in/8-unified-steps-structuring-user-friendly-custom-web-app.html