Wat is een PWA? Betekenis en uitleg voor webshops

Definitie

Een PWA is een website die met een service worker en een web app manifest app-achtige functies krijgt: installeren op het startscherm, offline werken en pushberichten.

Wat is een PWA?

Een progressive web app is geen apart soort website, maar een website met een paar extra onderdelen. Een web app manifest beschrijft naam, iconen en kleuren, zodat de site op het startscherm kan worden gezet. Een service worker is een script dat tussen de pagina en het netwerk staat en verzoeken kan cachen of afhandelen, ook zonder verbinding. En de site draait over HTTPS.

In de e-commercewereld wordt PWA vaak verward met headless. Bij Magento is "PWA" lange tijd synoniem geweest met PWA Studio of Vue Storefront: een losse JavaScript-frontend bovenop de Magento-API. Maar een PWA kan ook een gewone server-gerenderde site zijn met een manifest en service worker erbij.

Pushberichten werken via de service worker. Op Android kan dat al lang in de browser. Op iOS werkt webpush sinds iOS 16.4, maar alleen voor web-apps die de bezoeker op het beginscherm heeft gezet. Dat beperkt het bereik op iPhones in de praktijk.

Wat het betekent voor SEO

Een PWA heeft geen eigen rankingvoordeel. Google beoordeelt een PWA als elke andere website. Wat telt is of de content in de HTML staat, of URL's crawlbaar zijn en hoe snel en stabiel de pagina laadt.

Het risico zit in de architectuur die vaak met een PWA meekomt. Een volledig client-side gerenderde frontend toont crawlers bij de eerste request soms een lege pagina met een JavaScript-bundle. Google kan JavaScript renderen, maar dat gebeurt later en niet altijd volledig. Andere crawlers, waaronder de meeste AI-crawlers, voeren vaak geen JavaScript uit. Zonder server-side rendering zien die je productcontent mogelijk helemaal niet.

Daarnaast moet de service worker crawlers en bezoekers niet laten vastzitten aan een verouderde versie. Een slecht ingestelde cache kan oude prijzen of verwijderde producten blijven tonen.

De service worker zelf vormt geen SEO-probleem zolang de HTML op de server compleet is. Google raadt aan om content niet afhankelijk te maken van een service worker. Bouw de site zo dat de eerste request zonder service worker een volledige, indexeerbare pagina oplevert.

Zo werkt het in Magento, Shopify en Laravel

Bij Magento is de vraag meestal niet "wel of geen PWA", maar welke frontend. Hyvä is server-gerenderd en daardoor crawlbaar zonder extra werk. PWA Studio en vergelijkbare headless frontends vragen om SSR en een eigen oplossing voor canonicals, redirects, sitemaps en structured data. Dat is meer bouw- en onderhoudswerk.

Shopify-thema's zijn server-gerenderd met Liquid. Installeerbaarheid en pushberichten regel je daar meestal via apps. In Laravel kun je een manifest en service worker toevoegen aan een Blade- of Inertia-app met SSR, zodat je de app-functies krijgt zonder de crawlbaarheid op te geven.

Wat vaak onderschat wordt, is het onderhoud. Een service worker die bestanden cachet, moet bij elke release weten wat er veranderd is. Anders krijgen terugkerende bezoekers een oude versie van CSS of JavaScript, met fouten tot gevolg. Versiebeheer van de cache hoort bij elke deploy.

Wanneer het de moeite waard is

Voor de meeste webshops levert een snelle, server-gerenderde site meer op dan app-functies. Een PWA loont als je veel terugkerende klanten hebt die je met pushberichten wilt bereiken, of als offline gebruik echt nodig is, zoals bij een B2B-bestelapp voor buitendienst. Reken de business case vooraf door. Bouw het niet omdat het modern klinkt.

Meet daarna wat het oplevert. Aantallen installaties, het gebruik van pushberichten en de omzet uit terugkerende bezoekers vertellen of de investering terugkomt.

Minimaal web app manifest

{
  "name": "Voorbeeldshop",
  "short_name": "Voorbeeldshop",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#111827",
  "icons": [{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }]
}

Verder lezen

Gerelateerde begrippen

Headless commerce JavaScript-SEO Server-side rendering (SSR)Client-side rendering (CSR)HTTPS

Veelgestelde vragen

Rankt een PWA beter in Google?+

Nee. Een PWA heeft geen eigen rankingvoordeel. Snelheid, crawlbaarheid en content bepalen het resultaat.

Is Hyvä een PWA?+

Hyvä is een server-gerenderd Magento-thema, geen headless PWA. Je kunt er wel een manifest en service worker aan toevoegen.

Kan Google een PWA crawlen?+

Ja, als de content in de server-gerenderde HTML staat. Bij volledig client-side rendering is het risicovoller, en veel AI-crawlers voeren geen JavaScript uit.

PWA (progressive web app)