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!”
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