Smartphone
21.02.2020
Case-Study
1. Teil: „Eine Progressive Web App für die Lübecker Bucht“

Eine Progressive Web App für die Lübecker Bucht

Lübecker BuchtLübecker BuchtLübecker Bucht
Tourismus-Agentur Lübecker Bucht
Die Tourismus-Agentur Lübecker Bucht begleitet seine Gäste mit Echtzeitinformationen. Dafür kommt unter anderem eine Progressive Web App (PWA) zum Einsatz.
  • Reise-App: Zeitgenaue, ortsbezogene Informationen.
    Quelle:
    Tourismus-Agentur Lübecker Bucht
Wer kommt nicht gern ans Meer, um zu entspannen? Die Tourismus-Agentur Lübecker Bucht hat eine dank­bare Aufgabe: Sie macht touristisches Marketing für die Orte entlang der Lübecker Bucht. Dazu zählen Timmendorfer Strand, Scharbeutz, Sierksdorf und Neustadt in Holstein. Falls es den Touristen doch nicht genug sein sollte, einfach am Strand zu sein und aufs Meer zu blicken, ist in den Orten immer was geboten: Feste, ein Rennradwochenende, Fackelwanderungen, das Haffkruger Punschtreffen.
Die Gäste wollen natürlich auch wissen, wo ein schönes Café oder die nächste Apotheke ist, weiß André Rosinski, Vorstand der Tourismus-Agentur: „Wir informieren über das Web und sind auf Social Media aktiv“, sagt er, „doch wenn der Gast vor Ort ist, hatten wir bisher keine Möglichkeit, ihn mit lokalen ­Informationen in Echtzeit zu versorgen“ - etwa darüber, welche Veranstaltungen gerade während seines Aufenthalts stattfinden. Gäste und Einheimische suchen zwar über ihr Smartphone nach diesen Informationen, doch die Ergebnisse, die Suchmaschinen liefern, bleiben an der Oberfläche. „Veranstaltungen, die bei uns vor Ort stattfinden, tauchen in Google nicht auf“, weiß Rosinski.
Was tun? Um die Menschen vor Ort mit detaillierten Infos versorgen zu können, hat sich die Tourismus-Agentur entschieden, eine mobile App entwickeln zu lassen. Deren Aufgabe: Einheimische und ­Gäste zuverlässig über all das zu informieren, was in den Gemeinden gerade los ist. Der englische Begriff für solche zeit­genauen, ortsbezogenen Detail-informa­tionen ist „hyperlocal“. Im deutschen ­Digitalmarke-
ting ist diese Bezeichnung noch relativ neu. „Gäste erwarten eine Wettervorhersage, Hinweise auf Veranstaltungen oder wo man einkaufen kann. Es geht darum, den Gast vor Ort gut zu lenken. Das alleine ist schon eine Kunst“, fasst Rosinski zusammen.
Die Tourismus-Agentur hatte drei Agenturen zum Pitch eingeladen. Zwei boten die Erstellung von nativen Apps für ­Android und iOS an, die Digital­agentur Hmmh punktete mit der Idee ­einer Progressive Web App (PWA), einer Symbiose aus einer klassischen Webseite und einer mobilen App. Ihr Vorteil: Da die App keine klassische native App ist, sondern eine Webseite, kann sie ohne Installation schnell auf dem Homescreen des ­Geräts abgelegt werden und benötigt als reine Webanwendung zudem kaum Speicher.
Auf die Funktionen von nativen Apps wie Push-Nachrichten, Geolokalisierung oder Zugriff auf die Kamera muss dennoch nicht verzichtet werden. Besteht gerade keine Internetverbindung, lässt sie sich offline nutzen. Gäste können auf den Veranstaltungskalender, auf Outdoor-Routen oder ihre individuellen Merklisten auch dann zugreifen, wenn sie kein Netz haben.

Ohne Download

