Een introductie tot Progressive Web Applications (PWA’s)

In de geschiedenis van de e-commerce zijn er drie belangrijke mijlpalen: de start van telewinkelen in de jaren 70, een gepensioneerde vrouw die als eerste ter wereld thuis winkelt in de jaren 80, en de uitvinding van het wereldwijde web in de jaren 90. Die belangrijke momenten zijn al even geleden, maar meer recent zien we de stijgende populariteit van mobile commerce, kopen via sociale media, en Amazon.

Al deze ontwikkelingen gaan hand in hand met de wereldwijde vooruitgang van technologie en, specifieker, het internet. Nu steeds meer mensen online gaan, smartphones kopen en toegang hebben tot snel internet, evolueert de e-commerce in recordtempo.

En dat is waar Progressive Web Applications (PWA’s) in beeld komen.

Sinds Google de term in 2015 heeft bedacht, veranderen PWA’s het app-landschap. Het gebruik ervan neemt dan ook toe. Uit gegevens blijkt dat desktop-PWA-installaties in slechts één jaar tijd met 270% zijn gestegen. Experts voorspellen dat de marktwaarde van PWA’s in 2027 meer dan 10 miljard euro zal bedragen.

PWA’s kennen dus een duidelijke groei, maar uit cijfers blijkt dat het voor een kwart van de e-commercebedrijven nog niet helemaal duidelijk is wat Progressive Web Applications zijn en hoe ze die kunnen gebruiken. Daarom duiken we in dit artikel even in de wereld van PWA’s: wat zijn ze, hoe worden ze ontwikkeld en gebruikt, en welke voordelen bieden ze jouw bedrijf?

Wat zijn Progressive Web Applications?

Een Progressive Web App is een soort webapplicatie via het internet. Je kan het zien als een website die werkt zoals een native app (die normaal gezien worden ontwikkeld voor gebruik op een specifiek platform of toestel). PWA’s gebruiken webtechnologie, of de tools en talen die toestellen gebruiken om met elkaar te communiceren, om te functioneren. Ze kunnen geoptimaliseerd worden zodat ze op elk type toestel en in alle belangrijke browsers werken. PWA’s kunnen bovendien offline gebruikt worden. Je kan naar een PWA gaan via een browser – je hoeft dus geen app of software te downloaden.

Een PWA heeft de volgende eigenschappen:

– Progressief: PWA’s zijn gebouwd met een progressieve verbetering als kern, waardoor ze op elk toestel werken en gebruik maken van de specifieke features van het toestel en de browser van de gebruiker.

– Vindbaar: Je kan de app vinden via een zoekmachine.

– Makkelijk te installeren: Je kan een PWA op het startscherm van je toestel installeren of op een app launcher.

– Deelbaar: Je kan de URL van een PWA delen.

– Connectiviteits-onafhankelijk: Een PWA kan offline werken of met een internetverbinding van slechte kwaliteit.

– Re-engageable: Een PWA kan worden gebruikt om pushmeldingen te verzenden.

– Responsive: Je kunt het gebruiken op elk apparaat met een scherm en browser.

Voordelen van PWA’s

De voordelen van PWA’s zijn:

Betrouwbaar

Of je nu een sterke internetverbinding hebt of niet: PWA’s laden onmiddellijk. Daardoor bieden ze een snelle en betrouwbare gebruikerservaring. Ze nemen ook minder opslagruimte in dan native apps.

Geen installatie nodig

Een PWA wordt niet geïnstalleerd via een app store. Gebruikers kunnen een PWA direct openen via een url of aan hun startscherm toevoegen. Dat maakt het eenvoudig om de PWA te gebruiken. Het neemt met andere woorden heel wat frictie weg, waardoor de retentie verhoogt.

Snelle laadtijd

Door webtechnologie zoals data caches te gebruiken, hebben PWA’s een erg snelle laadtijd. Dat zorgt voor een goede gebruikerservaring en een beter retentiepercentage. PWA’s werken ook offline of met een slechte internetverbinding.

Werkt op elk toestel

PWA’s zijn ontwikkeld om voor iedereen te werken, ongeacht het type toestel dat iemand gebruikt. Ze werken op elke schermgrootte en gebruikers krijgen overal dezelfde ervaring, zelfs als ze de PWA op verschillende apparaten gebruiken.

Het beste van web en app

PWA’s combineren het beste van web- en apptoepassingen. Daardoor bieden ze een betere ervaring voor gebruikers en bedrijven. Ze kunnen de functies van de browser gebruiken en van het toestel waarop ze worden gebruikt. Denk bijvoorbeeld aan pushmeldingen, camera en gps. Je kan PWA’s bovendien makkelijk vinden via zoekmachines.

Minder duur en tijdrovend om te ontwikkelen

Wil je een native app ontwikkelen, dan moet je vaak twee versies voorzien: een voor Android en een voor Apple iOS. Met PWA’s moet je maar één app maken die werkt op alle toestellen. Dat verlaagt de kosten én bespaart tijd.

Automatische updates

