PWA - Progressive Web Apps

PWA - Progressive Web Apps

Tänk om din site hade laddat omedelbart, kännas som en app och med samma fantastiska UX/UI som en app. Dessutom fungerar det i webläsaren utan något krav på att du ska ladda ned något. Det är i princip vad en PWA är. Utvecklingen av web har tagit nästa steg och nu finns nya moderna ramverk för att bygga web. Detta blir en ny standard för hur man bygger web idag. PWA är ett koncept som Google tagit fram. Men kan användas av alla

“53% of users will abandon a site if it takes longer than 3 seconds to load!”
/ Google

PWAs är enligt google:

  • Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.

  • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.

  • Engaging - Feel like a natural app on the device, with an immersive user experience.

Varför PWA

Kriterier

  • App-like - Appar engagerar användarna mer. PWA känns som en app utan att du behöver installera.

  • Re-engageable - Precis som en app så kan du göra push notiser så för att kommunicera med användarna. Exempelvis för att informera om kampanjer, blog posts eller liknande. 

  • Connectivity independentService workers gör så att du kan använda siten offline. Det betyder också att siten blir snabbar och mer tillgänglig.  

  • Fresh - Service workers gör så att sidan håller sig uppdaterad. 

  • Progressive - Fungerar för alla användare oavsett webbläsare, pga att den har en "progressive" förbättring inbyggt. 

  • Responsive - Passar alla skärmstorlekar, exempelvis desktop, mobile, tablet.

  • Safe - Allt är via HTTPS/krypterat så att inte användarens data kan ses av någon annan.

  • Discoverable - Kan ses som appar genom W3C manifestet som listar dem som en app.

  • Installable - Användare kan få tillgång till att lägga till appen på hemskärmen.

  • Linkable -  Enkelt att dela via en länk och behöver inte installeras.

Resultat

  • Snabbare än konkurrenterna (andra ser ut som en sköldpadda)

  • Ökad konverteringsgrad

  • Större engagemang

  • Mindre kostnader för hårdvara och hosting

  • Bättre Uptime / stability (även offline)

  • Mer flexibel för innovation

  • Enklare att rekrytera (utvecklare gillar ny teknik)

Tekniken

Javascript frameworks

Många nya js frameworks är relaterade till utvecklingen av PWAs, de vanligaste är React.js, Vue.js och AngularJS.

GraphQL

GraphQL ger ett mer effektivt sätt att hämta data från ett API jämfört med REST exempelvis. Det gör att sidorna laddar snabbare med mindre resurser.

Service workers

Service workers gör att sidan kan ladda i offline läge.


NWT använder PWA teknik baserad på Magento PWA studio och andra custom projekt där det krävs. Skicka ett meddelande om du vill veta mer om PWA.