PWAs – Derfor skal du implementere Progressive Web Apps i år

Intro til Progressive Web App – PWA

Der er med rette stor hype om Progressive Web Apps (PWA). Progressive Web Apps kombinerer fleksibiliteten fra et website med brugeroplevelsen fra en native app. I de fleste beskrivelser af, hvad PWA er, nævnes termen ’web app’, som forudsætning for at man kan lave en PWA. Problemet ved det er, at ’web app’ antyder at man snakker om Single Page Applications (SPA) og ikke om helt almindelige websites, der henter en ny side, når man klikker på et link. Det er i min optik et forkert udsagn. En PWA kan sagtens være et helt almindeligt website, så du behøver ikke stoppe med at læse artiklen her, hvis du ’blot’ har et almindeligt mobilvenligt website.

I virkeligheden handler det om, at vi skal blive bedre til at bygge vores websites til mobilt brug som udgangspunkt. Der heldigvis mange, der har fanget, at det handler om at tænke mobile first, når man udvikler sit website. Der er dog, underligt nok, knap så mange, der tænker at et website set på en mobil på mange måder kan ses som en app med samme indhold set på en mobil. Her er det i mange tilfælde kun browser-skallen, der gør forskellen. Der er simpelthen ofte en form for diskrepans i tankegangen imellem et mobilt website og en native app. Og det er bl.a. det, PWAs prøver at gøre op med.

Google, som har defineret PWA, beskriver selv termen som web-brugeroplevelser, der har følgende egenskaber:

  • Pålidelige; de hentes hurtigt og viser aldrig ’downsaur’/offline, selv hvis der er dårlig eller ingen internetforbindelse.
  • Hurtige; de responderer med det samme på interaktioner fra brugeren
  • Engagerende; de føles som almindelige apps og giver en oplevelse af en almindelig/native app

Så hvad er fordelene ved PWA? Hvad skal der til for at implementere PWA? Hjælper det i forhold til SEO? Kan man tracke om det gør en forskel? Spørgsmålene er mange. Nedenfor vil jeg forsøge at besvare nogle af dem.

Progressive Web App

 

Hvorfor skal mit website være en PWA

Tilføj til startskærmen

En PWA spørger brugeren om han/hun vil tilføje et site til startskærmen. Appen vil herefter kunne tilgås (og fremstå) som en almindelig app hentet fra en App Store. Man kan således få en tilstedeværelse på startskærmen, på brugerens telefon, med en PWA. Her er et eksempel på et helt almindeligt website, der er udvidet til at fungere som en PWA.

 

Progressive Web Apps

1. Føj til startskærm (fra Chrome på Android).

 

3 Websitet er nu på din startskærm (og under apps)

2. Bekræft at du vil føje til startskærm (fra Chrome på Android).

 

Progressive Web Apps

3. Websitet er nu på din startskærm (og under apps).

 

Progressive Web Apps

4. Når du klikker på ikonet, åbnes sitet som en selvstændig app.

 

Progressive Web Apps

5. Hvis du er offline, ser du stadigvæk de ting, der er cachede. F.eks. altid ’skallen’ af sitet. Desuden får du også en notifikation om, at du er offline ved de ting, der har brug for internetforbindelse for at blive vist.

 

Push notifikationer

Ligesom en almindelig app kan sende push notifikationer kan en PWA også gøre det. Det er komplekst at implementere selv, men heldigvis findes der masser af online services. Der er dog meget få eksempler på PWAs, der har formået at implementere det på en brugervenlig måde. De fleste spørger med det samme om de må vise notifikationer i stedet for at gøre det på et hensigtsmæssigt tidspunkt for brugeren. Man spørger jo (forhåbentligt) heller ikke brugeren om han/hun vil tilmeldes nyhedsbrev med det samme han/hun ankommer til sitet.

Hvis push notifikationer implementeres brugervenligt, har de et kæmpe potentiale for kommunikation med ens kunder. Rigtig mange sender f.eks. nyhedsbreve ud i dag, men meget få sender push notifikationer, som i min optik har stort set samme potentiale som nyhedsbreve.

Bedre brugeroplevelse

