Hvad er en progressive web app, og hvornår giver det mening?

Hvad er en progressive web app, og hvornår giver det mening?
Foto: ThisIsEngineering / Pexels

Hvad er en progressive web app?

En progressive web app, ofte forkortet PWA, er en hjemmeside, der opfører sig som en mobilapp. Du åbner den i browseren, men brugeren kan installere den på sin telefon, modtage notifikationer og bruge visse funktioner uden internetforbindelse. Alt dette uden at gå igennem App Store eller Google Play.

Teknologien bygger på åbne webstandarder og bruger en kombination af service workers, manifest-filer og moderne browser-API'er til at levere en appoplevelse direkte fra nettet. Det er ikke et nyt framework eller et bestemt programmeringssprog, det er snarere en samling af teknikker, der tilsammen løfter en hjemmeside til noget, der ligner og føles som en rigtig app.

Begrebet kan godt virke diffust, fordi en PWA ikke er én ting, men et sæt egenskaber. En PWA kan sagtens mangle nogle af de klassiske funktioner og stadig kalde sig progressiv, idéen er, at den forbedres gradvist afhængigt af, hvad brugerens enhed og browser understøtter.

Hvad adskiller en PWA fra en almindelig hjemmeside og en native app?

En klassisk hjemmeside lever i browseren og kræver konstant internetforbindelse. En native app er bygget specifikt til iOS eller Android, distribueres via en appbutik og har adgang til enhedens hardware på et dybere niveau. En PWA befinder sig midt imellem disse to.

Sammenlignet med en hjemmeside kan en PWA:

Sammenlignet med en native app er en PWA lettere at vedligeholde, fordi du kun har én kodebase i stedet for to separate apps. Den kræver ingen godkendelse fra Apple eller Google, og opdateringer udruttes øjeblikkeligt til alle brugere. Til gengæld har en native app stadig fordele inden for avanceret hardware-adgang, fx dyb kameraintegration, Bluetooth og visse betalingsflows, som PWA'er endnu ikke kan matche fuldt ud på alle platforme.

Hvis du overvejer at gå fra hjemmeside til app, kan det være værd at læse denne guide til at komme i gang med appudvikling, som gennemgår de overordnede valg du står over for fra starten.

De konkrete fordele ved en progressive web app

Lavere udviklingsomkostninger

En native app kræver i udgangspunktet to separate versioner, én til iOS og én til Android, eller brug af et cross-platform framework som React Native eller Flutter. En PWA er bygget som én webapplikation, der fungerer på tværs af platforme og enheder. Det reducerer både udviklingstid og løbende vedligeholdelse.

Ingen appbutik som mellemled

Appbutikker tager en andel af omsætningen og har godkendelsesprocesser, der kan forsinke opdateringer i dagevis. Med en PWA udgiver du direkte til brugeren via nettet. Det giver dig fuld kontrol over din egen produktcyklus og ingen procentdel til tredjepart.

Bedre ydeevne og hastighed

Service workers cacher indhold lokalt på brugerens enhed. Det betyder, at siden indlæses hurtigt selv ved dårlig forbindelse, og at gentagne besøg er markant hurtigere end ved en traditionel hjemmeside. Hastighed er ikke kun komfort, det påvirker direkte din konverteringsrate og din placering i søgeresultaterne.

Push-notifikationer

PWA'er kan sende notifikationer til brugere, der har givet tilladelse, også selvom de ikke aktivt bruger appen i øjeblikket. Det åbner mulighed for direkte kommunikation, der tidligere kun var forbeholdt native apps.

Lavere friktionsbarriere for brugerne

At bede en bruger om at downloade en app er et stort skridt. Mange dropper det. En PWA kan bruges med det samme fra browseren og kan derefter tilbydes som installation, frivilligt og uden krav. Det sænker barrierne markant og giver dig adgang til en bredere brugergruppe.

Close-up of a smartphone showing Instagram login on a wooden table.
Foto: freestocks.org / Pexels

Hvornår giver en PWA mening, og hvornår gør den ikke?

En PWA er et godt valg, når dit produkt primært er indholdsbaseret eller transaktionelt, og når du vil nå brugere på tværs af platforme uden at skulle vedligeholde flere separate apps. Typiske eksempler er webshops, nyhedsplatforme, bookingsystemer, dashboards og serviceportaler.

