Wat is een PWA en is dit iets voor mijn organisatie?

Progressive Web Apps (PWA’s) hebben hun plek in de online (en offline) wereld helemaal ingenomen. Wat kunnen ontwikkelaars met PWA’s? En liggen hier ook kansen voor jou als marketeer? In dit artikel leg ik uit wat PWA’s zijn, deel ik voor- en nadelen en ga ik in op de impact voor SEO.

Wat is een Progressive Web App?

PWA’s zijn applicaties waarbij mobiel gebruik centraal staat en die web-functionaliteit gebruikt om een app-achtige gebruikerservaring te bieden. Het komt erop neer dat een PWA-applicatie zich nagenoeg hetzelfde gedraagt als een app, ongeacht het type apparaat die de bezoeker gebruikt met daarbij onder water vele voordelen.

Het verschil zit vooral in de manier waarop gegevens worden verwerkt. Normaliter wordt er voor elke actie van de klant een verzoek (request) naar de server gestuurd. De server geeft vervolgens de juiste data terug. In een PWA-omgeving wordt bij de eerste request de hele applicatie ingeladen. Hierna functioneert de PWA als een opzichzelfstaande applicatie. Zelfs zonder of met slechte internetverbinding.

Het is ‘Progressive’ omdat het zichzelf lazy-load op basis van het gedrag van de gebruiker. Het is ‘Web’ omdat het is geschreven in de taal voor het web: HTML, CSS en JavaScript. Het is een ‘App’ omdat het code draait en installeert op het apparaat van de gebruiker.

Een PWA moet in ieder geval aan 2 eisen voldoen

1. De site moet over https beschikken. Service Workers en andere belangrijke PWA-technologieën (zoals de Cache, Push en Background Sync. API’s werken alleen via beveiligde verbindingen).
2. De site moet responsive zijn en app-achtige functionaliteiten bevatten, zoals push notificaties, of deels offline beschikbaar zijn.

Benieuwd hoe zo’n PWA functioneert? Bekijk dan eens de webshops van PME Legend, Meubelplaats.nl of MakeMyTrip.com.

De impact van PWA

PWA’s hebben een positieve invloed op elementen als user experience en performance. Voor SEO (Search Engine Optimization) is het gevaarlijk, maar hoeft het niet voor problemen te zorgen. Zolang je maar weet wat je doet!

Performance impact van PWA

Volgens Google verlaat 53% van de bezoekers een website op mobiel als deze langer dan 3 seconden moet laden.

53% of visits are abandoned if a mobile site takes more than three seconds to load.

Dit is meteen een belangrijk argument waarom performance van enorm belang is. Een traag ladende website zorgt voor afhakers en indirect dus voor minder omzet.

Bij een PWA gaat het aantal requests niet eens echt omlaag (juist zelfs tegenovergesteld) maar de grootte van deze requests wordt vaak wel een stuk minder. De belangrijkste performance-winst zit hem in het feit dat de pagina meer één keer volledige ingeladen hoeft te worden en de browser dus gewoon veel minder hoeft te doen.

Het resultaat? Pagina’s vele malen sneller inladen.

Zo zorgde de implementatie van een PWA op de website van Forbes voor een afname van 4 seconden in laadtijd. Een van de zichtbare resultaten? 10% meer impressies per bezoek. Voor een website als Forbes (met miljoenen bezoekers) is dat natuurlijk een gigantische stijging.

Voordelen PWA’s

PWA’s zijn ideaal voor de eindgebruiker. Zo profiteer je van de voordelen die een app heeft zoals pushberichten en het feit dat pagina’s niet opnieuw geladen hoeven te worden als je schakelt naar een nieuwe pagina. Bezoekers gaan dus vliegensvlug door je website.

En wat te denken van het ‘offline’ kunnen bezoeken van je website? Dit is namelijk geen probleem voor PWA’s. Het zorgt dat de content via de Service Worker al is ingeladen op je mobiele apparaat. Zo kun je altijd gebruik maken van een PWA-site.

Een ander groot UX-voordeel is dat je de PWA kunt toevoegen aan het startscherm van mobiele apparaten. Gebruikers hoeven dus niet meer apart naar je website te navigeren, maar starten hem met één druk op de knop. Je PWA-site met jouw logo is direct in beeld op het startscherm van de gebruiker.

Nadelen native apps

Gebruikers hoeven de app niet te updaten, omdat dit net zoals met ‘gewone website’ automatisch (real-time) gebeurt. Ook hoef je de app niet apart op te zoeken in de Apple of Play store.

Dit laatste is tegenwoordig overigens wel een mogelijkheid. Je kunt PWA’s toevoegen aan de diverse app stores. Zo is je PWA direct beschikbaar via de URL maar ook te vinden in de diverse app stores.

SEO-impact van PWA

Laten we maar meteen beginnen met een uitspraak van John Mueller, Head of Search bij Google:

PWA’s currently don’t have any advantage in Google Search and as far as I know, there are no plans to change this.

