Wanneer een Progressive Web App (PWA) in e-commerce?

Als er iets wordt bejubeld als ‘next gen e-commerce’ dan is het wel de inzet van Progressive Web Apps, kortweg PWA’s. Inmiddels hebben PWA's hun plek online al helemaal ingenomen en zijn er al flink wat standaard PWA-oplossingen op de markt. Maar wanneer is het zinvol om een PWA in te zetten, wat hebben termen als ‘headless’ en ‘decoupled’ ermee te maken en hoe kun je uiteindelijk beslissen of een PWA iets is voor jouw online business? Software Architect Bavo Janss neemt je mee in de wereld van PWA’s.

Logo PWA

Om te beslissen of een Progressive Web App een goede keuze is, is het handig om wat meer te weten over het ontstaan ervan. Van oorsprong is een Progressive Web App een technisch concept dat ook juist vanuit de techniek meerwaarde biedt. Aan de hand van de enorme verschuiving van desktopgebruik naar mobiel, het afgelopen decennium, is het beter uit te leggen waarom en wanneer een PWA interessant is.

De fundering van PWA’s

Dat smartphones ons gedrag, met name online, blijvend hebben veranderd, is geen nieuws. Als we de eerste generatie smartphones goed onder de loep nemen dan valt één ding wel echt op: surfen op het internet was best lastig. Het scherm was klein, de verbinding traag en de rekenkracht van de smartphone te gering om snel een website te kunnen tonen. De introductie van native apps heeft toentertijd veel van deze problemen opgelost:

  • Apps waren op veel vlakken nieuw, waardoor er veel ruimte was voor experimenten en vernieuwing. Zo ontstonden nieuwe technieken en nieuwe userinterfaces die we nu volledig intuïtief bedienen.
  • De apps draaiden rechtstreeks op de hardware van de smartphone en maakten daardoor slim gebruik van beschikbare capaciteit. Met minder processing power kon toch een snelle en responsive ervaring worden gecreëerd.
  • De matige internetverbinding dwong de eerste generatie appbouwers om creatief om te gaan met slimme en efficiënte downloads van een server. Zo waren digitale diensten voor gebruikers toch goed toegankelijk. Het principe van de klassieke client-server applicatie deed zijn herintrede, maar nu met een webserver als back-end.

Aan het laatste punt zitten ook de concepten ‘decoupled’ en ‘headless’ verbonden. Een applicatie die over het internet met een server communiceert - doorgaans met een API – noemen we decoupled. De server is zowel data-consumer als data-provider. Omdat de server zich niet meer bezighoudt met de opmaak of de formatting van de data, spreken we van een headless server. De head is naar de client verplaatst. De termen decoupled en headless zijn dus van toepassing op zowel native Apps als PWA's.

Een PWA voelt aan als gewone, native app

Misschien denk je nu: ‘Oké, maar wat moet ik precies met deze technische uitleg over de evolutie van apps en wat heeft het te maken met Progressive Web Apps? Smartphones zijn toch heel veel sneller geworden en een website doet het toch gewoon?’ Misschien een beetje cliché, maar het heeft er alles mee te maken.

Apps hebben laten zien dat op een klein scherm veel meer mogelijk is dan we dachten. App design heeft een enorme boost gegeven aan de opkomst van nieuwe technieken als CSS3 en HTML5. Technieken die ervoor zorgden dat web en app steeds meer op elkaar gingen lijken. Concepten als responsive design en mobile-first zijn daardoor de standaard geworden.

Voordelen van een PWA

Progressive Web Apps gaan nog een stapje verder dan ‘responsive’ en ‘mobile-first’. De interface reageert direct en heeft soepele overgangen, waardoor een PWA aanvoelt als een native app. De PWA is nog zeker geen één-op-één vervanging van een native app. Een native app heeft bijvoorbeeld toegang tot andere features en apps op jouw smartphone. Als dat noodzakelijk is voor de strategie, dan is een native app toch de betere keuze. Maar de PWA heeft wel een aantal grote voordelen:

  1. Je hebt slechts één PWA nodig, want een PWA werkt op alle devices: desktop, tablet en mobiel.
  2. Een Progressive Web App heeft maar één codebase, waardoor de ontwikkeling sneller en goedkoper
  3. Een PWA hoef je niet te installeren, maar je kunt er wel offline mee werken.
  4. Progressive Web Apps bestaan uit een aantal pakketjes code, opmaak en content die stukje bij beetje worden opgehaald door de browser. Zodra alles is opgehaald, reageert en communiceert een PWA vergelijkbaar met een native app.
  5. Zoekmachines zien PWA’s als een gewone website. Handig voor SEO.

We zien dan ook steeds vaker dat app-iconen op een smartphone niets meer zijn dan een snelkoppeling naar een website, meestal nog in een dun app-schilletje. Dé typische verschijningsvorming van een PWA. Twitter en AliExpress zijn de grote, bekende early-adopters van de PWA.

