En progressiv web applikasjon (PWA) er en web app som utnytter de nyeste og mest moderne webfunksjonene for å levere en app-lignende opplevelse, pakket inn i en vanlig nettside.

Det er ikke uvanlig å høre noen fortelle om en idé de har til en app. Dessverre er realiteten at vi bruker færre apper enn før, og terskelen blir høyere for å laste ned en ny.

Web apps har derfor blitt et godt alternativ til enkelte digitale tjenester. Det kan bety flere brukere, og mindre kostnader.

Noen kjente web apps inkluderer Twitter for mobil, Washington Post og Flipboard.

eksempler på progressive web apps inkluderer twitter for mobil, washington post og flipboard.

Disse applikasjonene trenger å møte spesielle krav:

Progressive – Fungerer for alle brukere, uavhengig av nettleser
Responsive – Passer alle enhetsformer; Pcer, mobiler og nettbrett
Nettverksuavhengige – Takket være en ‘service worker’ funger de på alle nettverkshastigheter
App-lignende – Føles som en applikasjon, takket være ‘applikasjons-shell’-strukturen
Ferske – Holder seg up-to-date takket være ‘service worker’ sin oppdateringsprossess
Trygge – En PWA skal hostes fra HTTPS, som sørger for at tilkoblingen er trygg
Oppdaglige – Applikasjonens komponenter sørger for at den plukkes opp av søkemotorer
Engasjerende – Holder engasjementet til brukeren oppe gjennom bla. annet push notifikasjoner
Installerbare – Tillater brukere å legge apper de liker på hjemskjermen uten en appbutikk
Linkbare – Enkle å dele via en URL, som en tradisjonell nettside

Når disse kravene er møtt vil nettleseren identifisere nettsiden som en progressiv web app, og  behandle den deretter. I tillegg til disse er det derimot flere komponenter som trengs for å oppnå en velfungerende PWA, la oss ta en nærmere titt på disse.

Hvordan bygges en PWA?

Google legger vekt på lav lastetid på nettsiden

Hvordan er en PWA bygget opp?
Progressive web apps må som tidligere nevnt oppfylle en rekke krav, og forholder seg til flere prinsipper som alle er viktige for at de skal bli riktig identifisert i brukerens nettleser.

Service worker
Nøyaktig hva en service worker er kan være litt vanskelig å forstå, men kort sagt kan man si det er et script som ligger seperat fra nettsiden, og kjører i bakgrunn.

Dette scriptet gir en programmatisk måte å cache nettsideinnhold på, som gir en ekstremt høy økning i ytelse for brukere som kommer tilbake til din applikasjon. Dette vil blant annet gi brukere muligheten til å åpne web appen like fort uavhengig av trege nettverk, og til og med om nettverk er utilgjengelig.

Applikasjons-shell
Et applikasjons-shell er ikke et rammeverk eller API, men et designkonsept utviklere kan velge å utnytte ved utviklingen. Selve applikasjonskallet består av overfladige deler av UI-en, og inneholder ingen informasjon. Disse kan ses på som for eksempel tomme <div>-elementer. Innholdet blir lastet inn dynamisk med JavaScript når det er klart.

Denne cachingen av applikasjonsskallet er en av måtene en PWA opprettholder sin høye ytelse fra trege nett.

Web app manifest
Manifestfilen til en web app er en relativt enkel JSON-fil som gir deg som utvikler muligheten til å kontrollere hvordan din applikasjon blir presentert for brukeren. Dette gjelder blant annet å kjøre appen i fullskjerm, gir kontroll over skjermrotasjon og definerer et sett med ikoner for bruk på hjemskjerm.

Progressive web apps åpner opp for nye muligheter for både nye og erfarne web-utviklere, og er et spennende nytt felt innenfor mobilutvikling. De forskjellige prinsippene og komponentene i en PWA lar alle utviklere skape appopplevelser uten kjennskap til native-utvikling.

Vi har tidligere skrevet om Ionic som et hybridapp-rammeverk, og de har nå også begynt å fokusere på utvikling mot progressive web applikasjoner. Deres rammeverk lar nå utviklere distribuere applikasjoner til både app-butikker og det mobile nett med en og samme kode.

Har du flere spørsmål?

Vi i Kult Byrå har bred erfaring rundt å bygge web apps for ulike formål. Ta gjerne kontakt om du har noen flere spørsmål – det er alltid kult å komme i prat.

Tommy

Tommy Sevaldsen

tommy@kult.design

Tegner og designer – men først og fremst nerd
på intelligente systemer.

Kult Byrå logo

Vi er her for å gi deg råd om teknologi og digital markedsføring. Kontakt oss gjerne hvis du har spørsmål.

Kaffe?Te?

Imponér kundene dine med en kul nettside

Vi leverer høy kvalitet til kul pris. Se våre tilbud.
Les mer