Die Syneco GmbH besitzt Niederlassungen in Solothurn, Lausanne und Zug. Sie ist spezialisiert auf den Verkauf von Menerga Produkten (Klimageräte und Wärmepumpen) und Regelsysteme der SE Elektronic. Damit ihre MitarbeiterInnen die Wartungsarbeiten und Stundenrapporte vor Ort und ohne Papier vornehmen können, ist eine mobile Webapplikation im Einsatz. Diese wurde bisher mit Hilfe von Cordova als Android App auf die mobilen Endgeräte verteilt. re:thinc vereinfachte, neben Fehlerkorrekturen und Erweiterungen, die technische Grundlage der Applikation.
Cordova als überflüssger Layer
Apache Cordova ist ein Layer, welcher vorwiegend bei mobilen Webapplikationen verwendet wird. Zusätzlich zum Zugriff auf native Komponenten erlaubt Cordova die Installation einer Javascript / HTML Applikation, welche über eine native Webview angezeigt wird. Dadurch kann eine offlinefähige mobile Webapplikation erstellt werden. Dieser Vorteil war schlussendlich der Hauptgrund für den Einsatz von Cordova bei Syneco. Jedoch brachte der Einsatz von Cordova auch Nachteile mit sich:
- Neue Versionen der Applikation mussten über einen App Distributionskanal (z.B. Play Store Beta) gemacht werden. Dies verursachte bei jeder Aktualisierung einen zusätzlichen Aufwand für das Verteilen der Applikation.
- Wegen dem Einsatz eines Cordova Plugins, welches nur mobile Zielplattformen unterstützt, war die aktuellste Version der Applikation in Desktop Browsern nicht mehr lauffähig.
- Die kompliziertere Entwicklungsumgebung führte zu Mehraufwand bei Anpassungen. Anstelle der Validierung direkt im Desktop Browser, konnte der Entwicklungsstand nur mittels einem Smartphone getestet werden.
Durch den Umstand, dass die Applikation auf reinen Webtechnologien basiert und als mobile Zielplattform ausschliesslich Android verwendet wird, entschlossen wir uns für eine Migration zu einer PWA.
Was ist eine PWA?
Eine Progressive Web App bietet unter anderem die Möglichkeit, eine Webapplikation offline verfügbar zu machen. Dafür sind keine Plugins oder native App Layer nötig, sondern lediglich ein aktueller Browser, welcher die nötigen Funktionen für eine PWA anbietet. Mittels einem Service Worker wird die PWA konfiguriert. Dieser beschreibt die nötigen Daten für die Offline-Fähigkeit, Versionierung der Applikation und das Caching-Verhalten für Web Requests.
Und so funktioniert die Offline-Fähigkeit:
Beim ersten Request speichert der Service Worker die Applikationsdateien welche für die Offline-Fähigkeit benötigt werden in den Application Cache vom Browser.
Durch das Ändern des Service Workers kann zu einem späteren Zeitpunkt eine Aktualisierung der Applikation angestossen werden.
Beim nächsten Aufruf werden die Applikationsdateien aus dem Cache geladen. Alle anderen Requests, wie z.B. der Aufruf einer Web API, werden als normaler Web Request ans Internet weitergeleitet.
Ist man vom Internet getrennt, kann dank der Hilfe vom Service Worker weiterhin eine lauffähige Applikation bereitgestellt werden. Die App kann dabei alle Daten verwenden, welche in einem browserseitigen Speicher, z.B. einer Web SQL Datenbank, gespeichert wurden.
Alle Browser welche keine Progressive Web Apps unterstützen, beziehen die Applikation weiterhin direkt vom Internet.
Eine zusätzliche Manifest Datei gibt der Applikation ihren Namen und ein App Icon. Dies ermöglicht die Installation der PWA App auf dem Android Home Screen. Kurzum: Eine PWA erlaubt es uns eine mobile Webapplikation mit nativen Charakteristika zu erstellen. Jedoch mit einer grossen Einschränkung: iOS. Apple bietet bis dato keine Unterstützung für PWAs.
Migration zu einer PWA
In unserem Syneco Projekt haben wir als ersten Schritt eine reine Webapplikation erstellt. Um dies zu erreichen wurde der Cordova Layer und die dazugehörigen Plugins entfernt. Damit entstand eine voll funktionsfähige Webapplikation, welche von den gängigen Browsern unterstützt wird. Als zweiten Schritt fügten wir den Service Worker und die Manifest Datei hinzu. Diese ermöglichten die offline Nutzung der Applikation. Als letzen Schritt mussten wir sicherstellen, dass die App über eine gesicherte HTTPS-Verbindung erreichbar ist.
Durch den Wechsel zu einer Progressiven Web App erreichten wir folgende Vorteile:
- Browser welche PWAs unterstützen können die Applikation bequem über eine URL installieren.
- Browser welche keine PWAs unterstützen können die Applikation trotzdem verwenden, einfach ohne Offline-Fähigkeit.
- Aktualisierungen können für alle Plattformen zentral ausgelöst werden. Nach dem erneuten Aufruf der Seite, respektive dem Öffnen über das App Icon auf dem Homescreen, wird eine neue Version der Applikation automatisch installiert.
- Die Auslieferung über den Google Play Store fällt weg. Die Applikation kann wie eine Webseite direkt aktualisiert werden.
- Zusätzliche plattformspezifische Konfigurationen für Cordova sind hinfällig.
Da bei Syneco kein iOS Support nötig ist, konnten wir eine mobile App erstellen welche die gleiche User Experience wie eine Cordova App bietet. Dank dieser Umstellung läuft die App nun ebenfalls im Desktop Browser und der Entwicklungsaufwand für Anpassungen konnte durch die vereinfachte Architektur reduziert werden.
Technologien
- Service Worker (Progressive Web App)
- Javascript / HTML
- Webpack
- Docker (nginx / letsencrypt)
