Noe bemerkelsesverdig skjedde på vei til app-butikkene: nettleseren lærte stille å bli et operativsystem.

I 2025 kan en Progressive Web App installeres, kjøre offline, sende push-varsler (selv på iOS), fange lenker og filer, vise varselbadge på ikonet og sitte i oppgavebytteren din som enhver annen app—mens den fortsatt deployeres som en mappe med statiske filer bak en CDN.

Dette er en meningssterk feltguide til PWA-er akkurat nå—hva som er ekte, hva som fortsatt svir, og hvor det gir mening å erstatte (eller komplementere) native og tunge SPA-rammeverk.

---

Hva er egentlig en PWA i 2025?

En PWA er bare et nettsted med tre ekstra ingredienser:

  1. HTTPS (obligatorisk for service workers).
  2. Et Web App Manifest (manifest.webmanifest) som beskriver navn, ikoner, start-URL og vindusmodus (f.eks. display: "standalone").
  3. En Service Worker som gir deg offline-caching, forespørselsavskjæring, bakgrunnsoppgaver og push-infrastruktur.

Når disse er på plass og kjøretiden anser appen som "installerbar," tilbyr nettleseren en installasjonsflate og OS-et behandler den som et app-vindu.

På Windows omfavner Microsoft aktivt PWA-er—native vinduschrome, butikkinnsending, widgets, app-handlinger. På Android kan du pakke en PWA som en Play Store-app via Trusted Web Activity (TWA). På iOS installeres PWA-er fra Safari og—etter fjorårets DMA-krangel—forblir støttet.

---

Hvor PWA-er skinner (og hvor de ikke gjør det)

Styrker du kan stole på

  • Installerbarhet uten portvakter. Brukere kan legge til på hjemmeskjerm/skrivebord umiddelbart.
  • Offline-først UX med øyeblikkelige innlastinger. Service workers muliggjør cache-then-network-strategier.
  • Push på alle store plattformer. iOS la til Web Push for installerte webapper i iOS 16.4.
  • OS-integrasjon fortsetter å vokse. App-badges, snarveier, widgets, lenkefangst.
  • Bevist forretningseffekt. Twitter Lite, Starbucks, Uber viste engasjementsgevinster.

Begrensninger du må designe rundt

  • Safari-mangler og retningslinjer. Background Sync støttes ikke på Safari; noen API-er er kun Chromium.
  • Lagring er kvotestyrt og kan slettes. Behandle nettleserlagring som en cache.
  • Ingen iOS App Store-oppføring som PWA. Windows og Play Store er vennligere.
  • Push- og varslingstretthet. Chrome deaktiverer nå ignorerte varsler automatisk.

---

PWA + HTMX-mønsteret

Den kombinasjonen fungerer elegant:

  • HTMX håndterer interaktivitet ved å bytte server-rendret fragmenter.
  • Service worker avlytter disse fragmentforespørslene, serverer cachede svar umiddelbart offline.
  • Resultat: du beholder enkelheten, SEO-en og tilgjengeligheten til server-rendret HTML, men med app-lignende hastighet og motstandsdyktighet.

---

Arkitektur du kan levere dette kvartalet

Tenk i lag:

  1. Origin-kontrakt: forutsigbare URL-er for dokumenter og fragmenter.
  2. Caching-policy: pre-cache app-shell; runtime-cache HTML, JSON og media.
  3. Revalidering: ETag/Last-Modified og SWR for å holde innhold ferskt.
  4. Motstandsdyktighet: idempotente skrivinger, synkroniseringskøer.
  5. Utvidede muligheter: push, badging, fil- og URL-håndtering.

Minimalt Manifest

{
  "name": "Acme Reader",
  "short_name": "Acme",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "background_color": "#0b0b0c",
  "theme_color": "#0b0b0c",
  "icons": [
    {"src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png"},
    {"src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png"}
  ]
}

Service Worker: Workbox i tre ruter

// sw.js
import {precacheAndRoute} from 'workbox-precaching';
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate, NetworkFirst, CacheFirst} from 'workbox-strategies';


precacheAndRoute(self.__WB_MANIFEST || []);



// 1) HTML-dokumenter: rask første paint, så oppdater stille.
registerRoute(
  ({request}) => request.destination === 'document',
  new NetworkFirst({ cacheName: 'html', networkTimeoutSeconds: 3 })
);



// 2) HTMX/JSON-fragmenter: stale-while-revalidate holder UI rask.
registerRoute(
  ({request, url}) =>
    request.destination === '' &&
    (url.pathname.startsWith('/fragment/') || url.pathname.endsWith('.json')),
  new StaleWhileRevalidate({ cacheName: 'data' })
);



// 3) Statiske assets: cache-first.
registerRoute(
  ({request}) => ['style','script','font','image'].includes(request.destination),
  new CacheFirst({ cacheName: 'assets' })
);

---

Hvor du deployerer PWA-er

  • Det åpne nettet (alltid).
  • Microsoft Store: ett-klikks pakking via PWABuilder.
  • Google Play: pakk med TWA (Bubblewrap CLI).

---

Kvalitetsterskel: Hva "bra" ser ut som

  • Installerbar: Gyldig manifest + SW; ekte ikoner; display: standalone.
  • Vitals: LCP, INP, CLS i grønt.
  • Motstandsdyktighet: offline UX for kjernereiser.
  • Ressurshygiene: versjonerte URL-er for assets; SW cache-opprydding ved aktivering.

---

Praktiske "ikke gjør" som sparer måneder

  • Ikke pre-cache verden. Pre-cache shell og kritiske stier; la runtime-caching lære resten.
  • Ikke stol på nettleserlagring med kanonisk tilstand. Behandle det som en cache.
  • Ikke overdriv push-varsler. Chrome deaktiverer bokstavelig talt ignorerte varsler nå.
  • Ikke anta at bakgrunnsoppgaver eksisterer. Safari-brukere er også mennesker.

---

Når velge en PWA over native eller tung SPA

Velg PWA for:
  • Innholdstunge apper (nyheter, dokumenter, referanse, læring) hvor offline og rask navigasjon betyr mer enn dype enhets-API-er.
  • Transaksjonelle apper med enkle periferier (skjemaer, utsjekking, planlegging).
  • Felt- og interne verktøy hvor Windows og Android dominerer.
Kanskje ikke:
  • Dypt sensorintensive apper, lav-latens Bluetooth eller bakgrunns-geofencing.

---

2025 virkelighetssjekk

  • PWA-er er førsteklasses på Windows og Android (butikkpakking, OS-overflater).
  • På iOS er de brukbare og nyttige, med push og installasjon—men fortsatt begrenset av WebKits bakgrunns- og API-retningslinjer.
  • Kapabilitetsoverflaten fortsetter å vokse (badging, fil/URL-handlere, widgets).

Og ja, dette passer vakkert med en HTMX-tankegang: jo mindre rammeverk du sender, jo mer kan nettverket og nettleseren hjelpe deg.

---

Avslutning

I 2025 er en PWA en applikasjon du kan se kildekoden på. Den er installerbar, motstandsdyktig og respektfull overfor brukerens enhet og oppmerksomhet. Den spiller godt med server-rendret HTML (HTMX), og den arver global distribusjon og SEO fra det åpne nettet.

Nettleseren ble din plattformuavhengige kjøretid. Du trengte ikke spørre om tillatelse.

Nå er oppgaven å designe som om den friheten betyr noe.