Oké, het hebben van een PWA levert je dus niet direct SEO-voordeel op. Maar indirect kan een PWA natuurlijk wel SEO-voordelen hebben.

Dit zit hem met name in de snelheidswinst die je boekt. De snelheid van je pagina is namelijk een belangrijke ranking factor voor Google. Maar ook een betere gebruikerservaring (UX) komt je SEO vaak ten goede. Een betere UX zorgt er bijvoorbeeld voor dat bezoekers langer op je website blijven en sneller zullen converteren.

Negatieve impact

Er kleven echter ook potentiële gevaren aan een PWA voor je vindbaarheid. Een PWA is namelijk op JavaScript gebaseerd en we weten inmiddels dat JavaScript en Google niet altijd even goed samen gaan.

Dit heeft te maken met het feit dat ‘gewone’ statistische websites gebruik maken van server-side rendering (SSR) en websites gebaseerd op JavaScript gebruik maken van client-side rendering (CSR). Bij gewone statische websites wordt de HTML geheel klaargezet op de server, terwijl bij een op JavaScript (SPA/PWA) gebaseerde website de HTML opgebouwd wordt aan de client-kant.

Sommige SPA/PWA-applicaties maken gebruik van SSR, waarbij de JavaScript op de server uitgevoerd wordt, zodat de HTML al klaarstaat voor het eerste bezoek.

Voor vervolg-requests van dezelfde bezoeker wordt de HTML wel aan de client-kant bijgewerkt en niet meer door de server gegenereerd. Bij een traditionele applicatie wordt alle HTML bij iedere request opnieuw geheel aan de kant van de server opgebouwd.

Vanuit UX-perspectief heeft CSR de voorkeur, maar het is ingewikkelder als het gaat om SEO. Niet alle content is namelijk direct zichtbaar. De oplossing volgens Google is Dynamic Rendering. Met Dynamic Rendering combineer je beide render-mogelijkheden: bots voor zoekmachines krijgen de SSR-versie, terwijl de echte bezoeker de CSR-versie krijgen.

PWA en de impact voor developers

Met de komst van PWA’s hebben developers er opnieuw een uitdaging bijgekregen. Extra kennis van JavaScript, en dan vooral van de frameworks React, Preact, Vue.js, Polymer of Angular, is noodzakelijk.

Developers hebben tegenwoordig al een enorme set aan basiskennis nodig en hier komt deze kennis dus nog bij. Want naast de kennis van bijvoorbeeld React heb je ook kennis nodig van de architectuur van PWA’s, Service Workers en het liefst ook kennis of ervaring van Single Page Application (SPA).

Met name de architectuur van de PWA’s zorgt voor de meeste impact, deze is namelijk veel ingewikkelder geworden.

Traditionele applicaties zijn stateless. Een request bevat alle info om te bepalen welke HTML/CSS/JS teruggestuurd moet worden naar de gebruiker. En de backend-applicatie heeft dus naast de request-info geen ‘state’ die bijgehouden moet worden.

PWA’s zijn state-full. De front-end applicatie houdt allerlei zaken bij voor de bezoeker zoals een winkelwagen, wensenlijst of adresgegevens die zijn ingevuld in de checkout.

Voordelen voor developers

Naast bovenstaande uitdagingen van PWA’s zijn er voor de webbouwer ook voordelen:

• Er hoeft slechts één systeem onderhouden te worden in plaats van drie verschillende applicaties (IOS, Android en de eigen site).
• Als je HTML en CSS buiten beschouwing laat, kan de applicatie worden opgebouwd in slechts één programmeertaal (JavaScript). Je hebt dan overigens nog wel een backend-API nodig. Deze kan in NodeJS (Javascript dus) geschreven zijn, maar dat is zeker niet altijd het geval. Het kan ook uit verschillende services in verschillende talen bestaan.

Het werk wordt ook steeds eenvoudiger voor developers. Want uiteraard staat de developmentwereld niet stil als het om PWA’s gaat.

Inmiddels zijn er enkele initiatieven zoals VUE Storefront. Dit is een standalone, open source PWA-applicatie voor e-commerce bedrijven. Met deze oplossing kun je je front-end als het ware lostrekken van je back-end. Zo maak je eenvoudig aanpassingen aan je front-end zonder dat deze direct invloed hebben op je back-end.

Met VUE Storefront maak je dus eenvoudig een nieuwe front-end (PWA) voor bijvoorbeeld je Magento- of Shopware-webshop.

Is een PWA iets voor mijn organisatie?

Daar is geen eenduidig antwoord op te geven. Wel kun je jezelf een aantal vragen stellen:

• Ben je van plan een mobiele app te ontwikkelen?
• Ben je toe aan een nieuwe website?
• Komt je meeste websiteverkeer via mobiel binnen?
• Loopt je huidige website achter als het gaat om performance en conversie?
• Heb je voldoende budget?

Wanneer je vier van bovenstaande vijf vragen met een ‘ja’ beantwoordt, doe je er goed aan om de mogelijkheden van een PWA te onderzoeken.