De voortdurende evolutie van Progressive Web Apps

Wanneer je aan online shopping denkt, heb je je smartphone al bijna in de hand. Uit recent onderzoek naar shopgedrag in de VS bleek dat ruim de helft (51,4 procent) van het online winkelverkeer via mobiele devices kwam. Dan is het ergens toch gek dat nog geen derde (31 procent) van de inkomsten aan die meerderheid viel toe te schrijven. Blijkbaar hebben veel retailers voor mobiele conversie en het optimaliseren van multichannel-ervaringen nog een lange weg te gaan.

Door: Marc Wiseler

Gelukkig gloort er licht aan de horizon in de vorm van Progressive Web Apps, waar Twinkle vorig voorjaar al uitgebreid over schreef. PWA’s zijn ondertussen steeds toegankelijker geworden voor retailers, mede door Adobe’s release van PWA Studio voor Magento begin dit jaar.

Dankzij de groeiende ondersteuning krijgen PWA’s een grotere fanbase en verdwijnen kinderziektes als sneeuw voor de zon. Waar Google Chrome vooropliep in de adoptie van PWA’s, zijn nu ook Firefox, Safari, Opera en andere browsers overstag.

Progressief

De evolutionaire overgang van apps naar PWA’s doet denken aan die van conventionele desktop-sites naar responsive webdesign, vijf jaar geleden. De grenzen tussen mobiele apps en mobiele sites vervagen dankzij een nieuwe frontend architectuur. Ontwikkelaars kunnen gebruikmaken van open web API's en app-achtige ervaringen bieden, maar dan direct in de browser. Aangezien alleen de ‘schil’ van de PWA – bijvoorbeeld in de vorm van HTML of JavaScript – wordt bewaard op de telefoon, neemt hij weinig ruimte in en wordt de data bij gebruik (progressief) ingeladen. De snelheid en aantrekkelijkheid van PWA’s stimuleren online conversies en reflecteren de in-store ervaring steeds beter. Zo kunnen ze bijvoorbeeld uiteindelijk de kassa in de winkel te vervangen.

Praktijk versus verwachting

Natuurlijk kunnen native apps zo goed in elkaar zitten dat klanten die verkiezen boven de desktopversie. Het probleem met zulke apps is dat ze duur zijn in bouw en onderhoud én dat klanten eigenlijk alleen apps gebruiken van hun favoriete merken. Volgens Forrester kunnen de meeste merken nog niet eens 10 procent van hun klanten ertoe bewegen hun app te downloaden. In de praktijk handelt hun mobiele site het overgrote deel van de klantinteracties dus af. Precies voor zo’n scenario’s biedt de PWA uitkomst. Wanneer je als klant in een dergelijk geval op de mobiele (PWA)site belandt, krijg je een gebruiksvriendelijke, app-achtige ervaring met alle bijbehorende extra’s:

• Snellere browsers
  PWA's zijn sneller, ze scrollen soepeler en pagina’s hoeven niet te herladen. Early adopters zoals AliExpress hebben sinds de overstap een 100 procent stijging van conversiepercentages gezien. Voor de sceptici biedt Google een testtool (Lighthouse) waarmee je de prestaties van je PWA kunt benchmarken.
• Directe actie
  PWA’s werken via de browser, waardoor een extra handeling als downloaden of installeren niet meer nodig is – laat staan het zoeken naar je wachtwoord voor de Play Store of ITunes.
• Push-notificaties
  PWA’s ondersteunen push-meldingen in de browser, waardoor je dankzij een snelle aanmelding via een enkele klik direct vanaf de PWA nieuws ontvangt over verzending, voorraad en aanbiedingen.
• Rapid re-engagement
  Net als bij een native app kan een PWA als icoon worden opgeslagen op het beginscherm, waardoor snelle herhalingstoegang mogelijk is zonder naar je browser te moeten gaan en een URL in te voeren. Bovendien werken PWA's in full-screen modus, waarbij de URL-balk van de browser en de navigatietools aan de onderkant van het scherm worden verborgen. Voor een app-achtige look and feel.
• Veiligheid
  PWA's moeten HTTPS-verbindingen gebruiken, wat extra veiligheidsgaranties met zich meebrengt. De keerzijde hiervan zijn de extra kosten voor SSL/TSL-certificering.
