En perfekt match – fotball og PWA

Introduksjon

Norsk Toppfotball (NTF) brukte allerede Enonic-plattformen for å skape en enhetlig, men fleksibel merkevare- og brukeropplevelse på tvers av titalls profesjonelle fotballklubber fra Norges to elitedivisjoner – Eliteserien og OBOS-ligaen.

Som om det ikke var nok med et brukervennlig og fleksibelt redigeringsverktøy på tvers av en haug nettsteder, ønsket NTF å forbedre sine digitale tilbud enda mer. Som en del av en større plan for å kontinuerlig forbedre den generelle brukeropplevelsen, valgte NTF å utvide samspillet mellom datamaskiner og telefoner, nettlesere og apper. NTF og implementeringspartneren Seeds begynte derfor å se på teknologien kjent som progressive webapplikasjoner (PWA).

En PWA er et lettvektsnettsted som kan fungere akkurat som en app på din smarttelefon, med rask lasting, rike funksjoner og et praktisk appikon – uten å faktisk være en reell app. Men hvilke utfordringer og resultater ga denne teknologien for NTF?

Utfordring

NTF forvaltet allerede apper i Apple App Store og Google Play for Eliteserien, OBOS-ligaen og et par individuelle lag. Men som en organisasjon med mange medlemmer, ønsket NTF at løsningene deres skulle gi verdi for alle fotballklubbene.

De eksisterende appene tilbød videoklipp fra pågående kamper når brukeren var koblet til stadionens trådløse nett, en funksjon som måtte overføres til den kommende PWA-løsningen. Selv om nettstedene var basert på Enonic-plattformen, brukte de eksisterende appene et annet CMS og manglet flere integrasjoner. Dette var verken brukervennlig eller økonomisk fornuftig for klubbene.

PWA-teknologien har vært til stede i årevis, men ett stort hinder har stått i veien for en bred innføring – Apples manglende støtte. Men nylig har det amerikanske teknologiselskapet ombestemt seg og inkludert iOS og macOS, noe som muliggjør implementering på alle de store plattformene.

Men den største utfordringen var å sørge for at alt det redaksjonelle og utviklingsmessige arbeidet lagt ned i den eksisterende plattformen av de forskjellige klubbene, kunne fungere med de nye PWA-ene. Fotballklubbene har brukt årevis på å skape og forvalte innhold, og NTF ga Seeds oppgaven med å utvikle en løsning som både ville være fremtidsrettet og ta hensyn til fortiden – samtidig.

Løsning

En av egenskapene ved progressive webapplikasjoner er hvor sentralisert utviklingen blir. Seeds og tilknyttede utviklere trengte ikke lenger å forholde seg til ulike systemer eller leverandører spesifikke for hver mobilplattform, noe som reduserte utviklingskostnadene og fremskyndet utviklingstiden. Det er heller ikke nødvendig å vente på godkjenning fra appbutikkene.

Oppdateringer gjøres trinnvis. PWA-en sjekker etter endringer i koden, og oppgraderer når det er en ny versjon. Dette gjør PWA-en mye raskere enn vanlige nettsteder, og brukerne er alltid oppdaterte. Dette står i kontrast til tradisjonelle apper, der du må installere nye oppdateringer automatisk eller manuelt.

Når det gjelder selve løsningen, laget Seeds en dobbel velkomstskjerm. Denne løsningen laster først en statisk skjerm med logoen til det lokale laget. Deretter begynner den å laste innhold i bakgrunnen, før den til slutt bytter over til en dynamisk velkomstskjerm med de mer utskiftbare sponsorlogoene – og skaper dermed en kommersiell inngang ved oppstart av appen.

Det finnes også en funksjon som sjekker om brukeren er på stadion eller ikke, for å levere videoklipp i sanntid fra livekampen. I tillegg, når fotballfans logger seg på stadionens WiFi og bruker PWA-en, utløses eventlytterne til et markedsføringsautomatiseringssystem. Dette utløser igjen en push-varsling noen minutter før kampslutt med kupongtilbud.

For å gi en rask app-opplevelse, var caching strengt nødvendig. Seeds eksperimenterte med forhåndslagring og opportunistisk lagring av innhold de statistisk sett visste at brukere vil fordøye under sitt neste besøk. På grunn av begrensninger i nettleser og operativsystem, måtte Seeds balansere mellom hvilket innhold som skulle lagres og ikke. Caching ble derfor typisk brukt på menystrukturen, forsiden, statistikktabellen og kampplanen.

Videre er designet for de mobile sidene basert på klassisk app-estetikk, som naturligvis reflekteres i PWA-ene.

Til slutt brukes Enonic som innholdsplattform – som leverer viktig og svært nødvendig ferskt og tidsriktig innhold i PWA-ene, mens Seeds utnyttet deler av Workbox PWA Starter og Googles egne PWA-verktøy for å bygge den spesifikke progressive webapplikasjonsfunksjonaliteten.