Vi lever i en allt snabbare, mer dynamisk och föränderlig värld. De inkrementella innovationerna som påverkar människor avlöser varandra, med ett allt tydligare fokus på:

• prestanda, tänk på de allt kraftfullare enheterna vi använder varje dag eller de uppgifter som gör det möjligt för oss att göra snabbare;
• upplevelse, för att eliminera all friktion i användningen av mjukvara/hårdvara;
• intelligens, med algoritmer som numera arbetar i ett prediktivt perspektiv.

Det är i denna riktning, med fokus främst på prestanda och användarupplevelse för slutanvändaren, som utvecklingen av Progressive Web App (PWA) går, en lösning som vill kombinera det bästa av native appar och webbteknik.

En Progressive Web App (PWA) är en app som använder moderna webbfunktioner för att erbjuda användarna en mycket likartad (om inte bättre) upplevelse som en native app.

Till skillnad från traditionella appar är progressiva webbappar en hybrid mellan vanliga webbsidor och mobila applikationer. Termen “progressiv” syftar på att de introducerar nya funktioner och ur användarupplevelsens synvinkel uppfattas de till en början som vanliga webbplatser men beter sig successivt mer som mobilappar, bland annat multiplattform.

Fördelar och nackdelar med Progressive Web App

De viktigaste funktionerna är:

• Progressiva – De fungerar för alla användare, oavsett vilken webbläsare som väljs eftersom de byggs i grunden med progressiva förbättringsprinciper.
• Responsiva – De anpassar sig till de olika skärmstorlekarna: skrivbord, mobil, surfplatta eller dimensioner som senare kan bli tillgängliga.
• App-liknande – De beter sig mot användaren som om de vore inhemska appar, när det gäller interaktion och navigering.
• Uppdaterade – Informationen är alltid uppdaterad tack vare den process för uppdatering av data som erbjuds av tjänstepersoner.
• Säker – Exponeras via HTTPS-protokollet för att förhindra att anslutningen visar information eller ändrar innehållet.
• Sökbara – De identifieras som “applikationer” och indexeras av sökmotorer.
• Återaktiverbara – Gör det enkelt att återaktivera applikationen tack vare funktioner som t.ex. webbanmälningar.
• Installerbara – De gör det möjligt för användaren att “spara” de appar som han anser vara mest användbara med motsvarande ikon på skärmen på sin mobila terminal (startskärmen) utan att behöva ta itu med alla de steg och problem som är förknippade med användningen av app-butiken.
• Länkbara – Delas enkelt via webbadresser utan komplicerade installationer.
• Offline – Ännu en gång handlar det om att sätta användaren i främsta rummet, och undvika det vanliga felmeddelandet om anslutningen är svag eller saknas. PWA bygger på två särdrag: först och främst appens “skelett”, som påminner om sidans struktur, även om dess innehåll inte svarar och dess beståndsdelar inkluderar rubriken, sidans layout samt en illustration som signalerar att sidan håller på att laddas.

Svagheter hänvisar till:

• iOS-stöd från version 11.3 och framåt;
• större användning av enhetens batteri;
• inte alla enheter har stöd för alla PWA-funktioner (samma tal för iOS- och Android-operativsystem);
• det är inte möjligt att etablera en stark återkoppling för iOS-användare (URL-schema, standardwebbmeddelanden);
• stödet för offline-utförande är dock begränsat;
• bristande närvaro i butikerna (det finns ingen möjlighet att förvärva trafik från den kanalen);
• det finns inget “kontrollorgan” (som butikerna) och ingen godkännandeprocess;
• begränsad tillgång till vissa hårdvarukomponenter i enheterna;
• liten flexibilitet när det gäller “speciellt” innehåll för användare (t.ex. lojalitetsprogram, lojalitet osv.).).

Betydelsen av Manifest och Service Workers

De nya funktionerna i moderna webbläsare som gör det möjligt för PWA:s att erbjuda det bästa är “manifest” och “service workers”.

Manifest
Det är en enkel JSON-fil som definierar de grundläggande parametrarna för PWA, för att styra hur appen ska se ut för användaren och definiera dess utseende vid lanseringen: ikoner, andra grundläggande funktioner som färger, typsnitt, skärmens orientering och möjligheten att installeras på startskärmen.

Tjänstearbetare
De är den verkliga nyckeln till de avancerade upplevelser som en PWA kan erbjuda. En tjänstearbetare är ett skript som webbläsaren kör i bakgrunden, separerat från en webbsida, för att använda funktioner som inte kräver en webbsida eller användarinteraktion.

I dag innehåller tjänstearbetare redan funktioner som push-notiser och bakgrundssynkronisering. I framtiden kommer de att stödja funktioner som periodisk synkronisering eller geofencing. Huvudfunktionen är förmågan att fånga upp och hantera nätverksförfrågningar, inklusive programmatisk hantering av en cache av svar. Det är ett API som stöder offline-upplevelser genom att ge utvecklare fullständig kontroll över upplevelsen.

