Wat is een Progressive Web App (PWA)?
Een Progressive Web App (PWA) is een webapplicatie die gebruikmaakt van moderne browsertechnologieën om te werken als een native app. Je installeert hem via de browser op je startscherm, hij werkt (deels) offline via een service worker en laadt snel dankzij caching. PWA's zijn goedkoper te bouwen dan native apps, werken op alle platforms en vereisen geen App Store-publicatie.
Een Progressive Web App is een website die zich gedraagt als een app: je installeert hem op je telefoon of computer, hij werkt offline en laadt razendsnel. Zonder de App Store.
Wat maakt een PWA anders dan een gewone website?
Een gewone website laadt elke keer opnieuw vanuit de server en werkt niet zonder internetverbinding. Een PWA voegt drie technologische lagen toe. Een service worker is een script dat op de achtergrond draait en bepaalde bestanden en data in de cache van de browser opslaat. Hierdoor laadt de app razendsnel bij een herbezoek en werkt hij zelfs gedeeltelijk offline. Een web app manifest is een JSON-bestand dat de naam, het icoon en de weergave-instellingen van de app definieert, zodat hij er uit ziet als een native app als je hem installeert. HTTPS is verplicht: een PWA werkt alleen op beveiligde verbindingen.
De drie kernkenmerken
Installeerbaar: je voegt een PWA toe aan je startscherm via de browser, zonder de App Store. Op Android toont Chrome automatisch een installatiebanner als de app aan de PWA-criteria voldoet. Op iOS gebruik je Toevoegen aan startscherm via Safari. Na installatie opent de app in volledig scherm zonder adresbalk, precies zoals een native app. Offline werkt: via de service worker bepaal jij welke content offline beschikbaar is. Gebruikers zien nog steeds inhoud als ze tijdelijk geen verbinding hebben, in plaats van een foutpagina. Snel: dankzij agressieve caching laden PWA’s bij terugkerende bezoekers vrijwel direct, ook op een trage verbinding.
Verschil met een native app
Een native app is gebouwd specifiek voor iOS of Android en gedistribueerd via een app store. Dat biedt volledige toegang tot apparaathardware zoals Bluetooth, NFC en geavanceerde camerafuncties, maar het vereist aparte codebases voor elk platform en publicatie via Apple of Google. Een PWA heeft één codebase die op alle platforms werkt, vereist geen App Store-goedkeuring en is significant goedkoper te bouwen en te onderhouden. De keerzijde: PWA’s hebben minder toegang tot apparaathardware en kunnen niet in de App Store worden aangeboden. Meer over de kosten van applicatieontwikkeling lees je in wat kost een webapplicatie laten bouwen.
Bekende voorbeelden
Twitter Lite is een PWA: kleiner dan de native app, sneller bij trage verbindingen en offline bruikbaar. Starbucks gebruikt een PWA waarmee klanten ook zonder verbinding hun bestelling samenstellen. Pinterest zag een forse stijging in gebruikstijd en conversierate na het lanceren van hun PWA als alternatief voor de website. In de B2B-wereld gebruiken organisaties PWA’s voor klantportalen, dashboards en veldservice-applicaties die ook offline moeten werken.
Wanneer kies je voor een PWA?
Kies voor een PWA als je een webapplicatie bouwt die ook goed op mobiel moet werken, snel moet laden en optioneel offline moet kunnen draaien, maar waarbij je geen App Store-publicatie nodig hebt en geen diepe hardware-integratie vereist. PWA’s zijn bijzonder sterk als alternatief voor native apps bij zakelijke toepassingen zoals klantportalen, inspectietools en dashboards. Ze zijn ook goed inzetbaar als aanvulling op een website: je voegt de PWA-laag toe aan een bestaande webapplicatie zonder die volledig te herschrijven. Lees meer over de keuze tussen een webapplicatie en een website in wat is het verschil tussen een webapplicatie en een website.
Onze tip: Test of je applicatie in aanmerking komt voor PWA-status via Lighthouse in de Chrome DevTools. De tool geeft een PWA-score en een checklist met wat er nog ontbreekt om volledig PWA-compatibel te zijn.
Veelgestelde vragen
Wat is het verschil tussen een PWA en een native app?
Een native app is gebouwd specifiek voor iOS of Android en wordt gedistribueerd via de App Store of Google Play. Een PWA is gebouwd met webtechnologieën en draait in de browser, maar kan worden geïnstalleerd op het startscherm en werkt offline. Native apps hebben betere toegang tot apparaathardware, zoals Bluetooth en NFC, en zijn verplicht voor bepaalde platformen. PWA's zijn sneller en goedkoper te bouwen en te onderhouden, omdat je één codebase hebt voor alle platforms.
Kan een PWA werken zonder internetverbinding?
Ja, via een service worker slaat een PWA specifieke pagina's, data en assets op in de cache van de browser. Zo kan de app content tonen, ook zonder verbinding. Welke content offline beschikbaar is, bepaal je zelf in de service worker. Veelgebruikte patronen zijn het offline beschikbaar maken van de laatste geladen pagina's, het cachen van afbeeldingen en het bewaren van eerder opgehaalde data. Acties die een internetverbinding vereisen, zoals het versturen van een formulier, worden bewaard en verstuurd zodra de verbinding herstelt.
Hoe installeer je een PWA op je telefoon?
Op Android toont de browser Chrome automatisch een installatiebanner als een site aan de PWA-vereisten voldoet. Je kunt ook kiezen voor Toevoegen aan startscherm in het browsermenu. Op iOS kun je in Safari kiezen voor Delen en vervolgens Zet op beginscherm. Na installatie verschijnt het PWA-icoon op je startscherm en opent de app in volledig scherm, zonder adresbalk. Op desktop browsers als Chrome en Edge verschijnt een installatieicoon in de adresbalk.
Voor welke soort applicaties is een PWA geschikt?
PWA's zijn geschikt voor content-gedreven apps die ook mobiel goed moeten werken, zoals nieuwssites, webshops, dashboards, planning-tools en klantportalen. Ze zijn minder geschikt als je diepe integratie met apparaathardware nodig hebt, zoals Bluetooth, NFC of geavanceerde camerafuncties. Voor apps die in de App Store moeten staan of die specifieke iOS-functies vereisen, is een native app een betere keuze. Voor de meeste zakelijke webapplicaties biedt een PWA een goede balans tussen functionaliteit en ontwikkelkosten.