Hvad er Progressive Web Apps?
I denne artikel stiller vi skarpt på de mange fordele ved PWA, samt hvad der adskiller en PWA fra en native app
Hvad er en Progressive Web App (PWA)?
En PWA er en mobilvisning af dit website, som minder om det, vi kender fra en traditionel native app. En PWA har typisk både splash-screen og skrivebords-ikon, som er med til at give en rigtig app-feeling. En PWA gemmes midlertidigt, så du også kan benytte den, når du er off-line og du slipper for at opdatere til nyeste version, fordi PWA'en ikke i udgangspunktet er installeret lokalt på din telefon.
Progressive Web Apps har generelt en god indvirkning på brugerinteraktion og er samtidigt et fornuftigt økonomisk valg. Webshops, administrative systemer, eventsites mm kan med fordel bygges som PWA. Generelt kan man sige, at i alle sammenhænge hvor brugerne har for vane at anvende mobilen til online aktiviteter, er det en god idé at overveje at udvikle sin løsning som PWA.
Hvad er fordelene ved en PWA?
- PWA giver en god brugeroplevelse uden en "tung" installation
- Designmæssigt ligner en PWA en native app
- Potentielt lavere udviklingsomkostninger
- Ingen tunge systemopdateringer ved PWA
- PWA kan installeres og anvendes off-line
- PWA Kan distribueres via url-links
PWA eksempler
Her har vi samlet en række eksempler på Progressive Web Apps anvendt på forskellige typer af webplatforme:
Om Progressive Web Apps
- Fungerer off-line
- Ingen installation
- Behøver ikke publiceres i App Store eller Google Play
- Bedre konvertering end på websites
Hvordan får man adgang til en PWA?
Du får adgang til en PWA via en normal URL (www.domæne.dk) i din mobile browser - helt på samme måde, som hvis du besøger et specifikt website. Et pop-up vindue vil spørge dig, om du vil "tilføje siden til din hjemmeskærm", hvilket i store træk svarer til at installere en traditionel native app.
Efter PWA'en er installeret, kan du se PWA-ikonet på din hjemmeskærm, side om side med dine øvrige apps. Når du starter PWA'en, vises indholdet i fuld skærm og uden browsernavigation i toppen.
Du kan også tilføje din Progressive Web App til forskellige App Stores, hvorfra brugerne kan installere den. Der er mange forskellige App Stores og hvilke, der er relevante for din PWA at 'bo i', beror på indsigt om målgruppens digitale adfærd og device-præferencer.
En mobil App Store strategi er under alle omstændigheder vigtig, hvad enten du udvikler en PWA eller native app. På samme måde som ved traditionel SEO er det nødvendigt at du forholder dig til søgealgoritmer, søgeord, titler og beskrivelser.
Native app eller web app?
Hvis man har økonomien og tålmodigheden til det, kan løsningen være at få udviklet en native IOS eller Android app, men flere og flere indser også problemerne i den tilgang. Det er dyrt, langsommeligt og bureaukratisk at vedligeholde (selv om godkendelsesprocessen i App Store er blevet hurtigere), og kunderne har ofte en naturlig modvilje mod at installere endnu flere apps på deres i forvejen hårdt prøvede home screen.
De fordele, der traditionelt har været at hente på native apps, er efterhånden ved at blive indhentet af de teknologier, som nu kan bringes i anvendelse med en Progressive Web App.
Herunder ser vi nærmere på nogle af kerneegenskaberne, der er med til at skabe rigtig gode brugeroplevelse, der på flere punkter overgår en native app.
Løsningen er lynhurtig og loade med det samme, også når der er dårlig eller slet ingen forbindelse til nettet. Nogle undersøgelser viser, at brugerne vil være tilbøjelige til at forlade en side, der er mere end 3 sekunder om at loade.
Sideskift, scrolls og alle interaktioner i det hele taget opleves gnidningsfrit og uden hak og tøven.
Man kan godt bygge responsive websites, men mange løsninger er stadig bygget med udgangspunkt i en desktop browser. En PWA er skræddersyet til håndholdte enheder uden at gå på kompromis.
PWA’en kan installeres og er tilgængelig både on- og offline. Den kan aktiveres fra din home screen og åbnes med et enkelt klik.
Ja ja, vi ved det godt - det er noget pop og lidt ulødigt, men alligevel:) Det ser lækkert ud med en splash screen når PWA’en åbnes, og gjort rigtigt kan det sætte den helt rigtige forventning hos brugeren.
PWA’en bør indgå i direkte dialog med brugerne. En PWA giver mulighed for push notifikationer, skrivebordsikoner, fuldskærmsvisning uden browserens værktøjslinjer og fungerer offline. En PWA er også en god måde at få 'ikke app brugere' med på bølgen.
Hvordan fungerer en PWA?
Hvad er det så, der får en PWA til fungere offline?
En PWA installerer de nødvendige filer og data på din telefon - præcis på samme måde som en native app.
Nødvendige html- og cssfiler sammen med billeder og vigtige data gemmes i enhedens hukommelse og er altid klar til at blive loaded, om du er på nettet eller ej. Og fordi PWA’en først kigger i de gemte filer bliver performance og loadtider markant forbedret, både for offline og online besøgende.
Dette kan lade sig gøre på grund af brugen af Service Workers, som giver os mulighed for at lave baggrundssynkronisering af data og også tage i mod data fra brugeren, selv når telefonen er offline. De sendes bare videre næste gange telefonen er online igen.
Skal jeg bygge mit næste webprojekt som PWA?
Hos Illumi er vi helt overbevidste om, at denne teknologi vil række mange år ud i fremtiden og blive udviklet yderligere de kommende år.
Vi tager meget gerne en åben og uforpligtende snak med dig om dit web-projekt og byder gerne ind med vores input til, hvordan det kan gribes an, hvilke forhold du skal være særligt opmærksom på, og hvilke forskellige løsningsmodeller vi ser.
Vil du vide mere om Progressive Web Apps og teknologierne bag, har vi samlet et par links, som vi selv har fundet god inspiration i:
Progressive Web Applications (PWA) on iOS 13 & 14(Januar 2021)
What is a PWA and Why should you care?
En Progressive Web App (PWA) er en mobilvisning af et website, der ligner en traditionel native app. En PWA har normalt et splash-screen og et skrivebords-ikon, der giver en app-lignende følelse. Den midlertidige lagring af en PWA giver mulighed for offline brug, og opdateringer er ikke påkrævet, da PWA'en ikke er installeret lokalt på telefonen fra starten af. PWAs har en positiv indvirkning på brugerinteraktion og kan være et økonomisk fornuftigt valg for forskellige typer af websites.
Fordelene ved en PWA inkluderer en god brugeroplevelse uden tung installation, designmæssig lighed med native apps, potentielt lavere udviklingsomkostninger, ingen tunge systemopdateringer, mulighed for offline brug og distribution via URL-links.
En native app kan være en mulighed, hvis man har økonomien og tålmodigheden til det, men der er også udfordringer forbundet med native apps såsom høje omkostninger, langsommelighed og bureaukrati ved vedligeholdelse samt modvilje fra brugere til at installere flere apps på deres hjemmeskærm. Progressive Web Apps har teknologiske egenskaber, der begynder at indhente fordelene ved native apps og kan derfor være et attraktivt alternativ.
En PWA installerer nødvendige filer og data på brugerens telefon på samme måde som en native app. HTML- og CSS-filer, billeder og vigtige data gemmes i enhedens hukommelse og er altid tilgængelige, uanset om brugeren er online eller offline. Ved at bruge Service Workers kan PWA'en udføre baggrundssynkronisering af data og modtage data fra brugeren, selv når telefonen er offline. Data sendes videre, når telefonen er online igen.
Man får adgang til en PWA via en normal URL i den mobile browser. Når man besøger websitet, vises et pop-up vindue, der spørger, om man vil tilføje siden til hjemmeskærmen, hvilket svarer til at installere en traditionel native app. Efter installationen vises PWA-ikonet på hjemmeskærmen ved siden af andre apps. Når PWA'en startes, vises indholdet i fuld skærm uden browsernavigation øverst. Det er også muligt at tilføje en PWA til forskellige app-butikker til brugernes installation.
Relateret indhold
Kulturmødet Mors
Program-app med integration til FestivalPro
For Kulturmødet Mors har vi bygget en Progressive Web App som giver det fulde overblik over alle arrangementer.
Læs mere
Videnstunge websites
Digital formidling af forskning og viden
I denne artikel kommer vi ind på, hvad du som projektleder skal være opmærksom på i processen omkring opbygning af et videns- og forskningsbaseret website.
Læs mere
Sprogversionering
Få en klar strategi for din sprogversionering
Et sprogversioneret website medvirker til bedre konvertering og signalerer, at du driver en global forretning.
Læs mere
Headless CMS
Headless CMS vs. traditionelt CMS
Med headless CMS, kan du hurtigt bringe dit digitale indhold til nye platforme, i takt med din målgruppe får øje på dem.
Læs mere
Yara
Yara får Progressive Web App
Vi har sammen med Yara udviklet et digitalt værktøj til landmænd, der sikrer en ensartet gødskning og et langt bedre høstudbytte.
Læs mere
Umbraco CMS
Få indblik i hvorfor Umbraco er et populært CMS
Læs om sproghåndtering, SEO, webshops og meget mere i Umbraco CMS.
Læs mere
Specialudvikling
De største myter om special- og standardsystemer
Det har de seneste år været en udpræget holdning, at standardsoftware pr. definition er den bedste løsning at gå med.
Læs mere