Handige features dankzij de techniek van PWA’s

In de kern is een Progressive Web App dus een technisch concept, gebouwd met standaard web technology. De inrichting van deze ‘stack’ maakt een PWA een PWA. Kenmerkend aan de techniek is de verplaatsing van de intelligentie en logica naar de browser. En er wordt slimmer omgegaan met interactie tussen client en server. Daardoor voelt de PWA sneller aan is er ruimte voor extra functionaliteiten, zonder dat de ervaring trager wordt. Voorbeelden daarvan zijn:

  • Meer gepersonaliseerde content voor gebruikers
  • Complexe structuren voor productselectie, zoals een configurator
  • User flows met veel alternatieve paden, zoals beslisbomen

Wanneer een PWA en wanneer niet?

Je kunt op twee manieren met een PWA aan de slag: een standaard off-the-shelf PWA’s of een maatwerk PWA. De off-the-shelf PWA’s bieden weinig extra boven een standaard Magento- of Shopware-oplossing, maar als jouw business geholpen is met een standaardoplossing dan is de vraag: waarom zou je dan voor een PWA kiezen? Een maatwerk Progressive Web App biedt in twee scenario’s meerwaarde in een commerce-oplossing:

  1. Voor bedrijven die complexe configureerbare producten Denk bijvoorbeeld aan het samenstellen van een racefiets, vakantie of een verzekering. Het gaat daarbij om producten die niet standaard beschikbaar zijn via Amazon of Bol.com, juist omdat ze zo configureerbaar of persoonlijk zijn.
  2. Bedrijven die samenwerken met veel verschillende partners en zo vraag en aanbod bij elkaar te brengen. Denk bijvoorbeeld aan een platform voor badkamerinrichting of bioscoopkaartjes waar de aangesloten partijen onderling concurreren op o.a. assortiment, beschikbaarheid, prijs, (lever)tijden, vervoerskosten, cross-sell, up-sell en natuurlijk commissie.

Bij een product met veel configuratievrijheid willen gebruikers vanzelfsprekend alle wenselijke combinaties proberen. Ze willen al zeker niet worden verrast door een onmogelijkheid of extra kostenpost ‘die niet in het systeem zat’. Een userinterface die mooi, logisch, flexibel is én voldoet aan alle configuratiemogelijkheden van een product, is een UX-excellentie. ‘Aan de achterkant’ vraagt dat om een online configurator die integraal onderdeel uitmaakt van het commerceplatform. Wat je in de back-end wijzigt, moet namelijk naadloos communiceren naar de front-end. En andersom geldt hetzelfde: alles dat in de front-end kan worden besteld, moet ook foutloos geproduceerd en geleverd kunnen worden. De kracht van de PWA in dit scenario, is het combineren van een soepele en logische interface met e-commerce. Zonder concessies te hoeven doen aan alle mogelijkheden. De PWA geeft daarmee een gezicht aan hyperpersonalisatie.

Een platform dat vraag en aanbod bij elkaar brengt, bevat een vergelijkbare complexiteit. De honderden, misschien wel duizenden, regels die een dergelijk platform bevat, wil je niet centraal beheren en onderhouden. Met API-koppelingen kan zo’n landschap rechtstreeks gebruikmaken van realtime data van de leveranciers. De kliks en keuzes van gebruikers worden doorgestuurd naar alle leveranciers. Interessante cross- en upsell suggesties worden daardoor niet langer bepaald door de logica van de website, maar door de hoogste bieder. Hetzelfde kan natuurlijk gelden voor de beste pakketprijs, commissie over de deal of aangeboden betaalmethoden. De mogelijkheden zijn in dat opzicht eindeloos. Omdat de PWA beslissingen kan nemen op basis van externe bronnen, kan de PWA zich dynamisch aanpassen aan het laatst ontvangen bericht. Zonder dat de gebruiker het gevoel heeft te zitten wachten. Hier is de PWA de regelaar die veel databronnen handig combineert in een logische interface.

Meerwaarde voor gebruikers van jouw e-commerceoplossing

We hebben je inzicht gegeven in wat een PWA is, maar ook wat niet. Wat de voordelen en nadelen van een PWA zijn ten opzichte van een native apps en ten opzichte van een mobiele website. Of een PWA iets voor jouw bedrijf is, hangt niet alleen af van uw huidige business. Het hangt ook af van toekomstplannen. Met een steeds grotere rol van de grote marketplaces zoals Bol.com en Amazon, zal door bedrijven bij configureerbare producten of een platformstrategie steeds vaker meerwaarde worden gezocht in betere online ervaringen en meer maatwerk voor de eindgebruiker. Een PWA excelleert in dit soort omgevingen.

bavo-j1.png
Meer weten over PWA's?

Software Architect Bavo gaf ook een webinar. Kijk de webinar terug. Of vrijblijvend sparren over jouw e-commercevraagstuk?

Neem contact op