Logo
1

Progressive Web Apps (PWA) – Was ist das überhaupt und wie nutzt man sie?

Author

12 Mar 2018

Robert

progressive web apps DE new

Vielleicht wissen Sie nicht unbedingt, was eine Progressive Web App ist, aber höchstwahrscheinlich haben Sie schon einmal eine benutzt. PWA ist ein Begriff, der bei App-Entwicklern derzeit in aller Munde ist. Für Nutzer ist es allerdings manchmal schwer zu verstehen, was diese Art von Apps genau tut.

In diesem Artikel wollen wir uns deshalb genauer ansehen, was eine Progressive Web App ausmacht und ob Sie für Ihr Unternehmen eine solche App erstellen sollten (gegenüber klassischer Apps). Beginnen wir mit den Grundlagen:

 

Was ist eine Progressive Web App?

Zunächst ist es hilfreich, zu wissen, was eine Web-App ist. Darunter versteht man eine Anwendung, die in einem Browser ausgeführt wird. Gmail.com oder Ebay.com sind Beispiele für Web Apps. Man kann sie aufrufen (über Chrome, Edge, Firefox usw.) und bestimmte Aufgaben darin ausführen, egal ob von einem Desktop PC oder Smartphone. Man kann beispielsweise E-Mails lesen/senden oder bei einer Auktion mitbieten – also Dinge tun, die über das reine Lesen von Text oder das Ansehen von Bildern wie auf einer Standardwebsite hinausgehen.

Die Definition von “Progressive” ist eher weit gefasst. Der Begriff wurde 2015 von Google Chrome-Technikern geprägt und bedeutet eigentlich nur: “Web Apps, die die neueste Browsertechnologie unterstützen”. Seit damals hat sich die Bedeutung jedoch weiterentwickelt und steht nun für:

  • Progressiv (logisch) – Die Apps müssen für jeden Benutzer funktionieren, unabhängig vom verwendeten Browser.
  • Responsiv – Sie müssen auf jeden Bildschirm passen: Desktop, Smartphone oder Tablet.
  • Offline-Funktionen – Es muss möglich sein, sie offline zu öffnen.
  • App-ähnlich – Sie müssen sich wie eine App anfühlen, was Interaktion und Navigation betrifft.
  • Aktuell – Sie müssen immer auf dem neuesten Stand sein (ohne manuelle Updates).
  • Sicher – Sie müssen HTTPS für erhöhte Sicherheit verwenden.
  • Auffindbar – Man muss sie über Suchmaschinen wie Google finden können.
  • Kundenbindung – Sie sollten Nutzern durch Funktionen wie Push-Nachrichten die erneute Verwendung leicht machen.
  • Installierbar – Benutzer sollten Apps, die sie besonders nützlich finden, auf ihrem Startbildschirm “behalten” können, ohne einen App Store aufsuchen zu müssen.
  • Verlinkbar – Sie müssen sich via URL leicht verbreiten lassen.

Wenn wir nun zu unseren Beispielen Gmail und Ebay zurückkehren, sehen wir, dass sie einige wichtige Kriterien nicht erfüllen. Man kann sie nicht offline öffnen und auch nicht auf dem Startbildschirm des Smartphones installieren – was mit nativen Apps sehr wohl möglich ist.

 

Progressive Web App vs. native App

Nun fragen Sie sich vielleicht: Wozu brauche ich eine Progressive Web App, wenn ich die Benutzer stattdessen dazu bringen kann, die native App herunterzuladen? Die Frage ist berechtigt. Beide Varianten haben ihre Vor- und Nachteile, wie die folgende Tabelle zeigt:

Native App Progressive Web App Standard Web App
Veröffentlichung und Installation
Veröffentlichung der App Man braucht zwei Entwicklerkonten – eines für den Play Store und eines für den Apple Store. Kein Entwicklerkonto nötig Kein Entwicklerkonto nötig
Installation Man geht in den App Store oder Play Store, klickt auf “Download” und gibt das Kennwort ein. Kann mit nur einem Klick auf dem Startbildschirm des Telefons hinzugefügt werden (nur bei Android).
Größe Manchmal ziemlich groß. Der Download auf die Benutzertelefone kann eine Weile dauern. Sehr leicht und schnell Sehr leicht und schnell
Updates Müssen im Store veröffentlicht und dann von den Benutzern heruntergeladen werden. Sofortige Updates Sofortige Updates
Zugriff
Offline-Zugriff Verfügbar Man muss die App einmal online nutzen, dann sollten die Inhalte im Cache offline verfügbar sein. x mark 512 1
Im Vollbildmodus starten images x mark 512 1
Nutzererlebnis Hervorragend (wenn die App gut konzipiert ist) Aufgrund der doppelten Menüs (App-Menü und Browser-Menü) manchmal verwirrend Wie bei Progressive Web Apps
Kundenbindung Sehr hoch. Nutzer verbringen viel mehr Zeit in nativen Apps, da sie dort nicht abgelenkt werden. Kundenbindung ist schwieriger. Die App ist wie ein weiteres offenes Tab im Browser, was das Wechseln für die Nutzer leicht macht. Wie bei Progressive Web Apps
Auffindbarkeit Nicht gut – die Nutzer müssen den Namen der App kennen, um sie zu finden, oder man muss viel Arbeit in die App Store-Optimierung investieren. Gut – die App erscheint in den Suchergebnissen von Google & Co. x mark 512 1
SEO Die Inhalte der App werden nicht von Suchmaschinen indexiert. Volle Indexierung der Inhalte. Man kann die Hauptseite indexieren, auf der sich die Web App befindet, aber nicht jeden Abschnitt der App.
Teilen Schwierig – man muss im Store einen Link für die App abrufen und diesen an andere Nutzer schicken, damit sie die App herunterladen können. Sehr einfach – man muss nur die URL kopieren Wie bei Progressive Web Apps
Funktionen
Push-Nachrichten images images

(nur Android)

images

(möglich mit Drittanbieterdiensten)

Geolocation images images images
Kamera-/Mikrofonzugriff images images images
Gerätevibration images images x mark 512 1
Bildschirmausrichtung, Beschleunigungssensor, Kompass images images x mark 512 1
Akkuladestatus images images x mark 512 1
Zugriff auf Kontakte und Kalender images x mark 512 1 x mark 512 1
Telefoniefunktionen: SMS oder Anrufe, SMS/MMS senden, Telefonnummern abrufen usw. images x mark 512 1 x mark 512 1
Geld verdienen
App verkaufen Man kann einen beliebigen Preis für die App festlegen und sie in den Stores verkaufen Alle Web Apps sind gratis nutzbar. Wie bei Progressive Web Apps
Monetarisierung durch Werbung images images images

Wie die Tabelle zeigt, bieten Progressive Web Apps einige große Vorteile. Doch es gibt einen großen Nachteil:

Apple bietet allmählich Support für PWAs.

 

Moment mal. Bedeutet dies, dass Web-Apps nicht vollständig progressiv sind, wenn sie nicht von allen Browsern unterstützt werden? Technisch schon, allerdings ist die Antwort etwas komplizierter, da die meisten Funktionen noch unter iOS laufen.

Mit Stand März 2018 gelten folgende aktuelle Einschränkungen für iOS:

  • die PWA kann nur bis zu 50 MB Offline-Daten speichern
  • wenn der Benutzer die App eine Zeitlang (ein paar Wochen) nicht nutzt, leert iOS automatisch den App-Cache, weshalb er beim nächsten Mal langsamer geladen wird
  • kann immer noch nicht auf Kontakte, Hintergrundlokalisierung und native Social Apps zugreifen
  • keine Push-Benachrichtigungen
  • keine Unterstützung von In-App-Zahlungen

Weitere Informationen über die Einschränkungen von Apple und ihre Historie finden Sie in diesem ausgezeichneten Beitrag hier.

 

Was ist mit App-Baukästen?

GoodBarber war lange Zeit Vorreiter für PWAs. Wir haben eine davon getestet, und das Ergebnis hat uns positiv überrascht. Auch andere Plattformen wie AppYourself bieten PWAs an.