Nutzer finden zudem leichter Zugang zur App als bei herkömmlichen mobilen Apps. Denn sie rufen einfach die URL Luebecker-Bucht.guide über den Browser ihres Smartphones auf. Die Suche und das Herunterladen der App wird damit überflüssig. „Es gibt so viele Apps in den App Stores. Würden die Gäste unsere App wirklich finden und herunterladen?“, beschreibt Rosinski die Überlegungen im Vorfeld.
Ein weiterer Pluspunkt der PWA: Der Pflegeaufwand ist für die Tourismus-Agentur insgesamt niedriger, weil nicht zwei native Apps inklusive der Anbindung an die unterschiedlichsten Datenbanken aktuell gehalten werden müssen.
Argument Nummer drei: Die Kosten für die Umsetzung waren nur halb so hoch wie für eine native App. „Gerade bei einem Projekt mit Gelegenheitsnutzern als Zielgruppe zeigt sich, dass niedrige Entwicklungskosten in keinem Gegensatz zu einem maximalen Return on Investment stehen“, betont ­Marius Bruns, als Unit Director bei Hmmh für die Entwicklung der App verantwortlich. In relativ kurzer Zeit hatte die Digital­agentur das Projekt mit dem Methoden-Framework Scrum umgesetzt. „Mitte Januar 2019 haben wir losgelegt und zur ersten Urlaubssaison an Ostern ist die App live gegangen“, blickt Bruns zurück. Um sicherzustellen, dass ­alles so funk­tioniert wie geplant, testeten Urlauber die App zwei Tage lang.
Ihr Design wurde so angelegt, dass mehrere Tourismus-Agenturen Elemente ihrer eigenen Corporate Identity inte­grieren können. Denn die PWA für die Lübecker Bucht entstand in Kooperation mit der Timmendorfer Strand Niendorf Tourismus GmbH. „Die Kollegen haben eine andere Datenbank als wir“, erläutert Rosinski.
2. Teil: „Schnittstellen-Ebene“

Schnittstellen-Ebene

  • Werbetrommel: Aufsteller und Plakate machen auf die App aufmerksam.
    Quelle:
    Tourismus-Agentur Lübecker Bucht
Eine Herausforderung war, die Datenbanken von Dritten an die neue App anzubinden. „Wir wollten die Datenbanken nicht neu aufsetzen“, berichtet der Leiter der Tourismus-Agentur. Deshalb hat das Entwicklerteam eine Middleware als Zwischen­ebene ein­gezogen. Sie führt die Schnittstellen zu den verschiedenen ­Datenbanken zusammen und dient als Zwischenspeicher. Die Daten in der Middleware werden regelmäßig ­aktualisiert. Ein Content-Management-System kommt nicht zum Einsatz.
Wie kompatibel ist die Progressive Web App mit den verschiedenen mobilen Geräten? „PWAs werden auf unterschiedlichen Plattformen unterstützt“, erklärt Marius Bruns. Auch wenn noch vieles im Fluss sei, werde die Kompatibilität immer besser. Die App der Lübecker Bucht funktioniere mit Android, iOS, Blackberry und Windows.

Regionales Werbekonzept

Damit Einheimische und Gäste von der App erfahren und sie verwenden, hat die Tourismus-Agentur Postkarten, Plakate und Thekenaufsteller drucken lassen. Auch in den Informationsmappen der Ferienwohnungen wird auf sie hingewiesen. Rosinski ist mit der Progressive Web App zufrieden. Inzwischen fragen erste Unternehmen bei der Tourismus-Agentur an, wie sie in der App werben können. „Wir entwickeln jetzt ein Werbekonzept für Anbieter aus der Region“, sagt er. Und er will weitere Gemeinden für eine Kooperation gewinnen.
Außerdem stehen Verbesserungen und Funktionserweiterungen an: Mit dem Ausbau der individuellen Merklisten soll die App personalisiert werden. „Die Progressive Web App ist für uns ein Technologieträger. Wir planen, eine digitale Gästekarte zu integrieren“, führt Rosinski aus. Er kann sich auch vorstellen, dass künftig ein Verleih für E-Roller und E-Autos in die App integriert wird. Dann kann der Ausleihprozess darüber abgewickelt werden. Eine weitere Anwendung könnte die Hilfe bei der Parkplatzsuche sein. Für viele Funktionen wird es nötig sein, dass sich die App-Nutzer anmelden oder einloggen, deshalb soll ein Login-Prozess ergänzt werden. „Die Progressive Web App ist für uns kein abgeschlossenes Projekt, sondern aktuell eine erste Basisversion“, so Rosinski. Die Arbeit geht weiter.
Case-Steckbrief
Auftraggeber: Tourismus-Agentur Lübecker Bucht in Kooperation mit der Timmendorfer Strand Niendorf Tou­rismus GmbH
Das Besondere: Als erste Destination im deutschen Tourismus setzt die ­Lübecker Bucht statt auf eine klassische App auf eine Progressive Web App (PWA):
  • Sie ist plattformunabhängig einsetzbar, kompakt, offline nutzbar und immer auf dem aktuellen Stand
  • Entwickelt mit der agilen Methode Scrum in nur drei Monaten
  • Frontend-Entwicklung mittels React
  • Zusätzlich zur Progressive Web App wurde eine Middleware eingebaut. Sie erlaubt es, verschiedene Backend-Quellen zu integrieren
Dienstleister: die Bremer Digitalagentur Hmmh und Saint Elmo’s Tourismusmarketing

mehr zum Thema