A Perfect Match – Norwegian Pro Football and PWA

The Norwegian Professional Football League (NPFL) already used Enonic to create a unified user experience across dozens of professional football clubs from Norway’s two elite divisions – Eliteserien and OBOS-ligaen.

In addition to having a user-friendly and flexible editorial tool, the NPFL wanted to improve its digital experiences even further.

The NPFL opted to expand the interoperability between computers and phones, browsers and apps. They and implementation partner 99x started looking at the technology known as progressive web apps (PWA).

A PWA is a lightweight website that can act just like an app on your smartphone, with fast loading, rich features, and a convenient app icon—without actually being a native app.

Now, what challenges and results did this technology yield for the NPFL?

Challenge

The NPFL already managed a few exclusive apps on app stores, but wanted their solutions to provide value for all the football clubs.

The existing native apps provided video clips from live matches when connected to the local stadium WiFi, a feature that had to be transferred to the upcoming PWA.

While the websites were based on Enonic, the apps used another CMS and lacked several integrations. This was neither user-friendly nor financially sound.

The biggest challenge by far was to ensure that all the editorial and developmental work put into the existing solution by the different clubs could function with the new PWAs.

The clubs had spent years creating and managing content, and the NPFL tasked 99x with developing a solution that would simultaneously be future-proof while taking the past into account.

Solution

One particular feature of progressive web apps is the centrality of development. Developers no longer needed to relate to different systems or vendors specific to each mobile platform, thus reducing costs and time spent.

Upgrades are done incrementally. The PWA will check for changes in the code, then upgrade when there’s a new version.

This makes the PWA much faster than normal websites and the users are always up-to-date.

99x created a double splash screen for the PWA. It first loads a static screen with the local club logo, before loading content in the background. Then it switches over to a splash screen with more dynamic sponsorship logos.

Another function checks if the user is in the stadium, for delivering video clips from the live match.

Additionally, when fans log into the stadium’s WiFi and use the PWA, the event listeners of a marketing automation system are triggered. This prompts a push notification a few minutes before the end of the match with coupon offerings.

To emulate a fast app experience, caching was a strict necessity. 99x experimented with precaching and opportunistic caching of content they statistically knew that users will digest during their next visit.

Due to browser and OS limitations, 99x had to balance between what content should be cached. It was mainly used on the menu structure, the front page, stats table, and match schedule.

Furthermore, the design for the mobile pages is based on classical app aesthetics, which naturally is reflected in the PWAs.

Finally, Enonic is used as the content platform—delivering important and much-needed fresh and timely content in the PWAs. 99x utilized parts of Enonic’s Workbox PWA Starter and Google’s own PWA tools to build the specific progressive web app functionality.