12 Mar 2018
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:
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:
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.
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. | |
| Im Vollbildmodus starten |  | | |
| 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. | |
| 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 | | (nur Android) | (möglich mit Drittanbieterdiensten) |
| Geolocation | | | |
| Kamera-/Mikrofonzugriff | | | |
| Gerätevibration | | | |
| Bildschirmausrichtung, Beschleunigungssensor, Kompass | | | |
| Akkuladestatus | | | |
| Zugriff auf Kontakte und Kalender | | | |
| Telefoniefunktionen: SMS oder Anrufe, SMS/MMS senden, Telefonnummern abrufen usw. | | | |
| 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 | | | |
Wie die Tabelle zeigt, bieten Progressive Web Apps einige große Vorteile. Doch es gibt einen großen Nachteil:
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:
Weitere Informationen über die Einschränkungen von Apple und ihre Historie finden Sie in diesem ausgezeichneten Beitrag hier.
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.
Die App kann auch zu einer eigenen Domain verlinkt werden:
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.
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.
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:
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!
