PWA - Känslan och funktion av en app

Tänk om din site hade laddat omedelbart, kändes som en app och hade samma fantastiska UX/UI som en app. Dessutom fungerar det i webbläsaren utan något krav på att du ska ladda ned något. Det är i princip vad en PWA är – Utvecklingen av webben har tagit nästa steg och skapar en ny standard för hur man bygger moderna och snabba webbsidor idag. PWA är ett koncept som Google tagit fram och som kan användas av alla.

Kontakta oss

Vad är PWA eller progressive web apps?

En progressive web app är en app fast i din webbläsare. Den fungerar som en app i din mobil, kan läggas till i din hemskärm och användas offline. Med andra ord kombinerar denna teknik fördelarna med en website och en app som du installerar i mobilen. De flesta PWA är också byggda med en modern javascript teknik som också gör att känslan är blixtsnabb och smidighet. Detta kallas ofta också en SPA eller en single page application. 

Tekniken lämpar sig också för användare med långsam uppkoppling då trafiken normalt minimeras för bästa möjliga hastighet.

Just nu går utvecklingen blixtsnabbt och detta kommer att bli en ny standard för hur du bygger e-handel och web framöver.

Enligt google är en PWA

  • Pålitlig – Laddar omedelbart och visar aldrig downasaur, även i osäkra nätverksförhållanden.
  • Snabb – Svarar snabbt på användarinteraktioner med silkeslena animeringar och utan janky rullning.
  • Engagerande – Känns som en naturlig app på enheten, med en fantastisk användarupplevelse.

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

Google

Teknik för PWA & headless e-handel

Vue storefront

Vue Storefront är en av de mest populära ramverken för PWA-lösningar. Den är byggd med en headless arkitektur på ett modernt javascript ramverk. Vue Storefront ger en bra shoppingupplevelse och fungerar precis som en app. Samtidigt som de levererar enastående prestanda.

Läs mer här eller på vuestorefront.io

Magento PWA studio

PWA studio är byggt på react.js och är Adobe/Magento ”officiella” approach till PWA. Vi är en Magento/Adobe professional partner och använder denna teknik när det är mest lämpligt av dessa.

Läs mer här

Varför PWA

Det finns många anledningar till att gå över till en PWA lösning. Det huvudsakliga är att användaren får en bättre upplevelse och hastighet. Här listar vi några av de mest användbara fördelarna för att driva din web och ehandel med denna teknik.

Hastighet / Core web vitals

Det som du först komme att märka är att siterna går snabbare än konkurrenterna och att känslan är blixtsnabb. Denna typ av lösning ger också oftast bättre resultat på tester som core web vitals, pingdom tools mfl. 

Ökad konverteringsgraden

Det finns många case där man kan visa på en ökad konverteringsgrad baserat på ett byte till en PWA teknik. Detta på grund av både hastighet, design och UX blir bättre med denna typ av teknik.

Mindre kostnad för hårdvara

Att hosta en website med ny modern teknik gör det mer lättviktigt och därför bör också hostingkostnaden gå ned.

Större engagemang

Genom att tillämpa samma principer som en app kan du också skapa ett större engagemang hos dina användare. Använd tekniker som att ”lägga till på hemskärm”, push notiser och offlineläget.

Upptid

Upptid är alltid viktigt inom ehandel och genom en PWA har du bättre möjligheter till högsta tänkbara upptid.

Design och innovation

Då tekniken är headless och frikopplad från e-handelsplattformen kan designen vara mer innovativ och flexibel design.

Utvecklarvänligt

Enklare att rekrytera (utvecklare gillar ny teknik)

Kriterier

App-like

Appar engagerar användarna mer. PWA känns som en app utan att du behöver installera den på din smartphone eller liknande. Det handlar också om känslan av att använda den och få en snabb respons på användarens interaktion.

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. Detta gör också att du direkt kan kommunicera med användaren om exempelvis kampanjer för din e-handel eller andra call to actions som du vill pusha för.

Connectivity independent

Service workers gör så att du kan använda siten offline. Det betyder också att siten blir snabbare och mer tillgänglig. Det betyder att fler användare kan vara på din site samtidigt. Exempelvis kan även användarna vara inne på din site när de saknar uppkoppling på flyget eller liknande.

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.

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

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.

Get in touch

Were to find us

Kungsholmstorg 16 

112 21 Stockholm