Det er derimod ikke nødvendigvis det rigtige valg, hvis dit produkt kræver dyb hardware-integration, fx avanceret AR, kontinuerlig baggrundssynkronisering eller komplekse betalingsflows via Apple Pay i Safari, som stadig har begrænsninger. I de tilfælde kan en native app eller en hybrid-løsning være bedre egnet.

Det er også værd at overveje, om din målgruppe primært bruger iOS. Apple har historisk set haft mere restriktiv PWA-understøttelse i Safari end Android-browserene har haft i Chrome. Situationen forbedres løbende, men det er stadig et reelt parameter at tage med i beslutningen.

Valget af teknologi hænger tæt sammen med valget af backend-arkitektur. Hvis du ikke allerede har taget stilling til det, kan du læse mere om hvordan du vælger den rette backend-teknologi til din app.

Tekniske grundprincipper du bør kende

Service workers

En service worker er et JavaScript-script, der kører i baggrunden uafhængigt af selve siden. Det håndterer caching, offline-funktionalitet og push-notifikationer. Uden en service worker er der ingen PWA. Det er den mekanisme, der giver adgang til mange af de appagtige egenskaber.

Web App Manifest

Manifest-filen er en JSON-fil, der fortæller browseren, hvordan appen skal se ud, når den installeres på en enhed. Her definerer du appens navn, ikon, farver og opstartsadfærd. Det er denne fil, der gør det muligt for brugeren at tilføje appen til sin startskærm og åbne den i fuldskærm.

HTTPS er et krav

PWA-funktioner kræver en sikker forbindelse. Siden skal serveres over HTTPS, uden undtagelse. Det er ikke alene et teknisk krav fra browserproducenterne, det er også god praksis i forhold til brugertillid og søgemaskineoptimering. Hvis din eksisterende hjemmeside ikke kører på HTTPS, er det et sted at begynde.

Undgå at overse de grundlæggende tekniske forudsætninger, det er netop den slags fejl, der kan sinke et projekt unødigt. Læs gerne om de mest almindelige fejl i webudvikling og hvordan du undgår dem.

Close-up of a notebook with wireframe sketches and a smartphone on a wooden desk.
Foto: picjumbo.com / Pexels

PWA og søgemaskineoptimering

En PWA er stadig en hjemmeside og kan crawles og indekseres af søgemaskiner som en hvilken som helst anden side, i modsætning til en native app, der er usynlig for Google. Det betyder, at du beholder alle fordelene ved organisk søgetrafik, mens du samtidig tilbyder en appagtig oplevelse.

Kombineret med hurtig indlæsning, god mobiloptimering og stabil HTTPS-forbindelse har en PWA gode forudsætninger for at klare sig godt i søgeresultaterne. Det er dog vigtigt at understrege, at teknologien alene ikke er nogen garanti, indholdet og den tekniske opsætning skal stadig være i orden.

Hvad koster det at bygge en PWA?

Prisen afhænger af kompleksiteten, de ønskede funktioner og den tekniske baseline du starter fra. En simpel PWA bygget oven på en eksisterende hjemmeside kan være relativt overkommelig at realisere. En fuldt udbygget PWA med offline-support, push-notifikationer og kompleks logik kræver mere arbejde og dermed mere tid.

Generelt er en PWA billigere at udvikle og vedligeholde end to separate native apps, men det er stadig softwareudvikling og bør planlægges med realistiske forventninger til tid og ressourcer. Indhent altid et konkret tilbud baseret på dine specifikke behov, inden du sammenligner løsninger.

Er en PWA det rigtige valg for dig?

En progressive web app er ikke svaret på alle spørgsmål, men den er et stærkt valg for mange produkttyper, særligt når du vil kombinere bred tilgængelighed med en brugeroplevelse, der rækker ud over, hvad en traditionel hjemmeside kan tilbyde. Den eliminerer afhængighed af appbutikker, reducerer vedligeholdelsesomkostninger og giver dig mulighed for at kommunikere direkte med dine brugere.

Hvis du overvejer en PWA og gerne vil drøfte, om det passer til dit konkrete projekt, kan du tage fat i Sahari for en uforpligtende snak om dine muligheder.

Kontakt os