Progressive Web Apps: The next big thing!

The next big thing!

Een webshop die super snel is, geschikt voor alle devices, SEO-proof is en waar jouw bezoekers zelfs offline kunnen shoppen. Dat klinkt toch haast te mooi om waar te zijn? Toch maken Progressive Web Apps dit allemaal mogelijk.

Wat is PWA nou precies?


Progressive web apps worden ook wel ‘The next big thing after responsive webdesign’ genoemd. Er zijn geen aparte URL’s meer nodig die onderscheid maken tussen de desktop en mobiele site. (zoals mobiel.vendic.nl). Een PWA bedient namelijk alle denkbare schermgroottes. Deze ontwikkeling brengt dus echt een digitale revolutie teweeg, de splitsing tussen websites en native apps wordt volledig overbodig. Een PWA is een geavanceerder website, die hetzelfde werkt als een app. Zo biedt het alle functionaliteiten van een app, zonder de app te hoeven downloaden. Dat maakt een bezoekje aan de Play- of Apple store overbodig en doordat er niets gedownload hoeft te worden is de PWA altijd up-to-date.

Al met al heeft een PWA het doel om het beste van het web en apps samen te brengen. Wij zien het als de toekomst voor (Magento) webshops. Benieuwd waarom? Dat lees je hier:

  1. 1INSANE SPEED

De Snelheid is in onze ogen echt het grootste voordeel. De shop wordt in 1 keer geladen, en heeft vervolgens geen laadtijd meer. Heerlijk; het lange wachten bij het openen van een nieuwe pagina is verleden tijd.

  1. 2(H)APPIE-FEELING

Doordat een PWA veel overeenkomsten heeft met een app, komt de gebruikerservaring daarmee ook overeen. Het voelt alsof je door en native app aan het scrollen bent. De laadtijd is razend snel, en de PWA kan vastgezet worden op de homescreen. Nadat de PWA is vastgezet verdwijnt de urlbalk in de browser, en komt er een full native ervaring. Ook is het mogelijk om push notificaties te sturen. Hierdoor kunnen de gebruikers op de hoogte worden gebracht over nieuwtjes van de shop.

  1. 3CONVERSIEBOOST

Er zijn al mooie PWA resultaten beschikbaar. Neem maar eens een kijkje op www.pwastats.com. Deze stijgingen hebben grotendeels weer te maken met de bovengenoemde “insane speed” en de “(h)appie-feeling”. Daarnaast werkt een PWA conversie bevorderend doordat het mogelijk is om offline te shoppen.

Bij het uitvoeren van een update is er geen down-time meer, dit is bij traditionele webshops vaak wel het geval. Dit kan met een PWA geen reden meer zijn om conversies mis te lopen.

  1. 4LAGERE KOSTEN

Bij een PWA shop liggen de ontwikkelings- en onderhoudskosten gemiddeld lager dan bij traditionele Magento 2 shops. Het uitvoeren van updates kost minder tijd en daarnaast ontwikkel je met een PWA shop een app en webshop in één. Dat zou afzonderlijk van elkaar veel duurder zijn geweest. Naast de ontwikkelingskosten scheelt het ook in kosten op het gebied van dubbel beheer en marketing.

  1. 5SEO - PROOF

Doordat een PWA shop megasnel en gebruiksvriendelijk is, heb je een grotere kans op een hoge score in Google. Want dat zijn immers peilers die Google heel belangrijk vind. Ook indexeert Google sinds kort mobile first, daarmee geeft Google de voorkeur aan de mobiele versie van de shop.

Zijn er ook nadelen?

Naast de vele voordelen is er een (tijdelijk) nadeel die we willen benoemen. Een PWA kan gewoon worden weergegeven op een iOS device, maar er missen op dit moment nog een aantal werkende features. Zo kunnen er helaas nog geen pushberichten worden verstuurd naar iPhone gebruikers, want dit wordt nog niet ondersteund door de Safari browser.

Er is al wel een hoopvolle ontwikkeling te zien. Sinds de laatste iOS update (11.3) is er alweer meer mogelijk op het gebied van PWA.

PWA & Headless

Een andere ontwikkeling waar wij volop mee bezig zijn is headless e-commerce. Het klinkt cool, en dat is het ook. Voor het gemak vergelijken we een traditionele webshop met een headless shop. Traditionele webshops hebben hun eigen achter- en voorkant. Dit noemen we een back-end en front-end. Er komt via de voorkant een bestelling binnen, en die wordt aan de achterkant afgehandeld.

Bij het maken van een webshop met een headless structuur, is er geen vaste front-end en back-end, deze worden als het ware losgekoppeld van elkaar. Het voordeel van headless is dat je niet vast zit aan maar één platform. Je kunt voor al jouw activiteiten de beste software omgeving kiezen. Deze omgevingen kun je vervolgens aan elkaar koppelen met een API. Voorbeelden hiervan zijn Wordpress en Contentful.

Zo kunnen wij het beste deel van Magento; de back-end, koppelen aan een PWA storefront, die we als Front-end gebruiken. Doordat de REST API sterk verbeterd is bij Magento 2, kan er een hele stabiele koppeling gemaakt worden. Hieronder hebben we het ter verduidelijking grafisch uitgebeeld:

headless

Wat zijn de ervaringen tot nu toe?

De techniek is uiteraard prachtig, maar het gaat uiteindelijk om het resultaat. Hieronder hebben we een aantal PWA-ervaringen onder elkaar gezet:

  • Therake.com meldt dat het organische bezoek met 80% is gestegen na de switch naar PWA
  • Uber liet een PWA shop bouwen om ook snel te zijn op 2G. Het resultaat mag er zijn; een laadtijd van onder de 3 seconden op 2G
  • Pinterest ervaart een engament stijging van 60%
  • Lancôme ziet een conversiestijging van 17%
  • Nog niet onder de indruk? Neem dan eens een kijkje bij de pwastats


PWA beschikbaar maken voor het MKB

De bovenstaande resultaten spreken voor zich, wij zijn erg onder de indruk! PWA toont in onze ogen enorm veel potentieel. Nu wordt het de uitdaging om PWA naar de gehele breedte van de e-commerce markt te brengen. Hier wilden wij graag onze schouders onder zetten. Om die reden hebben wij een bijdrage geleverd aan het opensource project “VueStorefront”. We hebben het Nederlandse vertaalpakket gerealiseerd en zijn daarmee officieel de eerste Nederlandse partner van Vue Storefront .

Het VueStorefront project biedt de mogelijkheid om de innovatieve PWA technologie snel en effiecient uit te rollen, waardoor het voor het gros van het e-commerce landschap in Nederland bereikbaar wordt.

PWA demo shop

Om deze fantastische ontwikkelingen aan de levende lijve te ervaren hebben we onze eigen website, waar je nu op zit, PWA gemaakt en zijn we aan de slag gegaan met onze eigen PWA demostore . Je kunt ook een kijkje nemen op de Vuestorefront demo: demo.vuestorefront.io.

Denk jij nu “Supertof, ik wil ook PWA!” Neem dan contact met ons op. We kunnen je er alles over vertellen en helpen je graag verder.


contactopnemen

Author