Een PWA biedt een betere gebruikerservaring en helpt bedrijven om meer potentiële klanten aan te trekken. PWA maakt gebruik van nieuwe web standaarden om dezelfde gebruikerservaring te bieden als met een native app. Dit betekent dat PWA’s sneller zijn dan traditionele webshops en ze werken ook offline of met slechte internetverbindingen. PWA’s zijn ook makkelijker te ontdekken door zoekmachines en ze kunnen gemakkelijk worden geïnstalleerd op het startscherm van een gebruiker, waardoor ze meer op een app lijken dan op een webshop. Dit alles maakt PWA’s perfect voor e-commerce bedrijven die willen profiteren van de voordelen van apps, maar ook willen blijven werken met hun huidige infrastructuur.
Wat is een PWA?
Een progressive web-app, algemeen bekend als een PWA, is een website of webshop die zich gedraagt als een app en is gebouwd met behulp van algemene web technologieën, waaronder HTML, CSS en JavaScript. Elk e-commerce bedrijf dat concurrerend wil blijven in de huidige markt, moet een sterke online aanwezigheid hebben. Maar alleen een webshop hebben is niet genoeg. Om echt te slagen in e-commerce, moeten bedrijven een soepele en naadloze gebruikerservaring bieden. Dat is waar progressive web-apps van pas kunnen komen.
Wat is het verschil tussen een PWA en een native app?
De PWA is een variant op de bekende native app, maar gebaseerd op webtechnieken. Een PWA benader je dus ook via je (internet)browser. Dat betekent dat de PWA geïndexeerd wordt in de zoekmachines (zoals Google) en kan worden beheerd als een webshop storefront (bijvoorbeeld door middel van een e-commerce platform als Shopware, Magento of Shopify). Een native app is een applicatie die is ontwikkeld in een bepaalde programmeertaal voor een specifiek platform, zoals iOS of Android. Daarom heb je voor elk platform waarop je wil deelnemen een aparte codebase nodig. PWA’s zijn dus ideaal als je snel een cross-platform app wilt die de functionaliteit van een native app biedt.
Voor- en nadelen van een e-commerce PWA
Veel partijen zijn ervan overtuigd dat PWA’s de toekomst zijn binnen de e-commerce. Maar voordat we daar uitspraken over kunnen doen is het goed om de voor- en nadelen van PWA’s even op een rij te zetten:
Voordelen van een e-commerce PWA
- Relatief voordelig
- Eenvoudig te ontwikkelen
- Binnen korte tijd te realiseren
- Boost SEO resultaten
- Snelle laadtijd
- Meer gemak voor de gebruiker
- Ook offline beschikbaar
- Mogelijkheid push notificaties naar Android gebruikers te versturen
Nadelen van een e-commerce PWA
- Maakt niet volledig gebruik van de functionaliteiten van het besturingssysteem
- Geen app marketing mogelijk via de app stores
- Native apps hebben betere prestaties
- Geen mogelijkheid voor push notificaties in iOS
Hoe maak je een PWA?
Vaak bieden e-commerce platformen (Shopware, PrestaShop, Magento) de mogelijkheid een plugin, module, app of extentie toe te voegen om daarmee redelijk eenvoudig een PWA beschikbaar te stellen aan de gebruikers. Het is natuurlijk ook mogelijk om een PWA op maat te (laten) ontwikkelen.
PWA e-commerce ontwikkelingstools
Er zijn nu veel manieren om progressieve web-apps te bouwen, ongeacht het JS-framework naar keuze. Het is iets dat steeds meer e-commerce platformen aanbieden als kant-en-klare functionaliteit in de vorm van een plugin, module of extensie. Wat weer mooi aansluit bij de composable e-commerce architectuur. De programmeertalen die hier voornamelijk voor gebruikt worden:
Vue.js
Gridsome – Gridsome is een modern framework voor webontwikkeling voor het maken van snelle en veilige webomgevingen die overal kunnen worden ingezet. Statische HTML-bestanden worden gegenereerd om SEO-vriendelijke opmaak te creëren die na het laden in de browser wordt gehydrateerd in een door Vue.js aangedreven SPA.
Source plugins halen inhoud op uit lokale bestanden of externe API’s en slaan de gegevens op in een lokale database. Met een uniforme GraphQL-gegevenslaag kun je alleen de gegevens extraheren die je nodig hebt uit de database en deze gebruiken in jouw Vue.js-componenten. De gegevens worden tijdens de build gegenereerd en opgeslagen als statische JSON.
Nuxt.js – Nuxt.js is een gratis en open source JavaScript-bibliotheek op basis van Vue.js, Node.js, Webpack en Babel.js. Nuxt is geïnspireerd op Next.js, een framework met een vergelijkbaar doel, gebaseerd op React.js. Het framework wordt beschikbaar gesteld als een “Meta-framework voor universele toepassingen”.
React
Next.js – Next.js is een open-source framework en staat om goede redenen bovenaan de lijst van StaticGen. Het is gemaakt door Vercel en het maakt React-gebaseerde webapplicaties mogelijk met server-side rendering en het genereren van statische websites.
Gatsby – Gatsby is een open-source statische site generator die bovenop Node.js is gebouwd met behulp van React en GraphQL. Het biedt meer dan 2500 plug-ins om statische sites te maken op basis van bronnen als Markdown-documenten, MDX, afbeeldingen en tal van e-commerce platformen zoals Magento, Shopware en Spryker.
Angular
In tegenstelling tot de twee andere frameworks heeft Angular geen tools om het jou te vergemakkelijken een PWA te ontwikkelen, maar je kunt de documentatie of tutorials raadplegen om aan de slag te gaan.
Offline mogelijkheden van een PWA
Offline functionaliteit is vaak het centrale argument voor PWA’s. Hoewel dit niet de enige coole functie is, kan ik geen bericht over PWA’s schrijven zonder erover te praten. En met Gatsby is het eenvoudig te realiseren. Onder de motorkap maakt dit gebruik van sw-precache van Google, een bibliotheek die een service worker genereert die automatisch jouw websitebestanden in de cache opslaat voor offline gebruik.
Een service worker is als een achtergrondtaak die buiten de context van de DOM wordt uitgevoerd zonder de gebruikersinterface te beïnvloeden. Het is handig voor de offline modus, omdat het verzoeken kan onderscheppen en aangepaste caching-logica heeft. Met Gatsby worden alle HTML en JavaScript in de cache opgeslagen en offline gehaald uit de cache.
Wat is de impact van een PWA op Google’s web core vitals?
Hoewel een PWA wel door Google wordt gewaardeerd heeft het (nog) geen invloed op je web core vitals score in Lighthouse of pagespeed insights. Er wordt alleen aangegeven of er een PWA aanwezig is of niet. Vooral de impact op SEO door de snellere laadtijd is een belangrijk voordeel waarom het aangeraden wordt om een PWA te gebruiken.
Advies over en begeleiding bij het toevoegen van een e-commerce PWA
Twijfel je of het toevoegen van een PWA de juiste keuze is voor jouw e-commerce omgeving, heb je hulp nodig bij het nemen van deze beslissing of het bij het begeleiden van de uitvoering? Schakel dan de e-commerce consultants en project managers van Legacy in. Wij hebben brede kennis en ervaring en zetten voor jou de juiste experts aan het werk om de lancering van de PWA soepel te laten verlopen. Neem contact met ons op of plan een kennismakingsgesprek.