Blog – 16.02.2018 Hvad er en Progressive Web App (PWA), og hvorfor skal jeg være interesseret?

Som du har fundet vej til dette blogindlæg, har du sikkert hørt udtrykket PWA et eller andet sted. Godt for dig – PWA’er er det, som året 2018 vil blive husket for, så du er lige på forkant med udviklingen. Hvor spændende! I dette blogindlæg forklarer jeg, hvad begrebet egentlig betyder, og hvorfor du bør interessere dig for det.
Progressive Web App

Progressive Web App

(kilde: Google Developer site)

Hvad er en PWA?

PWA står for Progressive Web Application. Lad os undersøge det ved at opdele det i to dele. De to sidstnævnte ord (“Web Application”) taler for sig selv. PWA’er er webapplikationer. Her betyder webapplikation blot en app, der kører som et websted, som f.eks. Twitter. Den første del af udtrykket – Progressive – betyder, at brugeroplevelsen forbedres gradvist på baggrund af browserens muligheder. Det betyder i bund og grund, at webapplikationen fungerer godt i ældre browsere, men at den kan udnytte nyere teknologier til at forbedre oplevelsen, hvis brugeren bruger en browser, der understøtter dem. Det lyder enkelt, ikke sandt? Så hvor kommer udtrykket fra?

Progressiv betyder, at brugeroplevelsen forbedres gradvist baseret på browserens muligheder

Udtrykket blev introduceret af Google Chrome-ingeniør Alex Russell i hans blogindlæg i 2015. Siden da har Google aktivt promoveret brugen af dem og stillet en masse ressourcer til rådighed om emnet, f.eks. et websted, der forklarer dem mere detaljeret.
Når jeg holder præsentationer omkring PWA’er, støder jeg altid på den samme forvirring på dette punkt. “Så… Er det en teknologi? Er det en standard? Er det noget, der ejes/patenteres af Google?” Nej, ingen af delene. Det er blot et udtryk til at beskrive en bestemt måde at designe og bygge applikationer på. Lad os dernæst forsøge at forstå, hvad de er, ved at gennemgå karakteristika.
Her er de oprindelige 9 karakteristika ved PWA af Alex Russell med en forklaring på, hvad de betyder i denne sammenhæng:

  • Responsive: Side ser godt ud på forskellige skærmstørrelser (f.eks. telefon, tablet, desktop)
  • Uafhængig af tilslutningsmuligheder: Fungerer uden internetforbindelse
  • App-lignende interaktioner: Look’n’feel som native applikation
  • Frisk: Altid opdateret
  • Sikker: Udnytter sikker forbindelse for at afbøde flere typer sikkerhedstrusler
  • Opdagelig: Browsere identificerer PWA’er automatisk
  • Geninddrages: Kan få brugerne tilbage til appen ved hjælp af f.eks. push-meddelelser
  • Installerbar: Kan gemmes på startskærmen ligesom native apps, men uden det ekstra besvær med App Store
  • Linkable: Kan deles rundt som almindelige URL’er

For læseren af dette blogindlæg er de vigtigste funktionaliteter:

  • Installerbarhed på startskærmen
  • Access til flere native API’er såsom kamera, geolokalisering, vibrationer, betalinger osv.
  • Støtte til push-meddelelser
  • Offline-brug
  • Støtte til fuld skærm og splash screen

(kilde: Alex Russells blogindlæg)

For at konkludere alt det ovenstående kan PWA’er gøre det meste af det, som native apps kan gøre, og kløften mellem, hvad native apps og webapps kan gøre, bliver mindre og mindre hele tiden.

Hvorfor nu?

Men nu tænker du måske, at alt dette lyder så godt, at der må være en hage, da PWA’er ikke er standardmetoden til at implementere applikationer. Ja, det har du ret i. Der er en hage. Der har været mangel på støtte til de teknologier, der giver mulighed for PWA’er i nogle miljøer. Android-understøttelse har eksisteret i et stykke tid, startende fra Android 5, hvilket betyder, at over 80 % (kilde: Googles Android-statistik) af Android-enhederne på verdensplan understøtter de teknologier, der er nødvendige for at implementere PWA’er. Anvendelsen er endnu større, hvis man kun ser på Europa eller Nordamerika. Så Android-understøttelsen er virkelig god allerede.
Desværre har den anden hovedaktør, der deler markedet for mobiltelefoner, ikke været alt for ivrig efter at implementere teknologierne (læs hvorfor). iOS-understøttelsen har manglet, hvilket har forhindret en bredere udbredelse af PWA’er. Men fra og med den snart kommende iOS 11.3 vil understøttelsen også være tilgængelig for iOS. Heldigvis er vedtagelsen af nye iOS-versioner relativt hurtig, så man kan formode, at et højt niveau af understøttelse vil være tilgængeligt senere i år. Til orientering repræsenterer version 10 og 11 93 % af alle iOS-versioner, der anvendes derude ifølge Apple.
Selv om fokus, når man taler om PWA’er, ofte er i det mobile miljø, fungerer de også på skrivebordet. Tidligere på måneden kom der en vigtig meddelelse fra Microsoft om, at PWA’er nu understøttes af Edge og Windows 10. Chrome og Firefox understøtter allerede PWA’er, og det samme vil den næste udgave af desktop Safari gøre.

Eksempel: Twitter Lite

Det mest kendte eksempel på PWA’er er Twitters PWA-version kaldet Twitter Lite (prøv den med Android eller desktop på mobile.twitter.com). Twitter har også offentliggjort deres begrundelse for at bygge PWA-versionen. For at fremhæve nogle af fakta fra indlægget: Sammenlignet med deres native app er størrelsen af PWA-versionen kun 1-3 %, og den gennemsnitlige indlæsningstid er 30 % mindre.
Andre kendte eksempler på PWA’er omfatter Forbes, Trivago, Washington Post, Telegram, Alibaba og senest Google Maps Go. Der findes også et katalog over PWA’er.

Konklusioner

Året 2018 forventes at blive året for PWA’er. Værktøjet er allerede på et stort niveau, og der dukker hele tiden flere og flere PWA’er op. Når understøttelsen i iOS er meget tilgængelig, bliver PWA’er et realistisk alternativ til native apps. Hvis du overvejer, om PWA’er er det rigtige valg for dig, så kig tilbage snart, da jeg vil skrive en guide om Skal jeg lave en PWA i stedet for en native app?
Gofore har allerede erfaring med PWA’er og besidder også bred erfaring med at bygge responsive, flotte, offline-første og effektive webapps. Uanset om du har brug for hjælp til arkitektoniske valg, design eller implementering af PWA’er, skal du ikke tøve med at kontakte os.

VIDERE LÆSNING FRA GOFORE BLOG

Agile Transformation in Action – Del 1
Agile Transformation in Action – Del 2
Hvad er pointen med at skalere Agile

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.