Progressive Web Apps (PWA) – hva er det, og hvorfor trenger du det?

Illustrasjon: Adobe Stock

I dag gjøres «alt” på mobiltelefoner. Faktisk kommer over 50% av all trafikk på nett fra mobiler i dag. Brukeropplevelsen på mobil bør derfor prioriteres skyhøyt ved å sørge for raske, responsive og mobiltilpassede nettsider. Men hvordan velger man egentlig hva man skal satse på i appverdenen? Skal man velge verktøy tilpasset det ene eller det andre operativsystemet, eller kanskje begge deler? Veien til fullverdige mobilapplikasjoner kan for mange bli en lang og kostbar affære som ikke står i stil med nytteverdien. Heldigvis finnes det et alternativ. Du har kanskje hørt om Progressive Web Apps (PWA), men hva er det egentlig, og hvilke muligheter og verdi kan det gi? 

Hva er Progressive Web Apps?

Progressive Web Apps (PWA) er en universal løsning for nettbaserte applikasjoner som fungerer uavhengig av operativsystem, enheter og nettlesere. PWA-er kjøres via nettleseren på en telefon, et nettbrett eller en datamaskin. De kan lastes ned som et ikon til hjemskjermen og nås fra hvilken som helst nettleser. Det trengs ingen nedlastninger fra “app stores”, og for sluttbrukeren både ser det ut og fungerer på tilnærmet samme måte som vanlige apper. Det har blitt mer og mer populært de siste årene. Det er en fleksibel løsning som har mange fordeler, både for selskaper og sluttbrukere. I mange tilfeller er det en vinn-vinn situasjon! 

Veien mot dagens PWA kan spores helt tilbake til den første iPhonen som ble lansert i 2007. Den gang eksisterte det ingen App Store, og Steve Jobs selv annonserte at nettløsninger var formatet som skulle brukes på deres telefoner. Utfordringene på den tiden var blant annet lav hastighet og begrenset responsivt design for små skjermer. Senere kom både App Store og Google Play Store, og «vanlige apper» var i mange år normalen og trenden for hvordan vi brukte tjenester på telefonene våre. Etter hvert som teknologien utviklet seg, og internettforbindelsene ble raskere, rimeligere og lettere tilgjengelig, har nettløsninger imidlertid blitt noe helt annet. De senere årene har spesielt Google og Microsoft vært pådrivere for å ta i bruk og videreutvikle PWA. Begrepet ble introdusert i 2015, og de prøver nå å bringe brukere litt bort fra appverdenen med app stores og tilbake til nettet gjennom PWA. 

Hvilke fordeler og muligheter gir PWA?

De fem viktigste fordelene er: 

• Lavere utviklingskostnader 
• Redusert kompleksitet 
• Bedre ytelse 
• Plattformuavhengighet
• Enklere vedlikehold

I tillegg til disse fordelene kan PWA forsterke brukernes tilhørighet til tjenesten ved hjelp av eget ikon og push-varslinger på brukernes hjemskjerm. På den måten kan PWA-er oppleves tilnærmet likt som vanlige apper. PWA-er kan utvikles på kortere tid og med færre ressurser. De kan laste og kjøres raskere, brukes både offline og ved treg internettforbindelse, og er helt uavhengig av enheter og plattform. Alt man trenger er en nettleser. PWA-er vil i mange tilfeller også dele kodebase med et eksisterende nettsted, noe som reduserer kompleksiteten og gjør utvikling, videreutvikling og vedlikehold enklere og mindre kostbart. Vanlige mobilapper må utvikles og vedlikeholdes som egne kodeløsninger, ofte flere løsninger dedikert til ulike operativsystemer. Det krever store ressurser. I tillegg må sluttbrukerne selv sørge for å holde appene sine oppdatert. PWA er derfor et godt alternativ som forenkler for alle.

Et konkret eksempel på forbedret ytelse er housing.com, som rapporterte om 38% flere konverteringer og i snitt 30% raskere sidelasting etter at de valgte å tilby PWA. Et annet eksempel er Uber som utviklet en “Uber-light” PWA på kun 50kB(!), målrettet for brukere med dårlig internettforbindelse. På den måten kunne flere bruke Uber når de hadde behov. 

Vår erfaring med PWA

Tidligere i år gjennomførte vi i Egde et PWA-prosjekt for NorgesEnergi. De ønsket å leve opp til kundenes forventinger om en enkel, rask og effektiv app, men ønsket ikke å bruke mye tid og ressurser på å utvikle apper for ulike plattformer. De hadde behov for en raskere og enklere løsning. I kombinasjon med et ønske om å ikke måtte skalere vedlikehold- og videreutviklingskostnader, og det at de allerede hadde et velutviklet nettsted, konkluderte vi sammen om at PWA var den beste løsningen. En av de største motivasjonene de hadde var muligheten for å øke nærheten til kundene sine – blant annet gjennom en fast plass med sitt eget ikon på brukernes hjemskjermer. 

