Progressive Web App (PWA)

De browser op onze mobiele telefoon gebruiken we het meest van alle apps. We zoeken vooral naar informatie via een zoekmachine en we hebben niet voor alles een mobiele app beschikbaar. Toch brengen we de meeste tijd door op native apps voor (social) media, gaming of onderlinge communicatie (zoals WhatsApp). Native apps geven een betere ervaring dan mobiele browsers, want apps zijn interactiever, gebruiksvriendelijker en meestal sneller.

Een Progressive Web App (PWA) biedt in dit geval de gulden middenweg. Een PWA heeft alle opties van een native app, maar dwingt je bezoekers niet om een app te downloaden en installeren. In dit artikel vertellen we wat een PWA precies is, wat de verschillen zijn met een responsive website en welke voordelen een PWA heeft. Ontdek hoe een PWA obstakels kan wegnemen en conversie kan laten verhogen door een gebruiksvriendelijke interface.

PWA als gulden middenweg

Het klinkt bijna logisch om als e-commerce partij, naast je webshop ook een app te laten ontwikkelen. Je moet de bezoekers (of klanten) dan wel overtuigen om naar de app store te gaan, de app te downloaden en deze ook daadwerkelijk iedere keer te gebruiken. Dit zijn best veel handelingen en de vraag is of de doelgroep dit zal doen. Daarom zie je in de praktijk dat bezoekers liever kiezen voor de mobiele website.

Een Progressive Web App (PWA) biedt hierin de gulden middenweg. Een PWA biedt (bijna) alle mogelijkheden van een native app in de vorm van een geoptimaliseerde mobiele versie van de webshop, die als een app op het beginscherm van een smartphone te zetten is.

Een PWA kan een betere gebruikerservaring bieden: de webshop blijft werken als de gebruiker offline is, je hebt de mogelijkheid push notificaties te sturen (iOS Safari is een uitzondering) en door pre-cachen verhoogt de snelheid en interactiviteit.

De prestaties van een PWA kunnen beter zijn dan een mobile first responsive website. De responsive website is geoptimaliseerd om flexibel om te gaan met verschillende beeldformaten, maar meestal niet in functionaliteit.

Verschil Progressive Web App en responsive website

Een responsive website is geoptimaliseerd voor diverse schermformaten, door elementen wel of niet te tonen. Of bijvoorbeeld door de positie te veranderen. Een PWA is volledig ontwikkeld voor mobiel gebruik en kan daardoor een andere (meer native) user interface hebben, met andere interacties. Een bijkomend voordeel van een PWA is dat deze ook offline werkt, maar zodra er weer verbinding is door background sync acties uitgevoerd worden. Een voorbeeld hiervan is het plaatsen van een order of het ophalen van actuele voorraad.

Zodra een PWA is toegevoegd aan het beginscherm ziet het er niet alleen uit als een app, maar krijgt de webshop een groot aantal functionaliteiten van een native app. Voorbeelden zijn het kunnen sturen van push notificaties of gebruik kunnen maken van de camera- en locatievoorzieningen. Bovendien opent een PWA fullscreen, waarmee de native app ervaring beter is.

Magento PWA Studio

In de Magento 2.3 release is een optie toegevoegd onder de naam PWA Studio. Een oplossing die grofweg uit twee delen bestaat: een toolset om de juiste data aan de frontend te krijgen en een aanpasbaar headless (voorbeeld)thema geschreven in het framework Reactjs. De huidige versie begint steeds volwassener te worden maar er liggen zeker nog uitdagingen voor PWA Studio: niet alle functionaliteiten zijn volledig uitgewerkt en modules van andere partijen zijn nog niet voorbereid op de stap naar PWA.

Bij XSARUS kijken we ook naar andere oplossingen, zoals de open source oplossing Vue Storefront. Dit is een complete headless en PWA ready oplossing, geschreven in Vuejs. Zoals onze succesvolle eigen Magento checkout.

Voordelen voor de gebruiker

