Er PWA den rigtige app for dig?

Skrevet af

Mathias Piletti
Udvikler

Vi har lavet en PWA demo til at demonstrere grundprincipperne i en Progresse Web App, så du med fingrene kan fornemme, hvordan den “føles”.

Progressive Web Apps (PWA) har de senere år fyldt rigtigt meget på de tekniske nyhedsmedier, sociale platforme og blandt prominente aktører. Omtalen er oftest blevet præsenteret i yderst positive vendinger såsom “fremtidens hjemmesider” og “døden for native apps”. Her hos Reload har vi anskuet det som en spændende teknologi, og har i senere tid dykket ned i hvilket muligheder og begrænsninger en PWA udstiller for at kunne danne os et nuanceret billede, der kortlægger dens egenskaber.

I den her artikel vil jeg dykke lidt ned i, hvad en PWA er, hvilke fordele og ulemper der er og kort søge at besvare, hvorvidt du skal overveje at udvikle en PWA eller ej. Hvis du (efter at have læst min artikel her) synes emnet er interessant og gerne vil vide mere om PWA, og hvordan den er sammenlignet med Capacitor og React Native, så har vi lavet en livestream, du kan se her!

Men hvad er en PWA, egentlig?

PWA kan betegnes som en web app. Det vil sige en regulær hjemmeside, der tilbyder udvidet funktionaliteter gennem moderne web-funktioner såsom push-notifikationer, offline support og ekstraordinær performance.

Det er altså ren web-teknologi, men som giver en oplevelse af at være en rigtig app på din smartphone. Der er en række teknologier og tilgange som ligger i spektret mellem web-teknologi og rendyrkede "native apps". Det kan du læse mere om her.

Men PWA-tilgangen har en række helt unikke fordele (samt ulemper), og dem kan du læse om nedenfor...

Google er en af de primære støtter og frontløbere bag PWA teknologien. De beskriver det som en webside, der giver en brugeroplevelse som er ‘reliable’, ‘fast’ og ‘engaging’. Denne beskrivelse kan virke vag og ukonkret, hvorfor forvirring over tid er opstået. For hvad betyder de her termer egentlig?

Så lad os dissekere, hvad der reelt menes med ovenstående ord. 

1. Pålidelighed (reliable): Web appen skal være pålidelig og med dette menes der, at siden skal kunne tilgås uafhængig af netværk og internetforbindelse. For at kunne efterleve dette forudsætter det, at appen supporterer offline support, og at brugeren kan tilgå appen gennem et genvejsikon på telefonens hjemmeskærm. Dette er på mange måde ret revolutionerende, idet en hjemmeside normalt forbindes med noget, som brugeren kun kan tilgå ved, at aktivt navigere til hjemmesiden gennem adressebaren, og hvor sidens session eller levetid kun eksisterer imens browseren er åben. Ved at man introducerer ideen om at man kan tilgå web appen fra et ikon på telefonens homescreen, og at appen lever videre efter lukning af vinduet, introducerer det nogle helt nye navigations-mønstre og muligheder.

3. Hastighed (fast): Med hastighed refererer man først og fremmest til indlæsningen (loading) af forside og den efterfølgende navigering mellem undersiderne. Parametre såsom ‘first meaningful paint’, ‘speed index’ og ‘time to interactive’ er alle yderst kritiske på en klassisk hjemmeside - men også i app verden! Det godt underbygget, at disse er direkte forbundet med fastholdelse af besøgende, brugeroplevelse og konverteringer.

   Udover den hurtige navigation, bliver der med hastighed også refereret til selve brugerinteraktionen i web appen.  Dette er ofte noget man forbinder med native apps, hvor scrolling er helt flydende, ingen hoppende indlæsning af elementer og fremragende touch interaktion. Afhængig af hvorledes dette er skruet sammen, vil det have en stor indflydelse på den opfattede brugeroplevelse. 
    

4. Engagerende (engaging): At en web app virker engagerende skal forstås i den forstand, at den inviterer de besøgende til en fordybet brugerrejse, ved at justere indstillinger såsom skærm orientering, fuldskærmsvisning, tema farver, splash skærm med mere. Dette kombineret med home screen og push notifikationer, giver den besøgende flere forskellige veje tilbage ind i appen, hvorpå man kan genoptage sin tidligere færden, eller rette opmærksomheden hen imod noget nyt.

Hvilke fordele er der ved en PWA? 

Afhængig af opgave og forretningsbehov kan der være stor forskel på, hvorvidt PWA er det rigtige valg for dit projekt. Som udgangspunkt kan en PWA være særlig relevant, hvis du i forvejen har en klassisk webside, der i forvejen understøtter et responsivt mobil design, og ikke har mange ønsker om native funktionaliteter. Dette dækker særligt over push-notifikationer, synlighed gennem app storen, m.m. 

Listen over fordele og ulemper er talrige, men vi har forsøgt at plukke de mest nævneværdige punkter herunder:

• Konvertering

  Konvertering fra en webside til en PWA, er, ud fra et teknisk synspunkt, en relativ beskeden opgave. Dette betyder, at du kan udvikle videre på den eksisterende løsning og genbruge den kodebase, der allerede er udarbejdet.

