INTERNET WORLD Logo Abo
Apps

Progressive Web Apps PWA: Mobil heißt in Zukunft progressiv

shutterstock.com/Sergey Nivens
shutterstock.com/Sergey Nivens

Progressive Web Apps (PWA) werden als Zwitter zwischen mobilen Websites und nativen Apps als das App-Modell der Zukunft gehandelt. Drei Praxis-Beispiele, die zeigen, was PWAs leisten können.

Bis 2020 werden Progressive Web Apps, kurz PWAs, 50 Prozent aller verbraucherorientierten nativen Apps ersetzt ­haben, so lautete eine Prognose der Analysten des US-Marktforschungsunternehmens Gartner aus dem Jahre 2017. So rasant wie prognostiziert scheint die Ent­wicklung jedoch nicht voranzuschreiten, wie ein Blick auf die Verzeichnisse von PWAs offenbart: Nur ein paar Handvoll der ­neuen Apps finden sich bisher in den Listen von Pwa.bar und Pwa.rocks. Diese Seiten verzeichnen bereits bestehende PWAs.

Dennoch werden PWAs als Symbiose aus mobilen Websites und nativen Apps die App-Welt in den kommenden Jahren deutlich verändern, denn eine PWA liefert Funktionen wie eine native App: zum Beispiel Push-Nachrichten, Offline-Fähigkeit und eine Verankerung auf dem Homescreen, muss aber nicht im App-Store ­heruntergeladen und auf dem Handy ­installiert werden. Zudem hat sie einen ­geringen Speicherbedarf und ist über Suchmaschinen auffindbar.

Warum sich Unternehmen für eine PWA entscheiden und was für Erfahrungen sie damit machen, erklären im Folgenden drei Anbieter anhand ihrer Anwendung. 

Lotto.de: PWA ist Teil der Mobile-First-Strategie

Im Juni 2018 ist die neue Website von Lotto.de online gegangen, der Service-Plattform der 16 Landeslotteriegesellschaften des Deutschen Lotto- und Totoblocks. "Mobile first Responsive Webdesign" lautete die Vorgabe für den Relaunch, erinnert sich Daniel Beye, Abteilungsleiter Vertrieb bei Toto-Lotto Niedersachsen, der Lan­desgesellschaft, die für den Betrieb von Lotto.de verantwortlich ist. Bis dahin gab es getrennte Auftritte für Desktop und Mo­bile.

Ziel war, eine responsive Website inklusive PWA zu entwickeln, die auf allen Endgeräten eine konsistente Nutzererfahrung mit einem modernen Spielerlebnis ermöglicht. Für eine PWA sprachen die Indexierbarkeit der Inhalte in Suchmaschinen, die Bedienung aller Plattformen über nur eine technologische Basis, die einfache Wartung und sofortige Verfügbarkeit neuer Features für alle Nutzer ­sowie die Unabhängigkeit von Freigabeprozessen der App Stores.

Aus Nutzersicht kamen die einfache Verknüpfung auf dem Homescreen ohne In­stallation der App, der geringe Speicherbedarf, die kurzen Ladezeiten und die einer App sehr ähnliche User Experience dazu.

Hybrider Headless-Ansatz

Entwickelt wurde der Relaunch und die PWA von der Agentur Neoskop in Hannover binnen sechs Monaten. Technologische Basis ist das Content Management System (CMS) "Magnolia" mit Hybrid-Headless-Ansatz. Das heißt, das CMS bringt die gewohnte nutzerfreundliche Bedienoberfläche mit, ist aber nicht fest an ein bestimmtes Frontend, etwa die Website oder ein Shosystem, gekoppelt, also quasi "headless". Als Kopf können daher ganz unterschiedliche Ausgabekanäle dienen: der Desktop, das Handy, ein Tablet oder künftig vielleicht auch ein smarter Lautsprecher.

Eine besondere Herausforderung bei der Entwicklung war laut Beye die Konzeption einer Navigation für die PWA, die auch ohne Browser-Funktionen wie den Zurück-Button möglich sein sollte, um das App-Feeling zu stützen. Außerdem sollten im Offline-Modus vorbereitete Spieltipps bis zur Abgabe und damit der Weiterleitung an die zuständige Landeslotteriegesellschaft zwischengespeichert werden können.

Um eine gute Usability der Offline-Fähigkeit gewährleisten zu können, mussten zudem Platzhalter für Ziehungs- und Erklärvideos einfügt werden. Besonders knifflig: Es galt zu verhindern, dass im Offline-Modus alte, im Cache gespeicherte Angaben zur Jackpot-Größe angezeigt werden, da dies ­gesetzlich verboten ist.