Met een PWA is een 'app' downloaden hetzelfde als het klikken op een link. Bij het eerste bezoek kan de gebruiker een 'add to home screen'-pop-up getoond worden, om het toevoegen aan het beginscherm nog makkelijker te maken. De gebruiker krijgt daarmee dezelfde ervaring als het gebruik van een native app.

Omdat de webpagina’s volledig zijn geoptimaliseerd, zijn deze compact te downloaden en laden ze snel. Door pre-caching werkt de webshop ook zonder netwerk en kan de gebruiker offline winkelen. Zodra er weer verbinding met het netwerk is, kan een push notificatie gegeven worden zodat de gebruiker kan afrekenen. De loyaliteit van de gebruiker zal hoger zijn, omdat je direct op het apparaat van de gebruiker kan communiceren met relevante push notificaties zoals de orderstatus of een voorraadmelding.

Een PWA maakt het ook mogelijk om een push notificatie naar de doelgroep te sturen als de desbetreffende persoon in de buurt is van een fysieke winkel.

Is PWA de toekomst?

Bij een PWA ga je uit van de beleving van een mobiele gebruiker. Dit heeft ook z’n voordelen voor de indexering in Google, want Google kiest tegenwoordig voor een mobile first indexering. Om die reden is het heel belangrijk dat een e-commerceplatform goed presteert op mobiel. Niet vreemd dat Progressive Web Apps (PWA) een ontwikkeling en term is van Google. Sinds Chrome versie 73 wordt de techniek ook ondersteunt op alle desktop platforms (Chrome OS, Linux, Mac en Windows).

Een PWA is net als een normale webpagina gebouwd met HTML, CSS en JavaScript. Daardoor wordt een PWA volledig geïndexeerd door Google en andere zoekmachines. Bovendien door het op de juiste manier gebruiken van de PWA techniek is de kans groot dat de webshop een hogere ranking krijgt. De PageSpeed index op mobiel zal namelijk hoger zijn.

Een goed geoptimaliseerde PWA kan in twee seconden laden, zelfs op 3G. Dit kan bijdragen aan het reduceren van het bounce percentage en leiden tot een hoger conversie-ratio. Dit is een belangrijk voordeel van een PWA voor gebruikers. De gebruikerservaring, en daaraan gekoppeld de loyaliteit van de gebruiker, is hoger. Een hogere loyaliteit kan leiden tot een hogere klanttevredenheid.

Een ander voordeel van een PWA, is dat de content volledig onafhankelijk is van de frontend. Hierdoor is de content altijd up-to-date en vanuit één bron te beheren. Bijvoorbeeld vanuit een PIM-systeem. Ideaal als dezelfde content op meerdere kanalen bedient moet worden. Een juiste basis voor omnichannel aanpak.

Technisch is een snellere ontwikkeling van functionaliteiten mogelijk, hierbij valt te denken aan een nieuw contenttype blok. Daarbij is de down time bij het uitrollen van nieuwe versies minimaal, omdat de back- en frontend losgekoppeld zijn. Nieuwe versies worden bij het bezoek van de gebruiker opgehaald. De frontend blijft automatisch up-to-date bij de bezoekers.

Meer weten over een PWA?

Een PWA is niet een andere mobiele versie van het e-commerce platform, maar een speciaal ontwikkelde app met als doel een betere gebruikerservaring op mobiel te bieden. Hierdoor wordt de webshop gebruiksvriendelijker en betrouwbaarder, waardoor de kans groot is dat de mobiele conversie stijgt.

Een PWA biedt veel flexibiliteit en mogelijkheden, waardoor de ontwikkeling eigenlijk altijd volledig maatwerk is. Als de PWA eenmaal staat, is er minder onderhoud nodig en kan er meer gefocust worden op optimalisaties en nieuwe features. De initiële prijs voor een PWA is hoger dan een responsive website, maar lager dan een native app, en kan, zeker op mobiel, leiden tot een hogere conversie.