Webseite als App - kein Problem!

Was Ist eine PWA?

PWA steht für Progressive Web App(lication), auf deutsch eine fortschreitende Netz Anwendung/App. Somit nimmt ihre Webseite als PWA den Schritt aus dem Browser direkt auf das Gerät des Nutzers, was einiges erleichtert und vereinfacht. Mit einer PWA kann eine App zum Beispiel auf einem Smartphone installiert und wie ein anderes Programm in einem eigenen Fenster geöffnet werden. Zudem können heute bereits viele native Funktionen, welche früher nur nativen Apps (also extra entwickelt für Android, iOS, …) zur Verfügung standen, mit einer  PWA genutzt werden. 

Warum brauche ich eine PWA?

Ich gehe davon aus, dass Sie bzw. Ihre Firma bereits eine Webseite haben. Eine PWA kann mit relativ wenig Aufwand, eine grosse Verbesserungen für den Endbenutzer bringen. Damit sehen mehr Besucher Ihre Inhalte und die Chance auf einen Verkauf oder zukünftigen Kunden steigt. 
Schauen wir uns die Vorteile an, welche eine Webseite mit PWA hat:

Vorteile

• Installierbar auf vielen Geräten wie Smartphone (Android u. iOS) und Desktop. Hier ist eine Übersicht, welche Browser das Installieren einer PWA bereits unterstützen: caniuse.com. Die Webseite kann mit einem Klick auf ein Icon heruntergeladen werden
• Sieht einer nativen App sehr ähnlich
• Native Optionen wie Kamerazugriff und Push-Notifikationen sind bereits möglich
• Offline-Zugriff möglich
• verschiedene Inhalte/Seiten können im Vorhinein heruntergeladen werden
• Seiten mit bereits vielen Besucherzahlen, können von diesem Verkehr sofort profitieren
• Schneller (als Browser)
• Sicherer (als Browser) da eine Voraussetzung für eine PWA https ist
• geringer Aufwand und damit geringe Entwicklungskosten (gegenüber einer nativen App)

Die grössten Vorteile sind der Offline-Zugriff und die Installationsmöglichkeit. Damit muss der Nutzern kein Internet mehr haben, um Ihren Blog zu lesen, Ihre Artikel zu durchsuchen oder Ihre Referenzen zu begutachten. Die App kann zudem mit einem Klick über ein Icon geöffnet werden.
Sie möchten, dass der Benutzer nicht auf der normalen Startseite landet, sondern gleich auf Ihrem Blog oder Ihrem Store? Kein Problem, in einer PWA kann unter anderem die Startseite eine andere sein, als auf der Webseite.
Zudem können all diese Vorteile mit nur wenig Veränderung erreicht werden, da das meiste der Code-Base einfach übernommen werden kann. Wenn die Webseite bereits für Mobile gestaltet wurde, sind auch hier die Veränderungen  nur noch minimal.

Im oberen Bild ist gut ersichtlich, dass es hier keine Suchbar hat, sondern auch dieser Teil mit Farbe und Text selbst gestaltet wurde. Wie eine native Applikation ist eine PWA in einem eigenen Fenster geöffnet.

Nachteile (gegenüber einer nativen App)

Wenn eine PWA so viele Vorteile hat, warum gibt es überhaupt noch native Apps? Nun, native Apps sind, wie der Name schon erahnen lassen kann, für ein einzelnes Gerät/Betriebssystem zugeschnitten worden. Meist wurde es in einer speziellen Programmiersprache wie z.B. Java, Kotlin oder C# geschrieben, um die verschiedenen Merkmale bestmöglichst zu nutzen.

• Es gibt Funktionen, welche nur native Apps nutzen können.
  • Fingerabdruck, Umgebungssensoren, Zugriff/Kommunikation auf andere Apps (z.B. Kalendereinträge), …
• schneller (Ressourcen des Gerätes können besser verwaltet werden)
• sicherer
  • mehr Sicherheitsfunktionen wie Pin oder 2FA
  • überprüft durch die Kriterien des jeweiligen App-Stores

Was braucht eine PWA?

Anforderungen an eine PWA unterscheiden sich leicht von Browser zu Browser, aber grundsätzlich braucht es: 

• Ein Web-Manifest (siehe Bild unten)
• Verbindung über https
• (momentan nur für Chrome, aber sicherlich sehr nützlich) service-worker für Offline-Zugriff: Dieser kontrolliert, welche Inhalte bereits heruntergeladen werden sollen. Welche Möglichkeiten soll der Benutzer auch offline haben?

Fazit

Wer seiner Webseite einen Schub verpassen und es vor allem für Mobile-Nutzer attraktiver machen möchte, fährt mit einer PWA sehr gut. Hier sind einige Zahlen zur Mobile-Anwendung einer PWA, welche das deutlich unterstreichen: 

• Bei Pinterest ist die Zeit bis zum grössten geladenen Element von 4.2s auf 1.8s gesunken und bis zur Interaktivität dauert es nun noch 5.6 anstatt 23 Sekunden.
• Starbucks konnte die täglich aktiven Nutzer verdoppeln.
• Bei BMW klickten 4x so viele Personen von der Startseite auf eine Verkaufsseite und plus 50% mobile Nutzer.

In diesem LinkedIn Artikel namens "The Power of PWA" von Dani Kalt gibt es eine tolle Tabelle, welche eine PWA, responsive Webseite und native Apps gegenüberstellt.