Progressive Web Apps (PWA)

Hvad er Progressive Web Apps eller PWA'er?

Progressive Web Apps er den teknologiske kombination af native apps og de webapps bygget på HTML5, vi kender. PWA'er er kommet for at lukke det teknologiske hul mellem apps og websider.

Google har været en af de vigtigste fortalere for at fremme udviklingen af den type teknologi. For bedre at forstå kendetegnene må vi tale om apps, der skal være pålidelige, hurtige og engagerende.

Kendetegn, en Progressive Web App skal have

For at gøre PWA-begrebet tilstrækkeligt klart og forklaret dykker vi ned i de kendetegn, teknologien ikke kan undvære.

Vi taler selvfølgelig i generelle vendinger. Derfra tilpasser hver forretnings- eller servicemodel sine mål til behovene hos sin egen målgruppe.

Hastighed

Tid er penge, ikke bare for Google, men for alle de forretninger, hvor langsom indlæsning af deres produkter kan få brugerne til at opgive et køb, de ellers ville have foretaget.

Google har understreget den præmis længe. AMP-projektet blev født med netop det formål, og nu kommer PWA'er til som svar på behovet for hurtig adgang til information fra apps.

Brugerne har ingen tålmodighed i dag; de venter ikke på, at et site loader helt. 53 % af brugerne venter ikke mere end 3 sekunder på, at et website loader, viser Think with Google

Pålidelig

Når vi taler om pålidelighed, mener vi garantierne for, at sitet virker. Takket være det, der kaldes Service Workers, bør problemer med netforbindelsen ikke forhindre en PWA i at loade.

Kan installeres

En PWA kan installeres, uden at du skal ind i Chrome Store, Apple Store eller nogen af de eksisterende app stores. Husk, at det ikke er native apps, så vi kan tilgå dem uden at gå gennem butikkerne.

Installationen fungerer ganske enkelt som en genvej; den kræver ikke plads til at gemme de forskellige filer.

Forskellige enheder: mobil og desktop

Kodebasen er den samme på begge enheder, og det betyder, at teknikker til responsivt design gælder på både mobil og desktop.

Fordele og ulemper ved PWA'er

Nogle af fordelene er allerede nævnt ovenfor i gennemgangen af, hvad progressive apps kan. Men der er mange flere grunde til at overveje teknologien i vores forretning.

• ›Sparede ressourcer
• ›Ingen installation nødvendig
• ›Meget høj indlæsningshastighed
• ›Push-beskeder direkte til smartphones
• ›Kører på alle styresystemer
• ›Bedre sikkerhed
• ›Mindre udviklings- og vedligeholdelsesarbejde end en native app.
• ›Billigere end en native app.

Ulemper

• ›Kræver internetforbindelse.
• ›Ikke alle browsere understøtter PWA'er.
• ›Højt batteriforbrug

Hvad er en Service Worker?

Lad os kort vende tilbage til det tekniske, for der er nogle aspekter, progressive apps ikke kunne fungere uden. Service workers er scripts, der kører i baggrunden og sender forespørgsler til webapps, cachen eller selve netværket.

En vigtig ting at vide er, at Service Workers kun kan fungere, hvis du har et SSL-certifikat og serverer dem via https.

Lad os se det hele med et eksempel: BMW's website og deres PWA.

PWA-eksempel: BMW

Jeg har forsøgt at skrive en artikel uden at gå dybt ned i det tekniske, og nu skal vi se et eksempel på en app, der gør PWA-begrebet lettere at forstå.

Går vi ind på BMW's website, kan vi se, at de har et meget tiltalende design, hvor det visuelle er i højsædet, men lad os se ud over designet og kigge på, hvilken type website vi har med at gøre.

Umiddelbart er det et »normalt« website, men graver du i koden, får vi den første overraskelse. Det er nemlig et website, der er udviklet helt og holdent i AMP — ikke kun mobilversionen.

Men lad os komme til dagens emne.

Vel inde på websitet går vi til Chromes bjælke »tilpas og kontrollér«.

