Wat is een Progressieve Web App?

In dit artikel leg ik uit wat een Progressieve Web App (PWA) is, deel ik voor- en nadelen, leg ik uit hoe een Progressieve Web App werkt, ga ik in op de impact voor SEO, de performance impact van PWA, de nadelen van native Apps, wat zijn de uitdagingen van PWA, de voordelen voor ontwikkelaars en of een PWA iets is voor uw organisatie.

Wat is een Progressieve Web App?

Progressieve Web App’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 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 naar de server gestuurd. De server geeft vervolgens de juiste data terug. In een PWA-omgeving wordt bij de eerste verzoek de hele applicatie ingeladen. Hierna functioneert de PWA als een opzichzelfstaande applicatie. Zelfs zonder of met slechte internet-verbinding.

Het is Progressief 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.

Hoe werkt een Progressieve Web App?

Waar normaal gesproken voor iedere actie van de gebruiker een dataverzoek naar de server wordt verstuurd, wordt in het geval van een PWA alle data tijdens het eerste verzoek al ingeladen. Deze progressieve manier van het laden van data verklaard dan ook de naam: Progressieve Web App. Dankzij deze werkwijze kan een PWA als native App functioneren, ook zonder internetverbinding. Bovendien is de laadtijd hierdoor aanzienlijk korter, waardoor een PWA heel snel aanvoelt voor de gebruiker.

Behalve de positieve invloed van een Progressieve Web App op de gebruikerservaring, hebben PWA’s ook een positieve invloed wat betreft SEO. Dankzij de snelle laadtijd blijven bezoekers namelijk meer op de website hangen. Snelheid van webpagina’s is namelijk een belangrijke factor om hoger in de zoekmachines te komen. Bovendien blijk uit gegevens van Google dat 53% van de bezoekers van een mobiele website deze weer verlaten als de laadtijd meer dan 3 seconden is. Een snelle laadtijd is dus heel belangrijk voor je website en een Progressieve Web App draagt daar zeker aan bij.

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.

PWA: een App zonder installatie

De eigenschappen hierboven maken duidelijk dat een Progressieve Web App (PWA) meerdere voordelen heeft voor gebruikers. Er is immers geen installatie nodig, want alle functionaliteit verloopt via een browser. Dit maakt de App veel toegankelijker voor gebruikers. Ook hoeft de App niet los ontwikkeld te worden voor ieder platform. Daardoor bespaar je kosten en ben je niet meer afhankelijk van uitgevers (bv. Google Play en de iOS App Store).

De uitstekende performance is ook een voordeel. Een Progressieve Web App verbruikt minder data en laadt snel. Dat is zeker voor een mobiele website een essentiële eigenschap voor succes. Ook niet te vergeten: de App en onderliggende schermen / pagina’s kunnen worden geïndexeerd door zoekmachines, wat natuurlijk de vindbaarheid van de App vergroot.

Voordelen voor de gebruiker

  • Een PWA werkt op iedere browser en elke device, ongedacht de grootte van het scherm.
  • Een PWA kunt u ook offline of met een slechte verbinding gebruiken doordat deze headless is gebouwd en de frontend los staat van de backend. Bovendien is een PWA altijd up to date zonder dat u daar (handmatig) updates voor installeert.
  • Doordat een PWA, in tegenstelling tot een native app, gevonden kan worden door Google, draagt de PWA gewoon bij aan uw Search Engine Optimization.
  • Een PWA hoeft u niet te downloaden in de App store, wat de drempel voor het gebruik een stuk lager maakt. Wil een gebruiker de webshop toch altijd bij de hand hebben, kan deze toegevoegd worden aan het beginscherm van een telefoon. De PWA staat dan gewoon tussen de andere native apps van de gebruiker.
  • Een PWA kan gewoon via een link (URL) worden gedeeld en is beveiligd via HTTPS.
  • Niet alle, maar wel veel van de functies van native apps kunt u ook inzetten voor een PWA. Zo kunt u de gebruiker bijvoorbeeld pushberichten sturen (iOS ondersteunt dit nog niet).

Performance impact van PWA

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

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 van een Progressieve Web App

