Vi lever i en stadig hurtigere, dynamisk og foranderlig verden. De inkrementelle innovationer, der har betydning for mennesker, følger hinanden med et stadig tydeligere fokus på:

• ydeevne, tænk på de stadig kraftigere enheder, vi bruger hver dag, eller de opgaver, der gør det muligt for os at udføre hurtigere;
• oplevelse, for at fjerne enhver friktion i brugen af software/hardware;
• intelligens, med algoritmer, der nu arbejder i et forudsigende perspektiv.

Det er i denne retning med primært fokus på ydeevne og brugeroplevelse for slutbrugeren, som går udviklingen af Progressive Web App (PWA), en løsning, der ønsker at kombinere det bedste fra native apps og webteknologi.

En Progressive Web App (PWA) er en app, der bruger moderne webfunktioner til at tilbyde brugerne en meget lignende (hvis ikke bedre) oplevelse som en native app.

I modsætning til traditionelle apps er progressive webapps en hybrid mellem almindelige websider og mobilapplikationer. Udtrykket “progressive” henviser til, at de introducerer nye funktioner, og ud fra brugeroplevelsen opfattes de i første omgang som normale websteder, men opfører sig gradvist mere som mobilapps, bl.a. multiplatform.

For- og ulemper ved Progressive Web App

De vigtigste funktioner er:

• Progressive – De fungerer for alle brugere, uanset hvilken browser der er valgt, fordi de i udgangspunktet er bygget op med progressive forbedringsprincipper.
• Responsive – De tilpasser sig de forskellige skærmstørrelser: desktop, mobil, tablet eller dimensioner, der senere kan blive tilgængelige.
• App-lignende – De opfører sig over for brugeren, som om de var native apps, hvad angår interaktion og navigation.
• Opdateret – Oplysningerne er altid opdaterede takket være den dataopdateringsproces, der tilbydes af servicemedarbejdere.
• Sikre – Eksponeres over HTTPS-protokollen for at forhindre, at forbindelsen viser oplysninger eller ændrer indholdet.
• Søgbare – De identificeres som “applikationer” og indekseres af søgemaskiner.
• Genaktiverbare – Gør det nemt at genaktivere applikationen takket være funktioner som f.eks. webnotifikationer.
• Installable – De giver brugeren mulighed for at “gemme” de apps, som han anser for mest nyttige med det tilsvarende ikon på skærmen på sin mobile terminal (hjemmeskærm) uden at skulle stå over for alle de trin og problemer, der er forbundet med brugen af app-butikken.
• Linkable – Deles nemt via URL uden komplicerede installationer.
• Offline – Endnu en gang handler det om at sætte brugeren før alting og undgå den sædvanlige fejlmeddelelse i tilfælde af svag eller ingen forbindelse. PWA’erne er baseret på to særlige kendetegn: Først og fremmest appens “skelet”, som minder om sidestrukturen, selv om indholdet ikke reagerer, og dens elementer omfatter overskriften, sidens layout samt en illustration, der signalerer, at siden er ved at blive indlæst.

Svagheder henviser til:

• iOS-understøttelse fra version 11.3 og fremefter;
• stor brug af enhedens batteri;
• ikke alle enheder understøtter alle PWA-funktioner (samme tale for iOS- og Android-operativsystemer);
• det er ikke muligt at etablere en stærk geninddragelse for iOS-brugere (URL-ordning, standardwebnotifikationer);
• understøttelsen af offlineudførelse er dog begrænset;
• mangel på tilstedeværelse i butikkerne (der er ingen mulighed for at skaffe trafik fra denne kanal);
• der er ikke noget “kontrolorgan” (ligesom butikkerne) og en godkendelsesproces;
• begrænset adgang til visse hardwarekomponenter i enhederne;
• lidt fleksibilitet med hensyn til “særligt” indhold til brugerne (f.eks. loyalitetsprogrammer, loyalitet osv.).

Vigtigheden af Manifest og Service Workers

De nye funktioner i moderne browsere, der gør det muligt for PWA’er at tilbyde det bedste, er “manifest” og “service workers”.

Manifest
Det er en simpel JSON-fil, der definerer de grundlæggende parametre for PWA, for at styre, hvordan appen skal se ud for brugeren og definere dens udseende ved lanceringen: ikoner, andre grundlæggende funktioner som farver, skrifttyper, skærmorientering og mulighed for at blive installeret på startskærmen.

Servicemedarbejdere
De er den egentlige nøgle til de avancerede oplevelser, som en PWA kan tilbyde. En service worker er et script, som browseren kører i baggrunden, adskilt fra en webside, for at bruge funktioner, der ikke kræver en webside eller brugerinteraktion.

I dag omfatter SW’er allerede funktioner som push-notifikationer og synkronisering i baggrunden. I fremtiden vil de understøtte funktioner som periodisk synkronisering eller geofencing. Den vigtigste funktion er evnen til at opfange og administrere netværksanmodninger, herunder programmatisk forvaltning af en cache af svar. Det er et API, der understøtter offline-oplevelser ved at give udviklerne fuld kontrol over oplevelsen.

