Progressive Web Apps (PWA) — den komplette guiden

Hva er en Progressive Web App og hvorfor er det viktig?

En Progressive Web App er en nettside som bruker moderne web-API-er for å levere en opplevelse som tradisjonelt bare var mulig med native mobilapper. Tenk deg: Ruter-appen som laster ruteinformasjon selv uten internettforbindelse på t-banetunnelen, eller en norsk nettavis der du kan legge til snarveien på hjemskjermen din akkurat som en app. Det er PWA i praksis.

PWA-er løser et reelt problem: brukere er motvillige til å laste ned nye apper (gjennomsnittsbruker laster ned null nye apper per måned ifølge ComScore), men bruker nettet aktivt. PWA-er treffes der brukeren allerede er — i nettleseren — men gir en app-lignende opplevelse med offline-støtte, push-varsler og installasjon.

Service Workers — hjernen i en PWA

En Service Worker er et JavaScript-skript som kjøres i bakgrunnen, uavhengig av nettsiden. Det kan fange opp nettverksforespørsler (og svare fra cache), motta push-varsler, og synkronisere data i bakgrunnen. Service Workers er grunnpilaren i PWA-teknologien.

For å registrere en Service Worker i din webapp, legg til i `main.js`: `if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js") }`. Service Worker-filen `sw.js` inneholder cachingstrategiene. En enkel "cache first"-strategi: i `install`-eventet forhåndcacher du kritiske ressurser (HTML, CSS, JS). I `fetch`-eventet sjekker du cachen først og faller tilbake til nettverket om ikke funnet. Workbox-biblioteket fra Google abstraher dette og tilbyr ferdig-konfigurerte strategier.

Web App Manifest — app-identiteten din

Web App Manifest er en JSON-fil (`manifest.json` eller `manifest.webmanifest`) som forteller nettleseren metadata om appen din: navn, kortform av navn for hjemskjerm-ikon, ikonene selv (i ulike størrelser), bakgrunnsfargen på splash-skjermen og "display mode". Displaymodus `standalone` gjør at appen kjøres uten nettleserens URL-bar — som en native app. Modus `fullscreen` bruker hele skjermen. Koble manifesten til HTML med: `<link rel="manifest" href="/manifest.json">`. Når nettleseren oppdager manifest + Service Worker + HTTPS, tilbyr den automatisk "Legg til på startskjermen".

• name — fullt appnavn vist ved installasjon
• short_name — kortere navn for hjemskjerm-ikon (maks ~12 tegn)
• icons — array med ikonobjekter i størrelsene 192×192 og 512×512 minimum
• start_url — hvilken URL som åpnes ved app-lansering (typisk "/")
• display — "standalone", "fullscreen", "minimal-ui" eller "browser"
• background_color — farge på splash-skjerm under lasting
• theme_color — fargen på nettleserens statuslinje

Offline-støtte og cachingstrategier

Det finnes flere cachingstrategier, og riktig valg avhenger av innholdstypen. Cache First er best for statiske ressurser (bilder, fonter, CSS) som sjelden endres — respons er lynrask. Network First er best for API-data og HTML der ferskhet er viktig — henter fra nett og faller tilbake til cache ved feil. Stale While Revalidate er mellomveien: bruk cache umiddelbart (rask opplevelse) og oppdater cachen i bakgrunnen fra nettverket.

For et norsk nettsted med artikkelinnhold vil en typisk strategi være: Cache First for alle statiske ressurser (bilder, fonter, app-shell JS/CSS), Network First for API-kall til artikkeldata, og Precaching av app-shell (HTML og JS som aldri endres mellom besøk). Med dette oppsettet laster siden i løpet av millisekunder på gjentatte besøk, og artiklene som ble besøkt sist er tilgjengelige offline.

Push-varsler og bakgrunnssynkronisering

Push-varsler via Service Workers gjør at du kan nå brukere selv når de ikke er inne på nettstedet ditt. Flyten er: brukeren godkjenner push-varsler (nettleseren spør), du lagrer "push subscription"-objektet på serveren, og når du vil sende et varsel kaller du Push API fra serveren som vekker Service Workeren på brukerens enhet, som så viser varselet via Notifications API.

Viktig: push-varsler på iOS har siden iOS 16.4 fungert for PWA-er som er installert på hjemskjermen. Safari på desktop og iOS er nå vesentlig bedre på PWA-støtte enn det var i 2020–2022. Background Sync API lar Service Workeren utsette nettverkskall til nettverksforbindelsen er tilgjengelig — nyttig for offline-skjemaer der brukeren fyller ut og sender, men telefonen er offline.

Lighthouse PWA-score og norske eksempler

Lighthouse er Googles innebygde revisjonsverktøy i Chrome DevTools som scorer nettsteder på ytelse, tilgjengelighet, SEO og PWA-kriterier. For full PWA-score i Lighthouse kreves: HTTPS, registrert Service Worker, gyldig Web App Manifest med korrekte ikonst størrelser, "start_url" som svarer offline, og `<meta name="viewport">`. Du kjører Lighthouse via DevTools → Lighthouse-fanen.

Norske eksempler på PWA-er: TV 2 sin nettavis har PWA-støtte med offline caching av nylig leste artikler. Ruter-appen har en web-versjon med noe offline-støtte. For norske utviklere som bygger interne bedriftsverktøy er PWA et utmerket alternativ til native mobilapper — spesielt nå som iOS har bedret støtten. Et internt bestillingssystem installert på hjemskjermen til en norsk logistikksjåfør er et typisk vinnende bruksscenario.