Progressive Web Apps (PWAs)

App-ervaring.
Zonder App Store

Een PWA combineert het beste van web en native: installeerbaar op het homescreen, werkend offline, snel via caching; maar gebouwd met webtechnologie en bereikbaar via een URL.

Wat een Progressive Web App is

Meer dan een website.
Minder dan een native app

Fundament
Service Worker
JavaScript · Cache API · Background sync
De Service Worker is het hart van elke PWA dat een JavaScript-bestand als proxy tussen de browser en het netwerk draait. Het beheert caching, onderschept verzoeken en maakt offline-gebruik mogelijk.
Installation
Web App Manifest
JSON · Icons · Display modes
Het manifest definieert hoe de app eruitziet op het homescreen: naam, icoon, splashscreen, themakleur. Met display: standalone verdwijnt de browserinterface en de app opent als een echte app.
Perfomance
Cachingstrategieën
Cache first · Network first · Stale-while-revalidate
We kiezen per resource het juiste caching-patroon. Statische assets: Cache First. API-data: Stale-while-revalidate. Kritieke data: Network First met fallback. Workbox neemt het zware werk over.
De fundamentele vraag

Mobile app
of PWA?

PWA’s zijn krachtiger dan de meeste mensen denken en beperkter dan sommige bureaus beweren. Hier is de eerlijke vergelijking.

Een PWA is de juiste keuze wanneer…
Installatie-drempel te hoog
Gebruikers zijn bereid een URL te bezoeken, maar niet een app te downloaden. PWA’s zijn via een link te installeren.
Beperkt budget, groot bereik
Eén codebase voor iOS, Android en desktop. Geen App Store-kosten, geen review-vertraging.
Offline-lezen of lichte interactie
Nieuwsapps, documentatie, agenda's, formulieren: toepassingen die offline werken maar geen complexe synchronisatie vereisen.
Snelle iteratie vereist
Updates zijn live zodra je deployt. Geen App Store-review, geen versie-fragmentatie bij gebruikers.
Kies toch een native/ hybride app wanneer…
iOS-pushnotificaties kritiek zijn
Web push op iOS is pas beschikbaar vanaf iOS 16.4 en alleen in geïnstalleerde PWA’s. De implementatie is beperkter dan native push.
Diep hardware-gebruik
Bluetooth, NFC, geavanceerde camera-functies, ARKit/ ARCore, niet beschikbaar in de browser.
App Store-aanwezigheid gewenst
Ontdekkbaarheid via de App Store en Play Store is voor veel consumentenapps essentieel. Een PWA verschijnt niet in de store.
In-app-aankopen
Apple en Googles in-app purchase systemen zijn niet beschikbaar in PWA’s. Betalingen lopen via het web met andere marges.
Web APIs

Wat de browser inmiddels wél kan

Location
Geolocation api
Subtitle
GPS-coördinaten met toestemming. Nauwkeurig genoeg voor navigatie-apps, check-ins en locatie-gebaseerde content.
Camera
Mediadevices API
Subtitle
Camera en microfoon toegang via getUserMedia. Foto's maken, QR-codes scannen, video-opname, allemaal in de browser.
Storage
IndexedDB & Storage
Subtitle
Grote hoeveelheden data offline opslaan via IndexedDB. In combinatie met de Cache API is een complete offline-ervaring mogelijk.

Network
Background sync
Subtitle
Acties die uitgevoerd worden wanneer de verbinding terugkomt. Formulier ingediend offline? Wordt automatisch verstuurd zodra er netwerk is.
Notifications
Push & Notifcations API
Subtitle
Push-berichten via de Push API, zichtbaar ook wanneer de app gesloten is. Op Android breed beschikbaar, op iOS in geïnstalleerde PWA’s.
Sharing
Web share API
Subtitle
De native share-sheet van het OS aanroepen vanuit de browser. Content delen via WhatsApp, Mail, Notities zonder maatwerkimplementatie.

Een PWA is geen halve app. Het is een bewuste keuze voor het juiste platform bij het juiste gebruik.

Cases

PWA in de praktijk