Med tilføjelsen af understøttelse af service workers i den seneste version af iOS har Apple åbnet døren for PWA’er, så de efter alt at dømme kan nå ud til hele mobilmarkedet.

Hvad er de mest anvendte teknologier til PWA?

Der er flere teknologier til oprettelse af en Progressive Web App, primært baseret på JavaScript, med forskellige egenskaber.

Men blandt de vigtigste har vi:

• React
  Et kraftfuldt JavaScript-bibliotek til opbygning af dynamiske og moderne brugergrænseflader
• Polymer
  En kombination af komponenter, værktøjer og modeller, der er designet til at skabe PWA
• Angular
  En JavaScript-ramme til at skabe dynamiske webapplikationer, der bruger HTML som skabelonsprog
• Ionic
  En JavaScript-ramme til at skabe kraftfulde applikationer til flere platforme ved hjælp af en grundlæggende kode
• Accelerated Mobile Pages (AMP)
  Et open source-projekt til forbedring af websiders ydeevne

Sådan vælger du mellem en PWA eller en native løsning

Det øjeblik, hvor valget kommer, kommer, hvilken løsning skal man vælge?

Det er at foretrække at vælge udviklingen af en PWA, når:

• App’en skal let distribueres til en endnu bredere brugerbase
• Det tilgængelige budget er ikke højt
• Der er kun lidt tid til rådighed til go-live
• En korrekt indeksering på søgemaskiner er vigtig
• Der er behov for kompatibilitet på tværs af platforme
• Der er behov for flere opdateringer på kort tid

Det er derimod at foretrække at udvikle en native app, når:

• Det er vigtigt at udvikle en native app, når
  • Det er nødvendigt at bevæge sig på butikkerne
  • Hastighed og lydhørhed er nøglepunkter for appens succes
  • Appen kræver en vigtig brug af enhedens hardwarefunktioner
  • Forretningsmodellen er f.eks. baseret på omkostninger pr. download og/eller IAP (In App Purchase)
  • Appen skal integreres med andre apps fra tredjeparter

  Der er forskelle i installationsprocessen: PWA vs native app

  Den generelle proces for installation af native apps følger dette flow:

  • Access to the reference Store (App Store or Google Play)
  • Search for the app
  • Click on “Install”
  • Acceptance of the various authorizations
  • Opening and launching the app
  • Use of the app

  I sammenligningen omfatter PWA-installationen:

  • Besøg på webstedet
  • Tilføjelse til enhedens startskærm (valgfrit)
  • Opening af appen
  • Brug af appen

  De vigtigste eksempler på en Progressive Web App

  Der er allerede mange eksempler på PWA “udmærket”, som brugerne bruger på deres enheder, og blandt de vigtigste rapporterer vi:

  Pinterest

  

  For at vide mere:

  Addy Osmani på Medium > A Pinterest Progressive Web App Performance Case Study

  Instagram

  Den nuværende PWA minder meget om den native app og har alle de vigtigste interaktionsfunktioner, fra notifikationer til muligheden for at se Stories.

  Google Maps

  Ved mere at vide:
  The Next Web > Googles letvægts-Maps Go er blot en Progressive Web App

  Tinder

  

Ved mere at vide:
Addy Osmani på Medium > A Progressive Tinder Web App Performance Case Study

Twitter Lite

For at vide mere:
Addy Osmani på Medium > A Progressive Tinder Web App Performance Case Study

For at vide mere:
Twitter Blog > Hvordan vi byggede Twitter Lite
Google Developers > Twitter Lite PWA øger engagementet markant og reducerer dataforbruget
Paul Armstrong på Medium > Twitter Lite og højtydende React Progressive Web Apps at Scale

YouPorn

Den beslutning om at bruge PWA’er er primært for at omgå de begrænsninger, som Apple og Google sætter på pornografisk indhold i butikkerne, samt for at sikre en bedre brugeroplevelse.

For at få mere at vide:
YouPorn Blog > YouPorn App Experience
VentureBeat > YouPorn goes progressive med nye mobile webapps til Android og iOS

Nogle referencer til uddybning af temaet Progressive Web App

Google Progressive Web App > https://developers.google.com/web/progressive-web-apps/

Google PWA-checkliste > https://developers.google.com/web/progressive-web-apps/checkliste

Appscope, mappe til Progressive Web Apps (PWA’er) > https://appsco.pe/

Så er fremtiden “progressiv”?

Svaret er, som altid, afhænger som altid. Beslutningen om at udvikle en PWA følger efter analyser og overvejelser, som skal foretages fra tid til anden, fra projekt til projekt og fra bruger til bruger. Tværtimod kunne vi tilføje en yderligere kompleksitet: den om positionering på søgemaskinen: har vi forvaltet alt korrekt, eller kannibaliserer vi trafikken på vores websted?

De faktorer, der fører til valget, er mange, som forudset i denne undersøgelse, så der findes ikke en defineret og standardopskrift, men den, der giver konteksten passer korrekt med strategi og mål. Lad os tale om det sammen.