Man kann bei GoodBarber auf jeden Fall sehen, wie PWA-Funktionen aussehen, da es die Option gibt, SEO-Schlüsselwörter für Seiten hinzuzufügen.

 

GoodBarber PWA SEO

 

Die App kann auch zu einer eigenen Domain verlinkt werden:

 

Screen Shot 2017 09 13 at 13.29.16

Zu beachten wäre, dass in GoodBarber noch keine Push-Nachrichten versendet werden können, was eine Einschränkung gegenüber nativen Apps ist. Offenbar wird jedoch für eine kommende Version an dieser Funktion gearbeitet.

Ein großes Plus bei GoodBarber ist die Handhabung des App-Designs. Web Apps beeindrucken uns normalerweise nicht sonderlich, aber die Lösung von GoodBarber ist sehr effizient – dank des Startbildschirms, der eine Website-Einstiegsseite mit Menü nachahmt.

Wenn Sie ein neues Projekt oder Unternehmen starten, könnte GoodBarber (kostenloser Test) ideal sein. Sofern Ihre Anforderungen einfach genug sind, könnten Sie damit eine Progressive Web App und Website in einem erhalten. Wie so etwas aussehen könnte, zeigen unsere Demo einer Progressive Web App und der folgende Link: https://apptooltester.goodbarber.com.

 

Soll ich mich also für eine Progressive Web App entscheiden?

Progressive Web Apps sind ein faszinierendes Format, das sich jedoch in einer seltsamen Position befindet. Google nennt sie revolutionär. Apple wehrt sich gegen sie. Entwickler scheinen sie zu mögen, doch nur als eine Verbesserung herkömmlicher Web Apps und in direkter Konkurrenz zu nativen Apps. Und mit Sicherheit ist es immer noch wichtiger, eine gute, responsive Website zu haben.

 

mobile website vs app reach

Source: Google I/0 Developer conference 2017

Kurz gesagt, es ist sicherlich eine Technologie, die man nutzen sollte, wenn man weiß, was man damit vorhat. In folgenden Fällen würden wir eine PWA anstelle einer nativen App empfehlen:

  • Sie wollen Ihre App nicht verkaufen.
  • Ihre Nutzer brauchen oft schnellen Zugriff auf die von Ihnen gebotenen Informationen.
  • Sie haben einen Blog oder eine inhaltsintensive Website.
  • Ihre Nutzer haben wenig oder langsamen Internetzugang.
  • Ihre Nutzer sind über die ganze Welt verteilt (der globale Marktanteil von Android liegt bei 84 %, der von Apple bei 16 %; in den USA ist die Verteilung jedoch eher 50/50).
  • Sie wollen, dass Ihre App über Google gefunden wird.
  • Sie wollen Push-Nachrichten senden (nur mit Android möglich; bei GoodBarber noch nicht verfügbar).
  • Sie wollen Updates schnell und einfach hinzufügen können – ohne den Review-Prozess eines App Stores.

Fazit

Der Grund, warum Progressive Web Apps für Verwirrung sorgen, ist vermutlich, dass sie auf einer Art Hybridstufe zwischen Website und nativer App liegen. Sie sind nicht wirklich revolutionär, aber ein guter Schritt in die richtige Richtung, um Apps dank World Wide Web zugänglicher für jedermann zu machen. Viele haben allerdings bei dem Wort “App” immer noch das Bild einer “nativen App” vor Augen – es wird also noch dauern, bis sich die Konkurrenz durchsetzt, vor allem da Apple verstärkt auf den App Store setzt.

Man sollte jedoch wissen, dass man sich mit einer Progressive Web App in guter Gesellschaft befindet. Immer mehr große Organisationen ziehen diese Variante einer nativen App vor. Financial Times und Washington Post sind prominente Beispiele.

Weitere spannende Beispiele gibt es hier: https://pwa.bar und https://pwa.rocks/ (erwarten Sie jedoch nicht, so etwas mit einem App-Baukasten erstellen zu können).

Sie haben Fragen oder Feedback? Kontaktieren Sie uns unten!