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, op Amazon.

Al deze ontwikkelingen gaan hand in hand met de wereldwijde technologische vooruitgang en, specifieker, die van het internet. Nu steeds meer mensen online gaan, een smartphone kopen en toegang hebben tot snel internet, evolueert 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 onderzoek 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 toeneemt.

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, gps en camera. Je kan PWA’s bovendien makkelijk vinden via zoekmachines, wat je SEO ten goede komt.

Minder duur en tijdrovend om te ontwikkelen

Wil je een native app ontwikkelen, dan moet je vaak twee versies voorzien: één voor Android en één voor Apple iOS. Met PWA’s moet je slechts éé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 elimineren 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 luxeaccessoires - 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 de boodschap. Dankzij een Magento 2 PWA, zag Roeckl het aantal bestellingen met bijna 200% stijgen, 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 cosmeticamerk Lancôme PWA-technologie. Zo kon het merk een snelle 'app-achtige' ervaring bieden op mobiele toestellen. Lancôme verhoogde de conversie met 17% en zag een toename van 53% in mobiele sessies op iOS. Bovendien slaagde het Franse luxemerk erin om met pushmeldingen het conversiepercentage op het herwinnen van achtergelaten winkelmandjes 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. Die technologieën zijn op bijna alle platformen beschikbaar, 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 te ontwikkelen dan native apps. Je hoeft bovendien geen verschillende tech stacks te gebruiken voor je mobiele en desktopsite; met PWA’s heb je slechts één codebasis nodig voor al je kanalen.

Een PWA maakt het je makkelijker om bezoekers bij je merk te betrekken; zeker als ze jouw app op hun startscherm hebben staan. Dan kan je meldingen inzetten voor marketingberichten of updates en hen een vlekkeloze checkout bieden. Hoe meer e-commerce evolueert, hoe belangrijker PWA’s worden voor een geweldige klantervaring en voor de 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 je een moeiteloze betaaloplossing waarmee je meerdere betaalmethoden kunt aanvaarden, je klanten een voor conversie geoptimaliseerde checkout biedt en toegang hebt tot een reeks features en andere voordelen om betalingen te vereenvoudigen en je groei te boosten.

Door onze 'API-first' aanpak maken we het ook makkelijk om PWA-betalingen te implementeren. We bieden een plugin voor Magento 2 PWA’s, ongeacht de technologie die je voor jouw app gebruikt. 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 maak een account aan om ons product te ontdekken — zonder lock-in contracten of aanmeldkosten.