• Kompatibilitet

  Kompatibilitet på tværs af enheder er et af de bedste incitamenter for at udvikle en PWA. Da browseren kan køre på en bred vifte af enheder, har du mulighed for at distribuere din web app ud imod størstedelen af alle enheder.

• Pris

  Prisen for en PWA er betydelig billigere end en tilsvarende native app, og det samme gør sig gældende for vedligeholdelse, overlevering og videreudvikling.

• Økosystem

  Ecosystem og mulighederne af teknologivalg er mangfoldige, hvilket tilføjer de samme muligheder til en PWA. Mange af pakker der findes i open source miljøet kan frit anvendes.

Et par ulemper ved PWA'er...

Mens fordelen ved at lave en PWA er attraktive, så er der midlertidigt et par ulemper, du skal overveje, før du begynder at udvikle en PWA.

De fleste ulemper som er relateret til en PWA, er de begrænsninger som allerede eksisterer i Safari browseren. Ifølge Apples App Store politik angiver de at alle browser på iOS skal anvende Safari’s ‘Rendering Engine’, hvilket grundlæggende betyder at alle browsere på iOS vil være underlagt de begrænsninger, som denne engine besidder. Dette har desværre store konsekvenser for hvilket funktionalitet der er til rådighed på iOS platformen. Til sammenligning understøtter Android utallige funktionaliteter, så derfor er ulemper på nuværende tidspunktet primært introduceret af iOS platformen. Nogle af de mest restriktive begrænsninger er:

• 1. Installation

  Installationen af en PWA på iOS, således at appen kan tilgås fra telefonens homescreen, er gemt bag flere klik og er kun mulig fra Safari browseren. Der er heller ingen mulighed for at præsentere en ‘promote installation’ for at indikere, at hjemmesiden kan installeres. Dette er isoleret set en ret stor begrænsning, da størstedelen af de besøgende ikke er opmærksom på installationsproceduren, og ej heller er bekendt med konceptet om, at en hjemmeside kan fungere som en ‘app’.

• 2. App-store

  App-Store tillader ikke PWA som teknologi stack. Det med andre ord ikke muligt at publicere en PWA i App Storen, hvilket på mange måder hindrer appens synlighed.

  Det er en ting, som folk tit spørger os om. MEN der er altså muligheder for at gøre den synlig i App Store, hvis man tilføjer et lag som hedder Capacitor. Det kræver en længere forklaring, som du kan få ved at se denne video.

• 3. Manglende push-notifikationer

  Push-notifikationer er ikke understøttet af Safari browseren.

• 4. Built-in funktioner

  Built-in funktioner såsom Bluetooth API, Vibration API, Badging API. Listen af hvilket funktioner er understøttet på hvilket operativsystemer og enheder er meget varierende. Project Fugu bestående af Google, Microsoft, Intel, Samsung, med flere, er et tværfagligt projekt der er søsat med henblik på at udvide hvilket typer af funktionaliteter der er understøttet af browseren. Listen over hvilket API’er der er implementeret kan ses her!

Se i fuld størrelse

Sådan ser det ud når man skal installere en PWA på en iPhone.

“Vi vil derfor anbefale en PWA, hvis du er i det krydsfelt, hvor du søger en synlighed og tilgængelighed gennem din hjemmeside, men samtidig gerne vil tilbyde de besøgende en mere “app-like” oplevelse på mobiltelefonen.”

Mathias Piletti

Skal jeg have en PWA?

Helt grundlæggende er en PWA især værd at overveje, hvis dit primære produkt er en hjemmeside.

I stedet for at sammenligne en PWA med en konventionel app, synes vi det giver bedre mening at tænke på en PWA som en hjemmeside med udvidet sæt funktionaliteter og performance. Forventningerne fra besøgende er i dag tårnhøje, og de er drøn kritiske hvad angår brugeroplevelsen, forhindringer i installationsprocessen - såvel som tålmodigheden når der interageres med appen.  En klassisk native app tvinger altid den besøgende gennem deres distribueringsplatform (App Store eller Play Store), hvilket i mange tilfælde hindrer en vis procentdel af kundesegment i overhovedet at finde appen. Det kan gøre opstartsoplevelsen mere vanskelig.

Til sammenligning er en PWA betydelige lettere at distribuere, da en enkelt URL er nok til at give en smagsprøve på hvad ens produkt kan tilbyde, uden at tvinge potentielle kunder gennem nogen installationsproces eller andre mellemled. 

En PWA har den fordel at kan afvikles på rigtig mange typer af enheder, i vidt forskellige formater og uden en forudgående installationsproces. Derudover kan en PWA også installeres som en desktop app, således den kan fremsøges gennem startmenuen på dit operativsystem.

Hvis du til gengæld primært er interesseret i at eksponere din app gennem app-store, push notifikationer eller søger bedre performance, er en hybrid løsning som React Native tilbyder, måske et bedre alternativ. 

Har du spørgsmål?

Forhåbentligvis gav det nogle svar til et par af de spørgsmål, du må have om PWA’er. Ellers er du meget klar til at tage fat i Kasper Garnæs, der er teknisk direktør i Reload.

Send endeligt et digitalt brev hans vej, og så snakkes vi ved.