Behalve snelheid en de mogelijkheid tot offline gebruik heeft een Progressieve Web App nog meer voordelen.

  1. Geen app installatie
    Omdat een Progressieve Web App feitelijk een webpagina is, hoeft deze niet eerst te worden gedownload en geïnstalleerd vanuit een app store. Dit betekent dus ook dat ontwikkelaars niet afhankelijk zijn van de regels die gelden in de app stores. Daarnaast haalt een Progressieve Web App de drempel van het downloaden weg en kunnen de gebruikers gelijk aan de slag.
  2. Groot bereik met een PWA
    Omdat Progressieve Web Apps gewoon via de browser bereikbaar zijn is het bereik groter dan van een native app. Bovendien werken PWA’s op iedere browser en zijn ze bereikbaar op zowel desktop, tablets als mobiele telefoons.
  3. Progressieve Web Apps hoeven niet te worden geüpdatet
    In tegenstelling tot een app uit de appstore hoeft een Progressieve Web App niet te worden geüpdatet. Simpelweg omdat het een webpagina is. Hierdoor beschikken de gebruikers altijd over een up-to-date app, mits zij de PWA hebben ingeladen op hun mobiele telefoon.
  4. Goedkoper dan een native app
    De ontwikkelingskosten van een Progressieve Web App zijn over het algemeen lager dan de kosten voor het ontwikkelen van een native app. Dit komt met name doordat er minder tijd nodig is voor de ontwikkeling. Bovendien heb je dankzij een Progressieve Web App een website en app in één. Het afzonderlijk laten ontwikkelen is vanzelfsprekend duurder, waardoor je met de keuze voor een PWA dus kosten bespaart.

Nadelen native apps

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

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

Wat zijn de uitdagingen van PWA?

Hoewel PWA’s al langere tijd bestaan, duurt het toch langer dan verwacht voordat bedrijven ze ontwikkelen en inzetten. Dit kan komen doordat PWA is gemaakt door ontwikkelaars van Google en merken zoals Apple hun apparaten pas laat hebben aangepast om PWA te ondersteunen.

Apple verklaarde pas in 2018 dat ze PWA zouden gaan ondersteunen op hun mobiele telefoons. De reden dat Apple zo terughoudend is om PWA te ondersteunen op zijn apparaten is natuurlijk vanwege de appstore en de populariteit daarvan.

Of PWA deel gaat uitmaken van het leven van consumenten hangt mede af van de makers van mobiele telefoons en in hoeverre ze PWA toegang geven tot bepaalde telefoonfunctionaliteiten. Apple heeft bijvoorbeeld een strikter beleid over wat apps kunnen doen. Ze controleren ook de kwaliteit voordat ze bepaalde apps in hun app store goedkeuren.

PWA’s zijn ook nog steeds behoorlijk duur voor bedrijven om zelf te ontwikkelen. De meeste bedrijven wachten op de providers van hun e-commerceplatform om PWA’s te ontwikkelen en het aan te bieden in hun e-commercefunctionaliteit.

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 uw 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.

Bron: developers.google.com

PWA en de impact voor ontwikkelaars

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

Ontwikkelaars hebben tegenwoordig al een enorme set aan basiskennis nodig en hier komt deze kennis dus nog bij. Want naast de kennis van bijvoorbeeld React heeft u 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 ontwikkelaars

Naast bovenstaande uitdagingen van PWA’s zijn er voor de web-ontwikkelaar ook voordelen:

  • Er hoeft slechts één systeem onderhouden te worden in plaats van drie verschillende applicaties (IOS, Android en de eigen website).
  • Als u HTML en CSS buiten beschouwing laat, kan de applicatie worden opgebouwd in slechts één programmeertaal (JavaScript). U heeft 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 ontwikkelaars. Want uiteraard staat de ontwikkelaars wereld 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 kunt u het front-end als het ware lostrekken van het back-end. Zo maakt u eenvoudig aanpassingen aan het front-end zonder dat deze direct invloed hebben op het back-end.

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

Is een PWA iets voor uw organisatie?

Daar is geen eenduidig antwoord op te geven. Wel kunt u uzelf een aantal vragen stellen:

  • Bent u van plan een mobiele App te ontwikkelen?
  • Bent u toe aan een nieuwe website?
  • Komt uw meeste websiteverkeer via mobiel binnen?
  • Loopt uw huidige website achter als het gaat om performance en conversie?
  • Heeft voldoende budget?

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

Delen:

Plaats een reactie

Welkom

Installeer kmkoster.nl
×