I NorgesEnergi sitt tilfelle omfatter PWA-en kun én del av nettsiden, “Min side”. Om man allerede har et nettsted, er det nemlig ikke mange grep som må tas for å også kunne tilby den som en PWA. Det er ikke nødvendig å lage PWA-er helt fra bunnen av. Den fremgangsmåten brukte vi i dette prosjektet. Hvor omfattende en slik prosess er, avhenger av hvor mye ekstra funksjonalitet som skal legges til og hvor mye som skal tilpasses til PWA-en sammenlignet med mobilversjonen av nettstedet. Har man et nettsted som er responsivt og godt mobiltilpasset, vil prosessen med å utvikle PWA være enklere. Vi justerte eksisterende kode og la til ny kode for å oppfylle de nødvendige kravene for at denne delen av nettstedet også kunne bli tilgjengelig som PWA. Ved å legge til en “service-worker” og et såkalt webapp-manifest, blir det mulig at et nettsted, eller en del av et nettsted, kan bli en PWA. Et slikt manifest inneholder blant annet ikon, navnet på appen, URL, konfigurasjonsdata og andre regler for utseende, brukeropplevelse og hvordan man skal “promotere” appen slik at brukerne vil laste den ned. Appen kan lasted ned direkte til enhetene, og brukerne kan bruke den slik de er vant til å bruke andre apper. I NorgesEnergi sin PWA innebar dette blant annet å konfigurere hvilken informasjon og instrukser brukerne får – basert på hvilken telefon og nettleser de bruker. 

NorgesEnergi selv sier følgende om prosjektet:

«Våren 2020 lanserte NorgesEnergi en PWA med god utviklerhjelp fra Egde. Bakgrunnen for utvikling av appen var et ønske om å gi kundene våre en enkel tilgang til relevant data og innhold. Det var også en tidsfaktor med i bildet, vi ønsket å få ut en app raskt, og Egde fikk PWA-en lanseringsklar i løpet av noen få uker.

Med appen lansert og tilgjengelig for kundene jobber vi nå med optimalisering av PWA-en. Gjennom brukertesting og innsikt om brukeradferd vil NorgesEnergi-appen være i kontinuerlig utvikling. Og her ser vi også en av fordelene med en progressiv web app: vi gjør oppdateringer ett sted (i ett CMS), og endringen blir synlig både på Min side og i PWA-en. Dette er en løsning som både er ressurs- og tidsbesparende, samtidig som vi har mulighet til å gjøre tilpasninger kun for PWA-en slik at den gir en god app-opplevelse for kundene våre.»

Kort oppsummert

Hvordan kan du vite om PWA er noe for deg og din virksomhet? Hvorfor og når bør man velge det fremfor «vanlige» apper? Det finnes ikke noe klart svar. Det vil, som så mye annet, avhenge av behov, mål og ressurser. 

• Har du en nettside som er tilpasset mobil?  
• Dekker nettsiden de fleste funksjonelle kravene du ville hatt i en app?
• Har du ikke behov for App Store eller Google Play Store, eller spesielle funksjoner fra telefonen? 

Da kan PWA være veien å gå for deg. Det vil kunne gi lavere utviklingskostnader og spare mye tid. Det kan også være en effektiv måling av interessem brukere har for en app. Vi har listet opp noen av fordelene og ulempene med PWA sammenlignet med “vanlige apper”:

Fordeler PWA vs. vanlig app 

• Lavere utviklingskostnad 
• Redusert kompleksitet 
• Bedre ytelse 
• Plattformuavhengighet 
• Enklere vedlikehold 
• Mulighet for pushvarslinger 
• Mulighet for eget ikon på hjemskjermen 
• Bredere tilgang på rett kompetanse innen teknologiene som benyttes 
• Oppdateringer krever ikke ny nedlasting (ingen godkjenningsprosess i App Store og Google Play Store er nødvendig)
  

Ulemper PWA vs. vanlig app 

• Færre funksjoner 
• Noe lavere ytelse ved mer avanserte kalkulasjoner og grafikk 
• Begrensede push-varslinger, spesielt for iOS 
• Ikke tilgjengelig i app stores
• Noen begrensninger på tilgang på funksjoner fra telefonen (f.eks. Bluetooth, NFC, enhetsminne)

Vi hjalp NorgesEnergi med å utvikle en PWA som gjorde at de kunne få en egen plass på sine brukerers hjemskjerm, i tillegg til å tilby en enklere og raskere brukeropplevelse – uten at de måtte tillegge seg økte kostnader for utvikling og vedlikehold. Vi la også til rette for å utvide funksjonalitetene senere, som for eksempel push–varslinger, caching og PWA-spesifikk visning av innhold. Her er det mange muligheter i fremtiden.

Er du nysgjerrig på PWA og vil vite mer? Kontakt gjerne oss i Egde Consulting for en hyggelig prat!