Som du kunne se, er der åbnet et vindue med indholdet fra BMW's website. Sammenligner vi de to, ser vi, at de er praktisk talt identiske.

Billede af websitet i browseren (Chrome)

Billede af websitet i PWA på desktop

BMW's udviklere har formået at holde et identisk visuelt udtryk. Når vi accepterer »installationen« af deres PWA i vores mappe med Chrome-apps eller endda på skrivebordet (afhængigt af styresystemet — jeg bruger MacOS lige nu), er der hentet en genvej til deres PWA.

Bliver det for meget med alle de installerede apps, og vil vi afinstallere, skal vi bare gå til vinduet med vores PWA-version, klikke i højre side ligesom i Chrome og vælge afinstallér.

På mobilen er det praktisk talt det samme. Går vi ind på websitet med PWA-version, får vi en besked om at »oprette en genvej«.

Går man ind på et website med PWA, får man en mulighed for at oprette en genvej.

Accepterer vi, får vi et PWA-ikon på skrivebordet på mobilen.

DevTools, hvis du vil vide mere om PWA'er

Nu vil jeg gerne dykke ned i eksempler for at forklare begreberne og kendetegnene ved denne type apps.

Til det bruger vi det udviklerværktøj, Chrome stiller til rådighed (DevTools). Vi åbner inspektøren med højre museknap og går til Application.

Chrome Devtools

App Manifest (Web Application Manifest)

Manifestet er en lille JSON-fil med grundlæggende ting om stilen, som den giver browseren, så der ikke sker pludselige spring.

Eksempel på et Manifest (JSON)

Service Workers

Som vi forklarede tidligere, kan vi nu se, hvad det går ud på. Vi ser JS-filen og i den de scripts, den bruger. Service Workeren bliver installeret i browseren. Vi har flere fra andre webapps.

En af hovedfunktionerne ved den type kode er at sikre, at det altid er den samme version, der bliver serveret (den styrer cachen), også selv om vi åbner en ny fane.

Hvordan laver man PWA i WordPress?

Hvor vi skal lave en del manuelt arbejde, hvis vi har udviklet vores website med vores egen kode, ser det helt anderledes ud, hvis vi har udviklet det i WordPress. Er det tilfældet, har vi flere plugins til rådighed, som lader os slå PWA-teknologien til med et par klik. PWA-versionen af SEO Alive er faktisk resultatet af netop det plugin, som vi anbefaler.

De mest populære plugins til at lave PWA i WordPress.

PWA'er i markedsføring

For os, der arbejder med markedsføring, kan Progressive Web Apps hjælpe os med at nå de mål, enhver marketingafdeling har i tankerne, når et brand skal vokse.

Loyalitet og salg

Et af de mål, nogle brands arbejder dårligst med. Vi kender alle det lave engagement, mobilproducenterne lægger i behandlingen af deres kunder, for nu at nævne et eksempel.

Push-beskeder i PWA'er er en af de ting, der virker bedst og bidrager til at skabe salg.

Et studie af PWA'er lavet af Gartner giver os en række meget interessante tal om Lancome og Alibaba; Lancome melder om 17 % flere konverteringer, 51 % flere sessioner fra mobile enheder og 52 % på iOS. Alibaba (koncernen, som Aliexpress hører under) har forbedret sin konverteringsrate med 76 %.

Selv om vi har talt om 2 globale giganter, er det vist, at det hæver konverteringsraten at have en app på mobilen, hvor indlæsnings- og eksekveringstid ikke trækker ned, og hvor godt design bliver respekteret.

Som konklusion kan vi sige, at PWA'er breder sig mere og mere, især blandt de store brands. I Spanien går der nok lidt tid, før vi opdager det enorme potentiale i teknologien, men før eller siden bliver den taget i brug.

Enhver teknologi, der gør det lettere at navigere på mobilen, er vigtig; vi bruger mange timer med vores smartphones, og i sidste ende er adgang til både indhold og produkter forretning.

Referencer

• ›Googles dokumentation om PWA'er