• Deelbaarheid
  Een PWA zorgt ervoor dat elke pagina een unieke URL heeft die gemakkelijk kan worden gedeeld en verspreid over andere toepassingen en sociale kanalen.

Omdat PWA’s met veel van dezelfde moderne frontend frameworks zoals Javascript, HTML en CSS kunnen worden gemaakt, hoeven ontwikkelaars geen specifieke code voor iOS of Android meer aan te leren en onderhouden. Er is maar één frontend site nodig, die in alle browsers en apparaten hetzelfde werkt. PWA’s kunnen van grote meerwaarde zijn bij het behalen van doelstellingen op het gebied van e-commerce en in-app aankopen. Betaalmethodes en kassa kunnen worden geïntegreerd in een PWA en functioneren op dezelfde manier als in de browser, zonder dat er een specifieke app-store-vereiste nodig is, waaraan je al snel 5-30 procent van je inkomsten moet afdragen.

Vindbaarheid

In tegenstelling tot wat vaak gedacht wordt, zorgen PWA’s en de verbetering in performance die daarmee gepaard gaat voor een betere vindbaarheid in Google. Voor velen hét argument ten opzichte van native apps. Door je PWA aan een set richtlijnen en best practices te houden die zijn opgesteld door Google, zul je al snel zien dat de vindbaarheid annex relevantie van je site verbetert. Bovendien weegt Google ook mobiele performance mee in zijn ranking van zoekresultaten.

Cross-channel 2.0

PWA's maken het mogelijk om functionaliteit, zoals push-notificaties en locatie in de architectuur van een website in te bouwen. Dit geeft een heel persoonlijke cross-channelervaring, tegen een fractie van de kosten van een mobiele app. Denk aan een native integratie met de camera van het apparaat voor het scannen van barcodes in het schap en geïntegreerde betalingen met Google voor aankopen in de winkel. Allemaal mogelijk met PWA’s. Het bijkomende voordeel is dat PWA’S direct toegankelijk zijn via de browser, en daarbij snel en betrouwbaar zijn – zelfs zonder wifi of met heel traag internet.

Verkoophulp

Ook voor winkelpersoneel kunnen PWA’s een wereld van verschil maken. Shoppers verwachten dat verkopers kennis hebben van online producten, wat een logistieke uitdaging kan zijn. PWA’s hebben echter het potentieel om bestaande POS-systemen en platformen voor winkelmedewerkers te vervangen en te voorzien in een snelle, efficiënte en rendabele manier om producten online en in de winkel te vinden, checkout te faciliteren, retourzendingen af te handelen en verkopen te redden. En dat allemaal vanaf de smartphone van je medewerker.

Toekomstbeeld

PWA’s hebben nu al bewezen prestaties te leveren op native-app-niveau, die tot op heden in mobiele browsers ontbraken. De conversie is gemiddeld 30 tot 50 procent hoger, in sommige gevallen zelfs 400 procent - afhankelijk van wat eraan voorafging. Hoewel veel innovatieve en vooruitstrevende bedrijven al overstag zijn, brengt de overstap toch nog een investering met zich mee. Nu de integratie van Adobe en Magento een feit is, kan de focus worden verlegd naar het verlagen van de totale cost of ownership en het verbeteren van het gebruiksgemak en de tijd die implementatie kost. PWA’s moeten immers uiteindelijk voor iedereen toegankelijk en beschikbaar zijn.

Do’s
* Leer de Javascript grondbeginselen van PWA, waaronder React, Redux en Webpack (bijvoorbeeld met behulp van PWA Studio)
* Experimenteer (hackathon-stijl) met PWA-technologieën of vraag teams om input voor open source projecten als leeroefening om te wennen aan de PWA-technologieën.
* Gebruik eenvoudige PWA's zoals Starbucks om te ervaren hoe het werkt en te kunnen vergelijken met native apps. Verplaats je alvast in jouw klant.

Don’ts
* Houd niet al te rigide een alles-of-niets-aanpak aan. PWA kan ook stapsgewijs worden geïntegreerd en A/B getest. Begin klein en ga geleidelijk over.
* Begin niet te snel. PWA’s zitten nog vroeg in de Hype Cycle van Gartner, dus niet alle paden zijn al volledig bewandeld. Begrijp eerst volledig wat nodig is en zorg ervoor dat je team klaar is om het te bouwen.

Marc Wiseler is head of solutions consulting bij Magento.