Progressive Web Apps: The next big thing!

The next big thing!

Een webshop die zich gedraagt als een app, offline beschikbaar is en toegevoegd kan worden aan elk willekeurig device. Dat is de kracht van Progressive Web Apps (PWA).

Maar wat is een PWA eigenlijk?


PWA is een website vermomd als een app. Die wordt gestart vanuit de webbrowser en net als een native app kan de PWA worden toegevoegd aan het beginscherm van een device naar keuze. Verschil is echter dat de gebruiker de app niet hoeft te downloaden. Dit zorgt ervoor dat er resources van het toestel bespaart blijven, maar het betekent ook dat de app altijd up-to-date is en zelfs offline beschikbaar is! Nooit meer apps updaten en bij slecht bereik toch kunnen genieten van de online gemakken. Klinkt goed toch?

De PWA die opgeslagen is, laadt de responsive website vanuit de cache omgeving. Doordat de website aanwezig is op het device heeft de applicatie toegang tot de functies van het toestel, zoals de camera, microfoon, GPS en kan het ook pushberichten versturen. Zo kun je met PWA je klanten op de hoogte houden via de app, wat de binding en loyaliteit van de klant vergroot. Deze ontwikkeling brengt een digitale revolutie teweeg, de splitsing tussen websites en native apps is overbodig.

Een groot voordeel van de PWA-techniek is dat deze is gebaseerd op open standaarden (= publiekelijk beschikbaar, de specificaties van de standaard mogen vrij van licentierechten worden toegepast, gebruikt en gehanteerd. Bron: Wikipedia): PWA’s worden opgebouwd uit HTML, CSS en JavaScript. De apps zijn hierdoor sneller en goedkoper dan een native app. Native apps moeten vaak nog apart worden ontwikkeld voor Android en iOS toestellen, dit betekent naast hoge ontwikkelkosten ook dat ze afzonderlijk van elkaar moeten worden onderhouden.

Maar er is meer! De voordelen stapelen zich op:

  1. 1INSANE SPEED

De snelheid is in onze ogen het grootste voordeel. De shop wordt in 1 keer geladen en heeft vervolgens geen laadtijd meer. Uit onderzoek blijkt dat 53% van de gebruikers de site verlaat bij een laadtijd van 3 seconden. Ook verwachten ze dat de site snel blijft en snel reageert. (bron: Google PWA)

  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 een native app aan het scrollen bent. De laadtijd is razend snel, en de PWA kan toegevoegd worden aan het beginscherm. Nadat de PWA is vastgezet verdwijnt de urlbalk in de browser en ontstaat 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. Voordeel is dat de app kan worden toegevoegd aan het beginscherm zonder tussenkomst van App Store/Google Play Store. Google Chrome helpt zelfs een handje en geeft bij bezoek een notificatie zodat de gebruiker weet dat hij de PWA kan vastzetten op zijn device. (Bron: Greenice)

  1. 3CONVERSIEBOOST

Er zijn al mooie PWA resultaten beschikbaar. Neem maar eens een kijkje op PWAstats. 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.
Doordat de back-end en front-end afzonderlijk van elkaar werken, is er bij het uitvoeren van een Magento (back-end) update geen down-time meer, dit is bij traditionele webshops vaak wel het geval

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. 4ontwikkelings- en onderhoudskosten

Bij een PWA shop liggen de ontwikkelings- en onderhoudskosten gemiddeld lager in vergelijking met native apps. 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 beheer je als webshop eigenaar alles in één backend en niet apart van elkaar. Dit scheelt natuurlijk enorm veel tijd en verhoogt de betrouwbaarheid.

  1. 5SEO - PROOF

Een PWA is super snel en gebruiksvriendelijk, hierdoor heb je een grotere kans op een betere ranking in zoekmachines. Google merkt dit aan als een van de belangrijke rankingfactoren. Ook indexeert Google mobile first, de voorkeur gaat dus uit naar de mobiele versie van de shop. PWA is progressive, het werkt voor iedere gebruiker ongeacht de browser, omdat het gebouwd is met normale webtechniek. Met PWA is jouw shop zowel voor desktop, tablet of mobiel altijd geoptimaliseerd.

iOS & PWA

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 is er alweer meer mogelijk op het gebied van PWA. Het is wachten tot Apple helemaal overstag gaat en PWA omarmd, zoals wij dat al doen.

PWA VS native app

Progressive Web Apps zijn op dit moment niet in staat om een native app op alle gebieden te vervangen – en dat zal in de toekomst ook niet gaan gebeuren. Native applicaties die zijn ontwikkeld voor een besturingssysteem hebben namelijk altijd de meeste mogelijkheden om toegang te krijgen tot de functies van het toestel en de systeemresources. Toch hebben de meeste apps niet zo’n uitgebreide toegang tot de hard- en software nodig. Dat maakt het PWA-formaat voor veel applicaties zeker interessant.

PWA & Headless

Een andere coole ontwikkeling waar wij volop mee bezig zijn is headless e-commerce. Ter verduidelijking 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 het front-end een bestelling binnen, en die wordt in de back-end 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. 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 voor het MKB

Om deze resultaten kenbaar te maken bij het MKB, de voordelen beschikbaar te stellen voor de e-commerce zijn wij bij Vendic een samenwerking aangegaan met Vue Storefront. Dit is een opensource project die de mogelijkheid biedt om de PWA technologie snel en efficiënt uit te rollen, waardoor het voor het gros van de e-commerce bedrijven in Nederland bereikbaar wordt. Vendic heeft het Nederlandse vertaalpakket gerealiseerd en daarmee zijn wij officieel de eerste Nederlandse partner van Vue Storefront .

Inkijkje in een PWA keuken

Na al die mooie verhalen benieuwd geworden hoe zo’n PWA er nou uitziet? Dan is onze Meubelplaats.nl een mooi begin. Dit is ‘s Nederlands eerste PWA Vue Storefront webshop. Een primeur in e-commerce land, waar wij ontzettend trots op zijn!


Enthousiast geworden van de PWA mogelijkheden? Neem vrijblijvend contact met ons op! Wij helpen je graag verder.


contactopnemen