Aus zwei mach eins

Zum 550-Jahre-Jubiläum der Basler Herbstmesse, wurden der bestehende kantonale Webauftritt der Basler Herbstmesse und die bestehende native App “Basler Herbstmesse” durch eine moderne, zeitgemässe Progressive Web App (PWA) abgelöst.

Nebst umfangreichen Informationen rund um die Geschichte und Tradition der Basler Herbstmesse bietet die PWA den Herbstmesse Besucher*innen während der Herbstmesse folgende praktische Funktionalitäten:

• Liste sämtlicher Bahnen, Buden und Stände, filterbar nach verschiedenen Kriterien

• Übersichtsplan zu den Plätzen der Basler Herbstmesse

• Suchfunktion nach Stichworten in der Schaustellerliste

• Navigationsfunktion: User*innen können via Google Maps einfach zum gewünschten Angebot navigieren

• Abonnieren von Push-Mitteilungen, um über aktuelle News der Herbstmesse informiert zu werden

• Veranstaltungskalender

Warum eine Progressive Web App?

Ziel von PWAs ist es, die Vorteile von nativen Apps und Webanwendungen zu kombinieren und User*innen plattformunabhängig eine möglichst gute User Experience zu bieten. Gegenüber der “alten” Lösung bestehend aus einer Website und einer nativen App, bietet die PWA für die Herbstmesse Besucher*innen folgende Vorteile:

• Integration aller Informationen und Funktionen auf einer statt auf zwei Plattformen

• Einfacher Zugang für User*innen, da keine App aus den App Stores heruntergeladen werden muss. Trotzdem kann die PWA zum Home Bildschirm hinzugefügt werden und lässt sich entsprechend wie eine native App aufrufen. Ausserdem ist es möglich, Push-Nachrichten zu erhalten.

• Bessere Auffindbarkeit über die Suchmaschinen

• Kompatibilität mit allen Betriebssystemen

• Zukunftsorientierte Lösung

Die PWA wurde mobile first entwickelt, ist aber auch für Desktop optimiert, sodass unabhängig vom Endgerät eine gutes Erlebnis für die User*innen entsteht.

Was macht eine Website zur PWA?

Damit eine Website als PWA bezeichnet werden kann, sind folgende Bedingungen zu erfüllen:

• Ein SSL Zertifikat muss vorhanden sein, sprich die Website muss über eine sichere HTTPS Verbindung bereitgestellt werden

• Ein Service Worker muss implementiert sein. Dadurch werden Funktionalitäten wie Push Nachrichten oder offline Funktionalität erlaubt

• Ein Web Manifest muss vorhanden sein, um die Identität und das Erscheinungsbild der PWA zu definieren

Im Folgenden ein Code Ausschnitt der Basler Herbstmesse PWA:

Wenn du dich detaillierter über die Vor- und Nachteile von PWAs informieren willst, empfehlen wir dir unsere dreiteilige PWA-Blogserie:

• Teil 1: Progressive Web App - eine Alternative zur native mobile App?

• Teil 2: PWAs - Möglichkeiten, Grenzen und Stärken

• Teil 3: Technologie und UX Secrets von Progressive Web Apps

Hoher Traffic handeln mit schlauem Caching und Statamic

Zahlen zu den Seitenaufrufen zeigen, dass sich die Umstellung von App und Website auf eine moderne PWA gelohnt hat: Der der Traffic auf der neuen PWA gegenüber der alten Herbstmesse Website konnte im Jahr des 550-Jahre-Jubiläum der Basler Herbstmesse, gegenüber 2019 verdreifacht werden und ist im 2023 erneut auf gut 300'000 Seitenbesuche angestiegen. 

Bei diesen Traffic-Zahlen, die dazu auch noch in Spitzen auftreten, ist die Performance ein zentraler Aspekt. Zumal die Seite nicht gerade “leicht” ist: Die vielen Attraktionen an der Herbstmesse führen unter anderem zu vielen Bildern auf der Webseite und User*innen wollen nicht Ewigkeiten auf die Beschreibung eines Foodstandes oder der nächsten Bahn warten. Es war also wichtig, vor allem auf Server-Seite entsprechend zu optimieren:

• Statamic: Microcaching mit nginx

• Automatische Bildanpassung auf dem Server

Die hohe Anzahl Seitenbesuche während der Herbstmesse 2023 zeigen, dass die PWA als praktische Begleiterin den Bedürfnissen der Herbstmesse Besucher*innen gerecht wird.