Vad är en Progressive Web App (PWA)?

Jag har i tidigare artiklar beskrivit hur webben evolverat från MPA (multi-page app) med AJAX till SPA (single-page app). Vidare, hur bristen på SEO (search engine optimization) i SPA resulterat i SSR (server-side rendering) respektive BGP (build generated pages) i kombination med hydrering.

Progressive Web App (PWA)

Det finns emellertid ytterligare en teknisk aspekt av modern webb-arkitektur att beakta vid design av ett nytt eller moderniserat webbsystem, och det är PWA som står för Progressive Web App.

PWA är ortogonalt mot MPA/SPA. Eller för att uttrycka sig lite mer begripligt :) så kan en PWA vara baserad på såväl en SPA som en MPA, även om det tenderar vara SPA.

Service Worker (SW)

Den centrala tekniska komponenten i en PWA är en Service Worker (SW) och utgörs av JS som exekverar i en separat bakgrundstråd (bg thread). En av de primära uppgifterna för en SW är att filtrera (intercept) alla nätverksanrop, vilket medger smart och adaptiv caching samt pre-caching. Det innebär att en PWA via sin SW kan fås att fungera även när internet anslutning saknas, såsom vid flight-mode eller tunnelåkning.

Att implementera caching i en SW på egen hand kan vara lite pyssligt, så många använder det populära biblioteket Workbox, som hjälper till med att definiera grupper av asset-filer och server-anrop samt strategier för hur dessa ska cachas, såsom rendera cachad data men uppdatera i bakgrunden eller hämta färsk data men cacha också.

Push meddelanden

En startad SW är aktiv även när webbsidan den tillhör inte visas. Faktum är att det gäller även när webbläsaren inte ens är igång, förutom med en tillhörande bakgrund service.

Detta innebär att en SW kan ta emot push meddelanden som skickats från den avsändare PWA:n kommer ifrån. Då en SW tar emot ett push meddelande skapar den först en notifiering, vilken syns i kanten på OS skrivbordet eller överst för en smartphone. När användaren klickar på notisen, så visas PWA sidan i webbläsaren och SW kan utföra diverse uppdateringar, såsom att hämta nyheter, matchresultat, budgivningslista med mera.

Installerbarhet

En annan aspekt av en PWA är att den kan installeras och framstå för användaren som att det är en app bland andra. Det här fungerar på både smartphones (Android/iPhone) och skrivbordsdatorer (PC/Mac/Linux).

Manifest

Förutom JS koden till SW, som laddas in via skript-funktionen navigator.serviceWorker.register(), behövs också en konfigurationsfil i JSON format, vilken laddas via en link-tag:

<link rel="manifest" href="manifest.json">

Manifest-filen innehåller metadata om app:en, såsom namn, beskrivning, start-url, visningsformat med mera. Dessutom, innehåller den en lista på app ikoner för olika plattformar och skärmupplösningar.