Two become one

For the 550th anniversary of the Basel Autumn Fair, the existing web presence of the Basel Autumn Fair and the existing native app "Basel Autumn Fair" were replaced by a modern, up-to-date Progressive Web App (PWA).

In addition to comprehensive information about the history and tradition of the Basel Autumn Fair, the PWA offers visitors the following practical functions during the Autumn Fair:

• List of all rides, stalls and stands, filterable by various criteria

• Overview map of the sites of the Basel Autumn Fair

• Search function by keyword in the list of exhibitors

• Navigation: Users can easily navigate to the desired offer via Google Maps

• Subscription to push notifications to be informed about the latest news of the Autumn Fair

• Calendar of Events

Why a Progressive Web App?

The aim of PWAs is to combine the advantages of native apps and web applications and to offer users the best possible user experience regardless of the platform. Compared to the "old" solution consisting of a website and a native app, the PWA for visitors of the Autumn Fair offers the following advantages:

• Integration of all information and functions on one platform instead of two

• Easier access for users, as no app needs to be downloaded from the app stores. Nevertheless, the PWA can be added to the home screen and can be called up like a native app. It is also possible to receive push messages.

• Better discoverability in search engines

• Compatibility with all operating systems

• Future-oriented solution

The PWA was developed mobile first, but is also optimized for desktop. Therefore the user experience is good regardless of the device.

What makes a website a PWA?

For a website to be designated as a PWA, the following conditions must be met:

• An SSL certificate must be available, i.e. the website must be provided via a secure HTTPS connection

• A service worker must be implemented. This allows functionalities such as push messages or offline functionality

• A web manifest must be available to define the identity and appearance of the PWA

The following is a code extract from the Basel Autumn Fair PWA:

If you want to learn more about the pros and cons of PWAs, we recommend our three-part PWA blog series:

• Part 1: Progressive Web Apps - an alternative to native mobile apps?

• Part 2: PWAs - possibilities, limits and strengths

• Part 3: Technology and UX Secrets of Progressive Web Apps

Handling high Traffic with clever caching and Statamic

The number of page impressions show that the conversion of the app and website to a modern PWA has paid off: The traffic on the new PWA compared to the old Autumn Fair website tripled in the year of the 550th anniversary of the Basel Autumn Fair, compared to 2019 and rose again in 2023 to a good 300,000 page visits. 

With these traffic figures, which also occur in peaks, performance is a key aspect. Especially as the site is not exactly "light": the many attractions at the Autumn Fair lead, among other things, to many pictures on the website and users don't want to wait ages for the description of a food stand or the next ride. It was therefore important to optimize the server side:

• Statamic: Microcaching with nginx

• Automatic image adjustment on the server

The high number of page visits during the Autumn Fair 2023 show that the PWA as a practical companion meets the needs of Autumn Fair visitors.