Illumi PWA.jpg

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 cashes, 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.

Sådan fungerer det

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.

Er en native IOS eller Andriod app svaret?

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 webapp, eller ”progressive web app” som PWA dækker over. 

Om Progressive Web Apps

  • Fungerer off-line
  • Ingen installation
  • Behøver ikke publiceres i App Store eller Google Play
  • Bedre konvertering end på websites

Hvad er fordelene ved en PWA?

PWA er en attraktiv løsning, og i dette afsnit 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.

Pålidelighed

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 er mere end 3 sekunder om at loade.

Hurtighed

Sideskift, scrolls og alle interaktioner i det hele taget opleves gnidningsfrit og uden hak og tøven.

Responsiv

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.

Installation

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.

Splash Screen

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.

brugerengagement

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.

Herudover kan man pege på:

  • Hurtig at udvikle og dermed lavere omkostninger
  • Ingen afhængighed af mellemmænd i form af Google Play eller App Store
  • Kan deles via almindelige URL-link
  • Kan anvendes af brugeren, på alle browsere på alle platforme

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 loadet, 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?

I langt de fleste tilfælde vil det kun være en fordel at bygge sin nye løsningen som PWA, og 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 app-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:

What is a PWA and Why should you care?

Progressive web apps vs. native apps?

What is progressive web apps?

What is Service Workers?

Relateret indhold