Med tillägget av stöd för service workers i den senaste versionen av iOS har Apple öppnat dörren för att PWA:erna ska nå, i alla avseenden, hela mobilmarknaden.

Vad är de mest använda teknikerna för PWA?

Det finns flera olika tekniker för att skapa en Progressive Web App, främst baserade på JavaScript, med olika egenskaper.

Av de viktigaste har vi:

• React
  Ett kraftfullt JavaScript-bibliotek för att bygga dynamiska och moderna användargränssnitt
• Polymer
  En kombination av komponenter, verktyg och modeller för att skapa PWA
• Angular
  En JavaScript-ram för att skapa dynamiska webbapplikationer som använder HTML som mallspråk
• Ionic
  En JavaScript-ram för att skapa kraftfulla applikationer för flera plattformar med hjälp av en grundläggande kod
• Accelerated Mobile Pages (AMP)
  Ett projekt med öppen källkod för att förbättra prestandan hos webbsidor

Hur man väljer mellan en PWA eller en inbyggd lösning

Det är dags att välja, vilken lösning ska man välja?

Det är att föredra att välja utvecklingen av en PWA när:

• Appen måste enkelt distribueras till en ännu större användarbas
• Den tillgängliga budgeten är inte stor
• Det finns lite tid till förfogande för go-live
• Det är viktigt med korrekt indexering i sökmotorer
• Kompatibilitet mellan olika plattformar krävs
• Flera uppdateringar behövs inom en snäv tidsperiod

Tvärtom, det är att föredra att utveckla en native app när:

• Det är nödvändigt att flytta på butikerna
• Snabbhet och lyhördhet är nyckelpunkter för appens framgång
• Appen kräver en viktig användning av enhetens hårdvarufunktioner
• Affärsmodellen baseras till exempel på kostnad per nedladdning och/eller IAP (In App Purchase)
• Appen måste integreras med andra appar från tredje part

Underskotten i installationsprocessen: PWA vs native app

Den allmänna processen för installation av native appar följer detta flöde:

• Access till referensbutiken (App Store eller Google Play)
• Sök efter appen
• Klicka på “Installera”
• Acceptans av de olika auktoriseringarna
• Öppning och lansering av appen
• Användning av appen

I jämförelsen omfattar PWA-installationen följande:

• Access till referensbutiken (App Store eller Google Play):
  • Besök på webbplatsen
  • Tillägg till enhetens startskärm (valfritt)
  • Öppning av appen
  • Användning av appen

  De viktigaste exemplen på en Progressive Web App

  Det finns redan många exempel på PWA som “utmärker sig” som användarna använder på sina enheter och bland de viktigaste rapporterar vi:

  Pinterest

  

  För att veta mer:
  Addy Osmani på Medium > A Pinterest Progressive Web App Performance Case Study

  Instagram

  Den nuvarande PWA:n liknar i hög grad den ursprungliga appen och har alla de viktigaste interaktionsfunktionerna, från meddelanden till möjligheten att visa Stories.

  Google Maps

  För att veta mer:
  The Next Web > Googles lättviktiga Maps Go är bara en Progressive Web App

  Tinder

  

  För att veta mer:
  Addy Osmani on Medium > A Progressive Tinder Web App Performance Case Study

  Twitter Lite

  För att veta mer:
  Twitter Blog > Hur vi byggde Twitter Lite
  Google Developers > Twitter Lite PWA ökar engagemanget avsevärt och minskar dataanvändningen
  Paul Armstrong på Medium > Twitter Lite och högpresterande React Progressive Web App med hög prestanda. Apps at Scale

  YouPorn

  

  Beslutet att använda PWA:s är främst för att kringgå de begränsningar som Apple och Google sätter på pornografiskt innehåll i butiker, samt för att säkerställa en bättre användarupplevelse.

  För att veta mer:
  YouPorn Blog > YouPorn App Experience
  VentureBeat > YouPorn goes progressive with new mobile web apps for Android and iOS

  Några referenser för att fördjupa temat Progressive Web App

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

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

  Appscope, katalog för progressiva webbappar (PWA) > https://appsco.pe/

  Så är framtiden “progressiv”?

  Svaret är som alltid att det beror på. Beslutet att utveckla en PWA följer på analyser och reflektioner som måste göras från tid till annan, från projekt till projekt, från användare till användare. Tvärtom kan vi lägga till ytterligare en komplexitet: positioneringen i sökmotorn: har vi hanterat allting korrekt eller kannibaliserar vi trafiken på vår webbplats?

  Faktorerna som leder till valet är många, vilket förutsågs i den här studien, så det finns inte något definierat och standardiserat recept, utan det som ger sammanhanget passar korrekt med strategi och mål. Låt oss prata om det tillsammans.