Alla blogginlägg

Vad är PWA eller Progressive Web Apps?

En Progressive Web App är en app som du kan använda – och ladda ner – via en vanlig webbläsare. PWA kombinerar fördelarna med en webbplats med egenskaper från konventionella appar. Peter Antonius reder ut begreppen och tipsar om hur och när en PWA kan göra extra nytta.

Webbläsare får app-krafter

Section titled Webbläsare får app-krafter

Utvecklingen av webbläsare går snabbt. I flera webbläsare är det möjligt att ta reda på användarens position, skicka pushnotiser och ge tillgång till webbinnehåll även till användare som är offline. En Progressive Web App drar nytta av de här funktionerna för att skapa en användarupplevelse som är snabb, engagerande och oberoende av kvaliteten på användarens uppkoppling.

"Progressive" är också ett viktigt begrepp. Vissa webbläsare har inte stöd för alla funktioner. Apple och iOS släpar efter i utvecklingen, och om du använder iPhone eller iPad så saknas stöd för pushnotiser. Använder du Internet Explorer så fungerar inte pushnotiser eller offlinestöd. Tanken med en PWA är att användarupplevelsen fortfarande fungerar riktigt bra även för användare som inte har stöd för alla nya funktioner.

Definitionen av en PWA

Section titled Definitionen av en PWA

PWA-begreppet myntades av Alex Russell redan 2015. Det här är hans baskriterier för en PWA:

  1. Går den bara att nå över en säker anslutning, dvs HTTPS?
  2. Går den att använda om du saknar Internet-uppkoppling? Det här betyder att den använder en service worker, som är en teknik för att ladda in data i bakgrunden.
  3. Har den ett Web App Manifest-fil? Det här är en fil som bland annat länkar till ikonen som syns på din hemskärm om du laddar ner PWA:n.

Tre "JA" innebär att en tjänst är en PWA. Men en stor poäng med den här tekniken är att det är helt upp till dig hur du använder den. Jag brukar peka på två användningsfall:

  1. Skapa en PWA med ett tydligt syfte, oftast med huvudfokus på mobila besökare.
  2. Addera PWA-krafter till en befintlig webbplats, intranät eller digital tjänst. Så har vi till exempel gjort med whitespace.se.

Bra exempel på PWA:er är webbplatser – som Uber,  Twitter och Starbucks – där upplevelsen anpassar sig till klienten.

Fördelar med PWA

Section titled Fördelar med PWA

Det som gör PWA-tekniken så kraftfull är att det går att bygga en responsiv tjänst – som fungerar lika bra via webbläsaren, nerladdad som en app eller via desktop. Det ger flera fördelar:

  1. Högre konvertering. Konvertering kan vara köp, men också att användaren lyckas slutföra en uppgift. Många företag som jag möter har sämre konvertering för den växande skaran mobila användare. Ett genomarbetat användargränssnitt i kombination med PWA:ns supersnabba laddtider leder ofta till att konverteringen blir avgjort bättre.
  2. Låga kostnader. En webbplats med PWA-krafter kan ersätta appar för iOS, Android och Windows Phone. Kostnaden för teknikutveckling och förvaltning blir betydligt lägre, och du kan lägga de pengarna på att skapa en bättre upplevelse för besökaren.
  3. Få fler användare. PWA:n är lika lätt att nå som en vanlig webbplats och allt innehåll går att googla sig fram till – om du inte aktivt stoppar det. Du tar också bort barriären som det innebär att ladda ner en app.
  4. Länka direkt till innehåll i appen. En PWA är i grund och botten en webbplats, och användare kan fritt dela innehåll oavsett vilken telefon, webbläsare eller dator som mottagaren använder.

PWA skapar nya möjligheter för alla som över huvud taget inte har övervägt en mobilapplikation.

Vad gör sig bra som PWA?

Section titled Vad gör sig bra som PWA?

Är det en tjänst med stor andel återkommande besökare? Eller en tjänst som borde ha fler återkommande användare? Kräver den dessutom att användaren är aktiv och interagerar – klickar, matar in text och gör val? I så fall är det en tjänst som har extra stor nytta av PWA-krafter. Här är tre exempel:

  1. Intranät, där människor kan ta del av visst innehåll i offlineläge och framför allt få en bra upplevelse även med en dålig uppkoppling.
  2. Alla e-handelsplatser. PWA-tekniken går att använda för att göra upplevelsen av din e-handel avsevärt snabbare.
  3. Nyttotjänster för till exempel tidrapportering, kom ihåg-listor och liknande.

Om du vill läsa fler artiklar som den här, missa inte att prenumera på vårt nyhetsbrev.

Vill du veta mer om hur du kan dra nytta av PWA-tekniken i ert nästa projekt? Hör av dig till David Blomberg på 070 - 481 60 72 eller david.blomberg@whitespace.se