In tegenstelling tot native apps kunnen PWA’s automatisch worden bijgewerkt. Je hoeft gebruikers geen melding te sturen dat er een nieuwe update beschikbaar is of om hun toestemming te vragen om de app te updaten. Met een PWA gebruiken ze dus altijd de nieuwste versie.

Pushmeldingen

Met PWA’s heb je de mogelijkheid om pushmeldingen te versturen naar gebruikers. Interessant voor bedrijven die zo belangrijke updates kunnen uitsturen naar gebruikers.

Verbeterde beveiliging

PWA’s gebruiken Hypertext Transfer Protocol Secure (https) om gegevens veilig op te slaan. Zo eliminateen ze de risico’s van beveiligingsinbreuken of andere illegale activiteiten.

Voorbeelden van Progressive Web Applications

Veel internationale bedrijven, zoals Twitter, Clipchamp, Pinterest en Forbes, hebben opvallende resultaten gezien sinds ze PWA’s gebruiken. Andere voorbeelden van bedrijven die met PWA’s opmerkelijke resultaten boeken:

Roeckl

Het Duitse merk voor luxe accessoires — en Mollie-klant — Roeckl bestaat al sinds 1839. Vroeger gebruikten ze de traditionele point-of-sale-methoden bij de verkoop, maar al snel kwam het besef dat ze zich moesten aanpassen aan de veranderende noden van klanten. Online gaan, was dus de boodschap. Dankzij een Magento 2 PWA, is het aantal bestellingen met bijna 200% gestegen, ging het aantal gebruikers met 150% omhoog en daalde het bouncepercentage dan weer met 35%.

Flipkart

De grootste e-commercesite van India verhoogde haar conversie met 70% nadat ze haar online aanwezigheid en native app combineerden in één PWA. Meer nog: het bedrijf verdrievoudigde de gemiddelde tijd die een gebruiker op de site spendeert en behaalde 40% meer re-engagement.

Lancôme

Om het aantal bezoekers en de re-engagement op te drijven, gebruikte het luxe cosmeticamerk Lancôme PWA-technologie. Zo kon het merk een snelle app-achtige ervaring bieden op mobiele toestellen. Lancôme verhoogde haar conversie met 17% en zag een toename van 53% in mobiele sessies op iOS. Bovendien slaagde het Franse luxemerk erin om via pushmeldingen het conversiepercentage op het herwinnen van achtergelaten winkelwagentjes met 8% te verhogen.

Een PWA ontwikkelen

De ontwikkeling van PWA-apps gebeurt met behulp van een website-toolkit, meestal HTML5, CSS, JavaScript of WebAssembly. Deze technologieën zijn beschikbaar op bijna alle platforms, wat betekent dat de code in één keer kan worden geschreven en op meerdere apparaten en software-omgevingen werkt.

Dat is een eenvoudiger proces dan de ontwikkeling van een native app, die meestal door ontwikkelaars wordt geschreven in een ecosysteemspecifieke programmeertaal (zoals Kotlin voor Android of Objective-C voor iOS).

PWA’s in e-commerce

PWA’s zijn de ideale tool voor elk e-commercebedrijf: ze bieden opmerkelijke gebruikerservaringen, hoge retentiepercentages en alle functionaliteiten van een native app. PWA’s zijn over het algemeen ook goedkoper, sneller en makkelijker om te ontwikkelen dan native apps. Je hoeft bovendien geen verschillende tech stacks te gebruiken voor jouw mobiele en desktopsite — met PWA’s heb je slechts één codebasis nodig voor al jouw kanalen.

Een PWA maakt het je makkelijker om bezoekers te betrekken bij je merk. Zeker als ze jouw app op hun startscherm hebben staan, want dan kan je meldingen inzetten voor marketingberichten of updates en hen een vlekkeloze checkout bieden. Hoe meer e-commerce evolves, hoe belangrijker PWA’s worden voor een geweldige klantervaringen en groei van bedrijven.

Moeiteloze PWA-betalingen met Mollie

Wil je jouw klanten een vlotte betaalervaring bieden met alle betaalmethoden die ze nodig hebben? Of vraag je je af hoe je betalingen kunt toevoegen aan de PWA van jouw webshop? Bij Mollie bieden we een moeiteloze betaaloplossing waarmee je meerdere betaalmethoden kunt aanvaarden, je klant een conversie-geoptimaliseerde checkout biedt en je toegang hebt tot een reeks features en andere voordelen om betalingen te vereenvoudigen en groei te boosten.

Door onze API-first aanpak maken we het ook makkelijk om met Mollie PWA-betalingen te implementeren. We bieden een plugin voor Magento 2 PWA’s, ongeacht de technologie die je gebruikt voor jouw app. We lanceren ook een plugin voor Shopware 6, en bieden al integraties met ScandiPWA (een frontend voor Magento 2) en commercetools. Integraties voor meer frameworks, waaronder Vue Storefront en Shopware PWA, komen er binnenkort aan.

Wil je jouw business laten groeien dankzij moeiteloze betalingen? Kom alles te weten over betalingen met Mollie of meld je aan om ons product te ontdekken — zonder lock-in contracten of aanmeldkosten.