Um das Problem zu lösen, werden die Jackpot-Angaben mit Ablaufdatum versehen, sodass sie nur bis zum Annahmeschluss angezeigt werden. Ist der Nutzer wieder online, werden die Daten automatisch aktualisiert. Beye ist zufrieden mit seiner PWA: "Wir haben ­damit einen Meilenstein in der Digitalisierung des deutschsprachigen Glücksspielmarkts erreicht."

Beispiel zwei: Marktguru.de

Seit November 2017 ist die Prospektplattform Marktguru.de mit einer PWA im Markt vertreten. Anders als Lotto.de verfügt Marktguru zudem über native Apps. "Auf die hatten wir uns lange konzentriert, um uns gut im Markt zu etablieren", erklärt Marktguru-Geschäftsführer Patrick Dai­nese. Seit etwa neun Monaten hat sein Unternehmen aber auch die PWA stärker im Visier. "Wir haben unseren Einsatz dafür im letzten Jahr fast verdreifacht", so Dainese. Denn 75 Prozent der Zugriffe bei Marktguru.de kommen über mobile Endgeräte.

Die größte Herausforderung und zugleich die größte Chance der PWA liegt in der Performance. Das nötige Datenvolumen wurde von den Inhouse-Entwicklern bis auf 14 Kilobyte reduziert, deswegen läuft die Seite auch mobil mit "rasender ­Geschwindigkeit", freut sich Dainese. Möglich wird dies dadurch, dass der Code aufgesplittet und immer nur der Teil ausgeliefert wird, den der Nutzer gerade braucht. Das Ergebnis: Die Absprungrate ist extrem zurückgegangen, die Nutzer bleiben signifikant länger auf der Seite und klicken sich häufiger tiefer in den Auftritt.

PWA als eigenes Projekt konzipieren

Seiner Meinung nach muss eine PWA als komplett eigenes Projekt ganzheitlich angegangen werden, um die Website von Grund auf neu zu konzipieren. Dainese glaubt nicht, dass PWAs native Apps komplett ablösen werden, zum einen weil die Unterstützung der Browser, insbesondere des Safari-Browsers von Apple, noch nicht ausreicht, zum anderen weil sich eine native App "immer eine Spur besser anfühlt". Im Gegenzug hält er es aber für wahrscheinlich, dass künftig alle Webseiten als PWAs gebaut werden. Bei Marktguru.de haben rund vier Millionen Nutzer die nativen Apps installiert, etwa 700.000 verwenden die PWA.

Nicht zu unterschätzen ist seiner Meinung nach der Aufwand für die Suchmaschinenoptimierung. PWAs basieren oft auf Javascript-Frameworks, die beispielsweise Google-Bots nicht gut auslesen können. Hier ist daher spezielles Know-how gefragt.

Beispiel drei: B2B mit Ingun

Ganz frisch mit einer PWA im Markt unterwegs ist die Ingun Prüfmittel GmbH aus Konstanz. Der Hersteller von Kontakten, Prüfstiften und Werkzeugen wollte seinen rund 20.000 Artikel umfassenden Produktkatalog über einen Produktfinder zugänglich machen. Entwickelt wurden sowohl native Apps also auch eine PWA für den B2B-Bereich.

App Stores sind in China eine große Hürde

Hauptgrund dafür war, das Ingun ein wichtiges Standbein im chinesischen Markt hat. Dort sind die App Stores und das Installieren der App aber besondere Hürden. Deswegen wollte das Unternehmen eine Lösung, die ganz herkömmlich über eine URL zugänglich ist. Zudem war eine Grundvoraussetzung, dass der Außendienst den Produktfinder auch offline nutzen kann.

Eine Herausforderung war auch hier die Geschwindigkeit: Der Produktkatalog umfasst insgesamt rund fünf Gigabyte ­Datenvolumen. Dies galt es so aufzubereiten, dass wesentliche Teile davon vorab in den Cache geladen werden. Gleichzeitig mussten auch hier Alternativinhalte hinterlegt werden, wenn offline kein Zugriff auf Inhalte wie Videos möglich ist.

Auch Ingun setzt auf den Headless-Ansatz

Hinter der PWA steht die Headless-­Lösung "Ryve" von Curry Solutions aus Erlangen, die CMS-Funktionen mit Funktionen eines Product Information Manage­ment-Systems vereint. Die Agentur war auch für die Entwicklung der PWA sowie der beiden nativen Apps verantwortlich.

Das Budget für alle drei Apps lag laut ­Online Marketing Manager Ingo Anlauff im mittleren fünfstelligen Bereich. "Noch sind wir im Unternehmen überzeugt ­davon, dass wir native Apps brauchen. Die Ansicht, dass wir zugunsten der PWA ­darauf verzichten könnten, hat sich noch nicht durchgesetzt. Aber mit dem Fokus auf China testen wir das jetzt in einem ­unserer wichtigen Märkte", so Anlauff.

Das könnte Sie auch interessieren