Wat is een progressive web app (PWA)?

Definitie: Een progressive web app (PWA) is een webapplicatie die je via de browser op het beginscherm van je telefoon of computer kunt installeren, en die zich daarna gedraagt als een gewone app: met een eigen icoon, een volledig scherm, deels offline gebruik en pushmeldingen. Je bouwt één applicatie voor alle apparaten, zonder app store.

In het kort

• Een PWA is een web app met extra mogelijkheden, gebouwd met gewone webtechniek.
• Twee onderdelen maken het verschil: een manifestbestand en een service worker.
• Pushmeldingen werken op Android en, sinds iOS 16.4, ook op de iPhone als de PWA op het beginscherm staat.
• Een PWA is vaak een goed midden tussen een web app en een native app.

Wat is een progressive web app?

Een progressive web app is een gewone website of webapplicatie die stap voor stap, progressief, extra mogelijkheden krijgt als het apparaat die ondersteunt. Op een oude browser werkt hij als een normale website. Op een moderne telefoon kun je hem installeren, opent hij zonder adresbalk en kan hij delen van de inhoud tonen zonder internetverbinding.

Voor de gebruiker voelt een PWA als een app. Voor de bouwer blijft het een webapplicatie: één codebasis, gepubliceerd op een server, zonder aparte versies voor iOS en Android.

Hoe werkt een PWA?

Een PWA bestaat uit een gewone webapplicatie met drie toevoegingen:

1. HTTPS. Een PWA moet via een beveiligde verbinding worden aangeboden.
2. Een web app manifest. Een klein bestand met de naam, het icoon, de kleuren en hoe de app opent, bijvoorbeeld op volledig scherm. Daardoor kan de browser hem installeren.
3. Een service worker. Een script dat op de achtergrond draait, tussen de app en het netwerk. Het bewaart bestanden en gegevens, zodat de app snel opent en ook bij een slechte verbinding werkt. De service worker regelt ook pushmeldingen.

Hoe installeer je een PWA?

Op Android en in Chrome of Edge op de computer biedt de browser vaak zelf een installatieknop aan, in de adresbalk of als melding. Op de iPhone open je de PWA in Safari, tik je op het deelicoon en kies je Zet op beginscherm. Daarna staat de app tussen je andere apps en opent hij zonder adresbalk.

Wat kan een PWA wel en niet?

Voorbeelden van PWA’s

Bekende bedrijven als Starbucks en Pinterest hebben een PWA naast of in plaats van hun native app. Ook de webversies van X en Spotify kun je in veel browsers installeren. In het mkb zie je PWA’s vooral bij:

• Werkbon- en inspectie-apps voor buitendienstmedewerkers.
• Klantportalen die klanten op hun telefoon willen kunnen openen.
• Bestel- en reserveringsapps voor horeca en retail.
• Interne tools zoals een urenregistratie of checklist.

Voordelen van een PWA

• Eén applicatie voor alles. Laptop, tablet, iPhone en Android-telefoon gebruiken dezelfde code.
• Geen app store nodig. Geen beoordeling, geen wachttijd bij updates en geen afhankelijkheid van de regels van Apple of Google.
• Snel. Door de service worker opent de app vaak sneller dan een gewone website.
• Vindbaar. Pagina’s van een PWA kunnen in Google verschijnen, wat bij een native app niet kan.
• Lagere drempel. Gebruikers kunnen de app eerst in de browser proberen voordat ze hem installeren.

Nadelen en beperkingen

• Minder hardwaretoegang. Voor bluetooth, NFC of locatie op de achtergrond is een native app vaak nodig.
• Installeren is minder bekend. Veel gebruikers weten niet dat je een website op je beginscherm kunt zetten. Je moet ze daar actief op wijzen.
• Verschillen tussen browsers. Safari op de iPhone ondersteunt niet alles wat Chrome op Android kan.
• Geen app store-zichtbaarheid. Wie vooral via de App Store gevonden wil worden, mist die plek.

PWA, web app of native app?

Kies een PWA als je gebruikers de app regelmatig op hun telefoon gebruiken, maar je geen zware telefoonfuncties nodig hebt. Kies een gewone web app als de app vooral op de computer wordt gebruikt. Kies een native app als bluetooth, achtergrondlocatie of volledig offline werken essentieel zijn. Het verschil tussen web apps en native apps leg ik uitgebreider uit op de kennisbankpagina over web apps.

Wat betekent dit voor jouw project?

De vorm volgt voor mij uit de gebruiker. Wie gaat het gebruiken, en welke taak moet die persoon als eerste kunnen afronden? Een monteur die onderweg werkbonnen invult, heeft iets anders nodig dan een klant die eens per maand een factuur downloadt. Ik wil vooraf duidelijk hebben wat we met een eerste versie bedoelen. Daarna is de keuze voor een PWA meestal een logisch gevolg.

Twijfel je of een PWA past bij jouw idee? Stuur me voor wie het is, waar het gebruikt wordt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap. Lees ook wat er komt kijken bij een webapplicatie laten maken.

Veelgestelde vragen over progressive web apps

Wat is een PWA?

Een PWA, of progressive web app, is een webapplicatie die je op je beginscherm kunt installeren en die zich gedraagt als een app, met een eigen icoon, deels offline gebruik en pushmeldingen. Hij wordt gebouwd met gewone webtechniek en werkt op alle apparaten.

Wat is het verschil tussen een PWA en een native app?

Een PWA draait in de browser en werkt op elk apparaat vanuit één codebasis, zonder app store. Een native app wordt per besturingssysteem gebouwd, via de App Store of Google Play geïnstalleerd en heeft volledige toegang tot functies van de telefoon.

Werkt een PWA op een iPhone?

Ja. Je installeert een PWA op de iPhone via Safari met de optie Zet op beginscherm. Sinds iOS 16.4 kan een geïnstalleerde PWA ook pushmeldingen sturen, al ondersteunt Safari niet alle functies die Android biedt.

Verwante termen

Web app · Webapplicatie · Native app · Hybride app · Cross-platform app · Responsive design · Mobiele app