Wo ist die Kaddz? Eine Progressive Web App kann die Frage beantworten

Seit unserem letzten Blog zum Thema Progressive Web Apps ist schon mehr als ein Jahr vergangen. Da Webtechnologie aber bekanntlich extrem schnelllebig ist, ist es höchste Zeit für ein Update. In diesem Blog stellen wir das kürzlich abgeschlossene Projekt KADDZ vor und zeigen, wie umfassend die Möglichkeiten nativer Funktionalitäten in PWAs mittlerweile sind. 

Standorttracking: Sehen wo sich deine Katze gerade befindet

Katzenbesitzer*innen aufgepasst! Mit dem von der Suchmich GmbH entwickelten smarten GPS-Katzenhalsband “KADDZ” weisst Du zu jeder Zeit wo sich dein Liebling befindet. Über die zugehörige App lassen sich alle Daten zur aktuellen Position und der Aktivität deiner Katze anzeigen und mittels Suchfunktion wird die Suche nach deiner Katze ein leichtes Spiel.

Der Homescreen der KADDZ App zeigt eine Karte, auf welcher jederzeit der aktuelle Standort der Katze(n) und das Zuhause ersichtlich sind. Die Homelocation (Zuhause) der Katze sowie Einstellungen von Gefahrenzonen können natürlich individuell eingerichtet werden. 

Sobald man die gewünschte Katze auf der Karte auswählt erscheint ein Funktionsmenü - eine sogenannte Snackbar. Die zugehörigen Funktionalitäten des Katzenhalsbands können nun aktiviert werden. Das Katzenhalsband verwendet ein GPS-Signal, um die Katze zu orten. Die Informationen des Standorts der Katze werden über das GSM-Mobilfunknetz mittels integrierter SIM-Karte im Halsband in regelmässigen Abständen an den Server übermittelt und schliesslich den Nutzern in der App angezeigt.

Wie stellen wir fest, ob sich eine Katze auch wirklich zu Hause befindet?

Das Katzenhalsband ortet nicht nur den Standort der Katze, sondern detektiert auch die umliegenden WiFi-Signale und deren Signalstärke. Nutzende haben so die Möglichkeit ihr Home-WLAN (Homezone) im Profil der Katze zuzuordnen. Somit können wir auf der Karte und im Profil der Katze anzeigen, ob sich die Katze gerade drinnen oder draussen befindet.

Das Katzenhalsband hat nicht nur ein GPS Tracker integriert, sondern auch ein Live Suchmodus. Der Suchmodus des Katzenhalsbands kann eingeschaltet werden und der aktuelle Standort wird innert kürzester Zeit aktualisiert. Falls die Live Suche nicht weiterhilft, weil sich die Katze im Keller oder in einer Garage befindet, kann auch ein Licht- und Tonsignal am Halsband aktiviert werden - Katze finden leicht gemacht!

Mit einer PWA native Apps ergänzen und ablösen

Im Sommer 2019 hatten wir das erste Mal Kontakt mit der Suchmich GmbH. Das Team der Suchmich GmbH hatte bereits vor einigen Jahren native Applikationen für Android und iOS umsetzen lassen und war auf der Suche nach einem neuen Entwicklungspartner für ihre iOS App. In einem ersten Schritt im Herbst 2019 behoben wir technische Fehler in der Businesslogik der nativen iOS App mit dem Ziel, die Kernfunktionalitäten für die User möglichst schnell und fehlerfrei zu optimieren.

Während der Optimierung der iOS App hatten wir die Möglichkeit, die Suchmich GmbH hinsichtlich ihrer bereits entwickelten digitalen Tools zu beraten. Die Suchmich GmbH hatte nicht nur eine iOS und Android App, sondern auch eine Webseite mit einem integrierten Shop für den Kauf der Halsbänder. Um den zukünftigen Wartungsaufwand mehrerer Applikationen möglichst auf ein Minimum zu reduzieren, entschieden wir uns gemeinsam, die bestehende Android App, welche über 4 Jahre kein Entwicklungs-Update erhalten hatte, durch eine PWA abzulösen. 

Neben der Erhebung der Anforderungen (Requirements Engineering) und der Umsetzung des Designs & Konzept, lag der Fokus bei der Entwicklung der Progressiven Web Applikation und der Brücke PHP zu Java. Eine der grössten Herausforderungen dabei war es, die Web-Applikation an das bereits bestehende Java-Backend auf Seite der Kundin anzubinden und die Businesslogiken, welche in den bereits entwickelten nativen Apps integriert waren, zu replizieren.

Funktionalitäten die das Web zu bieten hat

Was ist nun der Vorteil der PWA gegenüber einer nativen App? Wie schon erwähnt sind Webtechnologien schnelllebig. Dementsprechend sind auch die Möglichkeiten von nativen Funktionalitäten in PWAs gewachsen. Mittlerweile sind Funktionalitäten, die bis anhin nur in nativen mobilen Apps eingesetzt wurden, auch im Web umsetzbar. Unter anderem durch den Einsatz von Service Workern und Javascript Web-APIs, hat man umfangreichen Zugriff auf spezifische Gerätefunktionen, wodurch der Unterschied zu einer nativen mobile App minimiert und die User Experience verbessert wird. Für Enduser ist es nicht auf den ersten Blick ersichtlich, ob sie sich in einer nativen mobile App oder in einer PWA befinden. Folgende Features, die uns sonst eher aus nativen Apps bekannt sind, haben wir in der KADDZ PWA umgesetzt:

QR-Code Scanning

Jedes gekaufte Katzenhalsband muss zuerst registriert werden. Für die Registration des Katzenhalsbands kann der mitgelieferte Barcode auf der Verpackung mit Hilfe des in der PWA integrierten QR-Code Scanners gescannt werden.

Zugriff auf Kamera und Photolibrary 

Viele Katzenliebhaber*innen haben nicht nur eine Katze, sondern oft gleich mehrere. Um die Katzen auf der Karte und in den Einstellungen zu differenzieren, kann für jede Katze ein persönliches Profilbild herstellt werden. Nutzende können dazu ein Foto einer Katze hochladen oder mittels der Gerätekamera ein neues Bild aufnehmen.

Foto-Ausschnitt bearbeiten

Ein hochgeladenes Profilbild der Katze kann vor dem Hinzufügen zum Account bearbeitet werden. Der Ausschnitt des Bildes kann justiert, gedreht, gezoomt oder verworfen werden. Responsive Images und Cropping geht also auch in jeder PWA. Victor Adrian Full-Stack Developer und vue.js Experte hat uns hier ziemlich geholfen.

Standort der User

Geolocation und Permissions API: Ein weiteres App-ähnliches Feature für die Entwicklung der PWA. Sofern es das Gerät und der User zulässt, kann der Standort des Users sowie die Distanz zur Katze in der PWA angezeigt werden. 

Wie das Ganze funktioniert, wann eine Permission für den Zugriff auf den Standort erscheint, oder ob diese denied ist, erfährt man in der ausführlichen API Permission Dokumentation von Mozilla. 

Nachteile der entwickelten PWA gegenüber der nativen App

Wir konnten alle Features, welche in der bestehenden iOS App umgesetzt wurden, auch für die PWA entwickeln. Einziger Nachteil ist, dass iOS/ Apple die Push Notifikationen und einige spezifische Permission-Meldungen (noch) nicht zulässt. Aus diesem Grund hat die PWA bis jetzt ‘nur’ die Android App abgelöst. Für iOS User besteht nach wie vor die native App. 

Aus Kommunikations- und Marketingsicht stellten wir während der Entwicklung und den geführten internen und externen Gesprächen immer wieder fest, dass der Begriff Progressive Web Apps und deren Auffindbarkeit noch nicht überall in den Köpfen ist. Wie machen wir nun auf die fertige PWA aufmerksam, die nicht über die bekannten App Stores verteilt wird? 

Um eine Android App in den Play Store zu bringen, ist bekanntlicherweise ein .apk Package notwendig. Mit der von Google zur Verfügung stehenden Möglichkeit Trusted Web Activities (TWA) kann die PWA auch innerhalb einer Android App geöffnet werden. TWA ermöglicht es uns, eine PWA zu wrappen, was so viel bedeutet wie die PWA innerhalb der Android App als WebView darzustellen. Obschon es sich bei KADDZ um eine PWA handelt, können Android User die App also aus dem Google Play Store herunterladen.

PWA Funktionalitäten

Neben Features die im Prinzip mit auf jeder herkömmlichen Seite auch implementiert werden können, gibt es ein paar Funktionalitäten in KADDZ für welche spezifische "PWA-Features" nötig sind:

1. Add to home screen mit dem Web App Manifest

Besucher werden beim Öffnen der PWA darauf hingewiesen, dass diese zum Homescreen hinzugefügt werden kann. Sobald die PWA hinzugefügt wird, kann die PWA wie jede andere installierte App mit einem Klick auf das Adaptive-App-Icon auf dem Homescreen geöffnet werden. Die PWA kann nicht nur auf dem Smartphone auf den Homescreen hinzugefügt werden, sondern auch auf Desktop Geräten. 

Möchtest du mehr dazu erfahren? Dann empfehlen wir dir, unseren Blog Technologie und UX Secrets von Progressive Web Apps zu lesen.

3. Web Push Nachrichten mit Firebase

Für die KADDZ PWA brauchen wir den Service Worker, um es zu ermöglichen, Push Nachrichten zu abonnieren. Sobald Nutzende Push Nachrichten zulassen, registrieren wir die notwendigen Information und speichern diese in der Datenbank. 

Betritt nun eine Katze eine definierte Gefahrenzone (sog. Event Trigger), bearbeitet der Service Worker die eintreffende Nachricht des Backends und stellt diese anschliessend mit der dazugehörigen Information dar.

Technische Möglichkeiten iterativ ausprobiert

Mit der Umsetzung der KADDZ PWA haben wir nicht nur unser Wissen über die technischen Möglichkeiten von PWAs erweitert, sondern konnten dieses gleich iterativ testen und ausprobieren. Wir freuen uns schon jetzt, das nächste PWA-Projekt in Angriff zu nehmen! Das Wichtigste bleibt wie immer, dass eine technische Lösung - egal ob nativ oder web-basiert - die Erwartungen von Kunden und natürlich vor allem von Endnutzer*innen erfüllt.