Der WC-Guide ist das grösste Verzeichnis öffentlicher Toiletten in der Schweiz. Was zuerst nach einer lustigen Idee klingt, ist für viele eine unverzichtbare Plattform. Wer aufgrund einer Krankheit oder anderen Umständen in seinem Alltag auf öffentliche Toiletten angewiesen ist, muss den Standort von öffentlichen Toiletten schnell und unkompliziert abrufen können. Aus diesem Grund arbeitet der WC-Guide auch eng mit Organisationen wie der pro infirmis und CrohnColitis Schweiz zusammen.
PWA: Eine App, alle Plattformen
Wie wohl die meisten, die digitale Produkte erstellen, hat auch der WC-Guide bisher auf drei unterschiedliche Plattformen gesetzt: eine iOS-App, eine Android-App und einer Web-App. Dies ist aufwendig, teuer aber leider notwendig, da die Webplattform bisher im Funktionsumfang den anderen Plattformen leider weit hinterherhinkte.
Mit den Technologien hinter dem Überbegriff “Progressive Web Apps” ändert sich das nun. Offline-Nutzung, Push-Notifications oder ein integriertes App-Erlebnis sind damit auch über den Browser möglich. In meinem Gastbeitrag auf cyon.ch habe ich mich dem Thema noch ausführlicher gewidmet.
Für uns Stand vor allem im Vordergrund, dass wir den Funktionsumfang, wie auch das Nutzererlebnis der bestehenden Mobile-App, welche immerhin über 30’000 Installationen vorweisen kann, so gut wie möglich in den Browser bringen können. Neben der Integration von diversen modernen Browserschnittstellen, legten wir viel Wert auf eine möglichst effiziente Nutzung der Netzwerkanfragen, und ein lückenloses Nutzererlebnis auch ohne Internetverbindung. Daneben kann die neue App auf dem Homescreen installiert werden und ist damit nahtlos in das Gerät integriert.
Die Architektur
Im Gegensatz zu klassischen Webseiten haben wir uns hier für eine Singe-Page-Architektur entschieden. Dabei wird die Seite nicht im Server aufgebaut, sondern im Browser. Das eignet sich hervorragend, wenn sich bei Seitenwechseln nur jeweils kleine Elemente ändern und kein Reload der Seite durchgeführt werden soll. Das Framework unserer Wahl ist in diesem Fall vueJS.
Offline First
Eine der zentralen Funktionen der App sollte die offline Verfügbarkeit sein. Grundsätzlich heisst das, dass die App unabhängig von der Netzwerkverfügbarkeit nutzbar sein soll. In dem Fall wollten wir noch einen Schritt weiter gehen: offline First!
Nachdem die App initial geladen wird, ist Netzverfügbarkeit nur noch ein nice-to-have und überhaupt keine Voraussetzung mehr. Für uns in der Entwicklung bedeutete dies in erster Linie ein Umdenken. Bei jedem Netzwerk-Request mussten wir uns genau überlegen, ob dieser überhaupt notwendig ist und was geschehen soll, wenn der Request fehlschlägt. Dies hat vor allem dazu geführt, dass wir uns prinzipiell auf die Ressourcen des Browsers verlassen haben (App-Storage, IndexedDB) und neue Daten nur wenn möglich geladen oder aktualisiert werden.
Dezentrales CMS
Zur Zeit werden die Einträge noch über eine relativ alte PHP-Applikation verwaltet. Diese wird mittelfristig durch eine Open Data Plattform abgelöst. Zudem benötigten wir die Flexibilität, statische Seiten über ein Admin-Interface verwalten zu können.
Hier kam uns unsere Architektur zu Gute, in dem die App Informationen aus verschiedene Datenquellen bezieht. So nutzen wir z.B. für die statischen Seiten eine “headless” WordPress-Installation, für die Übersetzungen ein Google Spreadsheet und für die Verwaltung der Einträge das besagte Backend. Letzteres können wir zu gegebener Zeit problemlos durch die neue Plattform ersetzen, ohne grössere Anpassungen an der App vorzunehmen.
Open Source
Zu guter Letzt hat uns enorm gefreut, dass wir den gesamten Code unter einer Open-Source-Lizenz veröffentlichen können: https://github.com/wc-guide/wc-guide-pwa
Mit diesem Anliegen wurden bei uns natürlich offene Türen eingerannt. Eine quellenoffene App, die Daten über eine offene Schnittstelle bezieht und auf der Open-Web-Plattform läuft. Ein Projekt, ganz nach unserem Geschmack.
Zur Zeit läuft die offene Betaphase und wir freuen uns über Feedback:
Update 30.09.2019
Nach einer erfolgreichen Beta-Phase mit viel nützlichem Feedback haben wir die App nun auf dem Hauptdomain aufgeschaltet. Feedback ist aber natürlich immernoch willkommen.
