Good to know: Eine Progressive Web App (PWA) ist eine Website, die sich wie eine App verhält – sie läuft im Browser, kann aber auch auf dem Smartphone installiert werden und bietet Funktionen wie Push-Nachrichten oder Offline-Nutzung.
Die Entwicklung der ersten Ökokiste Progressive Web App (PWA) haben wir für den Betrieb Boßhammersch Hof umgesetzt. Schau Dir dazu auch gern unser Projekt Ökokiste – E-Commerce für Bio-Betriebe an.
Die Entscheidung zu Gunsten einer PWA wurde von mehreren Faktoren beeinflusst: Das Ziel war es, eine mobile Version der Ökokiste Shop-Webseite des Boßhammersch Hofes in Form einer App bereitzustellen, da Endkunden den Komfort der App-Nutzung aus ihrem Alltag kennen und zum großen Teil bevorzugen. Daneben sollten App-spezifische Features wie Push-Benachrichtigungen oder spezielle Features mit diesem Projekt ermöglicht werden. Allerdings sollte die App gleichzeitig mit relativ wenig Aufwand und entsprechend kostengünstig entwickelt werden und ebenfalls redaktionell möglichst pflegeleicht sein. Da bei einer PWA die Webinhalte auch in der App genutzt werden, müssen sich Betriebe hier nur an einer Stelle um die Redaktion kümmern. Es galt in diesem Projekt unter anderem auch aus Kostengründen, einen Weg zu finden, doppelte Entwicklung für unterschiedliche Plattformen (z.B. für Android oder iOS) zu vermeiden. Auch deshalb bot sich das Konzept PWA an. Hinzu kam, dass in Zukunft potentiell auch weitere Ökokiste Betriebe Interesse an einem ähnlichen Konzept zeigen könnten, welche aber jedes Mal unter anderem ein völlig eigenes Design benötigen würden. Die PWA war in diesem Fall die am besten geeignete Lösung, um alle gegebenen Anforderungen zu vereinen.
Unsere Aufgabe war es, die Kosten und Entwicklungszeit der App gering zu halten und dabei trotzdem alle Webseiten-Features wie die Rezeptdatenbank, das Umtauschen von Artikeln, und auch Rezeptvorschläge in der App zum Laufen zu bringen.
Zusätzlich haben wir typische App-Features wie die Platzierung der Menü-Buttons am unteren Ende der Seite und Benachrichtigungen in Form von Push-Notifications eingebaut. Außerdem haben wir in diesem Projekt erweiternde App-exklusive Features entwickelt: die Lieferverfolgung und Reklamation von Produkten.
Ein weiteres Feature der PWA ist, dass Endnutzer die Einstellungen für Push-Notifications pro Gerät statt pro Account festlegen können. Wenn man also in einem Haushalt gemeinsam über einen Account bestellt, entscheidet jeder Einzelne über die Benachrichtigungen, die er oder sie schlussendlich auf seinem oder ihrem eigenen Gerät empfangen möchte. Über Deep Linking ist nachvollziehbar, welcher Account auf welchem Gerät wann welche Benachrichtigung bekommen hat.
Die erstmalige Entwicklung einer Progressive Web App hat uns vor verschiedene Herausforderungen gestellt.
Zum einen musste ein PWA-spezifisches Landingpage-Routing erstellt werden, damit die Generierung der PWA Landing-Page korrekt aus dem dafür geschriebenen Script erfolgen konnte. Außerdem war die Konfiguration des Zugriffs der PWA auf die Webseitendaten nicht so einfach wie ursprünglich gedacht.
Außerdem stellte sich der System- und Browsersupport als Herausforderung heraus: unterschiedliche Geräte und sogar unterschiedliche Browser unterstützen PWAs auf vollkommen unterschiedliche Weise. Doch im Endeffekt gelang es uns, mit viel Testing sowohl das Landingpage-Routing korrekt zu konfigurieren als auch eine für alle geeignete Installationsanleitung zu definieren.
Im Laufe der Entwicklung haben sich außerdem einige Betriebssystem-spezifische Probleme ergeben: es stellte sich heraus, dass iOS bei langen App-Bezeichnungen Leerzeichen entfernt. Deshalb wurde für iOS ein zusätzliches Feld in der PWA-Konfiguration für einen kürzeren Titel angelegt. Eine weitere Hürde war, dass sich die PWA auf Android nur ein einziges Mal installieren ließ, während es auf iOS keinerlei solche Einschränkungen gab. Um die mehrfache Installation auch auf Android zu ermöglichen, haben wir Cookies eingesetzt.
Auch beim Thema Push-Notifications gab es einige Challenges zu überwinden: Diese mussten Datenschutz-konform implementiert werden. Das hieß für uns, dass wir ohne Firebase und andere Dienstleister arbeiten mussten. Die Lösung hierfür war das Programmieren der Push-Benachrichtigungen direkt über die Schnittstellen der Betriebssysteme. Außerdem mussten wir sicherstellen, dass die Weiterleitung vom Klicken auf eine Benachrichtigung zu der korrekten Stelle in der App führt.
Wir haben uns bei diesem Projekt für einen Soft-Launch entschieden. Das bedeutete: Beta-Testing für ausgewählte Testaccounts im laufenden Betrieb. Wir haben im Live-Shop getestet, ohne die Gefahr, dass der Betrieb selbst darunter leiden könnte. Wenn das Feature ausreichend gut entwickelt war, konnten Testgruppen schrittweise vergrößert werden.
Dadurch konnten wir ein sehr geringes Risiko beim globalen Roll-out des jeweiligen Features garantieren, weil es bereits in der Umgebung getestet wurde.
Ein weiterer Grund der für einen Soft-Launch gesprochen hat, war die hohe Zahl von Nutzer:innen, die die App direkt verwenden würden.
Eine der größten Herausforderung bei der PWA-Entwicklung waren außerdem Caching-Anpassungen auf User/Feature-Set Basis, welche es vorher in der Konfiguration nicht gab. Dadurch musste ein flexibles Caching-Konzept entwickelt werden, das sowohl individuelle Nutzererlebnisse ermöglicht als auch die Performance der Anwendung sicherstellt.
Ökokiste Betrieb Boßhammersch Hof
Die Ökokisten-Betriebe liefern frisches Obst und Gemüse, Fleischprodukte, Milchprodukte und vieles mehr persönlich nach Hause. Mehr als 60.000 Haushalte sind bereits überzeugt: Familien, Singles, Berufstätige, Rentner sowie ganze Unternehmen, Kindergärten und Schulen. Jeder Ökokiste-Teilnehmer lebt "Bio" mit Leib und Seele. So auch Familie Firsching mit ihrem Boßhammersch Hof. Als Teil dieser Gruppe kennt Familie Firsching die Bedürfnisse und Wünsche der Kollegen und Freunde ganz genau. Sie sind die Gründer von 360ff und damit die Initiatoren der White-Label-Shops und haben uns in Folge dessen mit der Umsetzung der PWA für den Boßhammersch Hof beauftragt.