En PWA giver som udgangspunkt en bedre brugeroplevelse, da den bl.a. skal leve op til kravet om at være hurtig, sikker, pålidelig og engagerende. Når de ting bliver forbedret på ens site vil det også påvirke SEO positivt. Det er en afledt positiv effekt, da PWAs ifølge Google ikke har direkte indflydelse på SEO.

Er det målbart?

En PWA kan trackes på samme måde som der gøres på et helt almindeligt site. Det vil sige, at man nemt kan se, hvilken forskel det har gjort ved ens site, hvis man laver det til en PWA. Man kan selvfølgelig også tracke hele brugerrejsen for dem, der har tilføjet sitet til startskærmen. Det kan f.eks. gøres ved at tilføje UTM parametre til URL’en til startsiden i ens web-manifest (se mere om det nedenfor).

 

Hvad skal der til for at gøre mit website til en PWA?

Ethvert site kan blive til en PWA. Teknisk set skal der faktisk ikke særlig meget til. De helt basale krav er:

  • Brug HTTPS
  • Mobilvenligt site
  • Tilføj et Web Manifest
  • Registrér en ”Service Worker”

Her følger en kort uddybning:

Brug HTTPS

Den er helt indlysende. Der er ikke nogen undskyldning for ikke at bruge HTTPS i dag.

Mobilvenligt site

Langt de fleste web-sessioner foregår på en mobil enhed i dag. Derfor bør alle forretninger også have fuld fokus på det og helst fra et mobile first perspektiv.

Tilføj et Web Manifest

Et web manifest er en lille fil, der ligger på din server. Den indeholder basis information om din app så som navnet på din app, url til startsiden, app ikoner, app farver samt, om appen skal vises i sit eget vindues på telefonen eller i browseren. Det er ret simpelt at lave et web manifest, da der findes generatorer til dette online. F.eks. https://app-manifest.firebaseapp.com/

Når du har genereret din fil skal du linke til i din HTML-kode

<link rel=”manifest” href=”manifest.json”>

Registrér en Service Worker

En Service Worker er et lidt mere kompliceret og teknisk koncept. Kort sagt er det en lille stump kode på dit website, som browseren kører i baggrunden uafhængigt af dit website. Det åbner døren til push notifikationer og caching af indhold, så dit site kan tilgås offline. Implementering af Service Worker er uden for scopet af denne artikel, men der findes en udmærket guide på https://developers.google.com/web/fundamentals/primers/service-workers/

Derudover findes der flere ’biblioteker’ til caching af indhold, hvilket både kan gøre ens site hurtigere og tilgængeligt offline. På billederne fra ovenstående PWA er Googles Wokbox benyttet til cache.

Den fulde tjekliste til PWA

Den fulde liste over en god PWA, udgivet af Google, kan findes på: https://developers.google.com/web/progressive-web-apps/checklist/

 

Hvor står mit site i dag?

For at se, hvor dit website står i dag, mht. PWA, kan du tjekke det i Google Chromes Audit Tool. Dette findes ved at åbne Chromes udviklerværktøj (ctrl+shift+i/cmd+option+i) og klikke på fanen Audit. Her vil du kunne køre en audit på dit site og se, hvad du mangler for at have en PWA.

Audit tabben i Chrome

6. Audit tabben i Chrome.

 

Her er alle krav til en PWA opfyldt. Website: bassbuddha.com

7. Her er alle krav til en PWA opfyldt. Website: bassbuddha.com.

 

Eksempler på PWA

Der findes masser af gode eksempler på PWAs. Her har jeg udvalgt et par stykker.

 Starbucks

Starbucks’ PWA giver mulighed for at deres kunder kan bestille online. Der findes også en native app, men PWAen er markant mindre.

https://app.starbucks.com/

Kniveksperten

Denne norske ecommerce-butik har implementeret en PWA og spørger om lov til at sende beskeder.

https://kniveksperten.no/

Bass Buddha

Bass Buddha sælger high-end bas udstyr. Denne PWA virker delvist offline. Det er denne app, der er brugt i ovenstående eksempler.

https://www.bassbuddha.com/

Der findes masser af andre gode eksempler online, hvor også er god inspiration at finde til brugervenlig implementering af PWAs.

 

Har du brug for hjælp til at implementerer PWA og hvorfor du bør gøre det? Så er du meget velkommen til at kontakte Resolution.