Terug naar artikelen

Wat is een progressive web app (PWA)? Uitleg voor het MKB

Een progressive web app, afgekort PWA, is een webapplicatie die ook eigenschappen van een geïnstalleerde app kan bieden. Denk aan een eigen appicoon en een apart venster. Offlinegebruik, meldingen en gegevensuitwisseling vragen aparte inrichting en ondersteuning door het apparaat. Begin daarom bij één terugkerende taak en test wat er zonder verbinding werkelijk mogelijk is.

In dit artikel
Conceptillustratie van een blauwe papieren browseromlijsting die via een gevouwen strook doorloopt naar een apptegel met een koraalkleurige bladwijzer.

In het kort

Een progressive web app (PWA) is een applicatie op basis van webtechnologie die je via een webadres gebruikt en op ondersteunde apparaten ook als app kunt openen. Een eigen icoon of apart venster maakt niet automatisch alle functies offline beschikbaar. Voor een bedrijf is een PWA vooral interessant bij terugkerende taken. Kies eerst de taak, bepaal welke gegevens actueel moeten zijn en test installatie en verbindingsverlies op de apparaten van je gebruikers.

Wat verandert er ten opzichte van een website of native app?

Een gewone website en een PWA gebruiken dezelfde webtechnologieën. Het verschil zit in de mogelijkheden die je daarbovenop aanbiedt: bijvoorbeeld openen vanuit een appicoon, een eigen venster en zorgvuldig ontworpen gebruik bij een slechte verbinding. MDN beschrijft een progressive web app als een toepassing met webtechnologie en een gebruikerservaring die op een platformspecifieke app lijkt. De naam zegt dus iets over de manier van aanbieden, niet over welk bedrijfsproces de app oplost.

Een native app is gericht op een specifiek platform, zoals iOS of Android. Een PWA kan vanuit één webbasis meerdere apparaten bedienen, maar krijgt daardoor niet vanzelf dezelfde toegang tot alle apparaatfuncties. Een klantportaal kan bijvoorbeeld als gewone webapp of als PWA worden aangeboden. De rechten, gegevens en klanttaken blijven in beide gevallen nodig. De uitleg over klantportalen helpt om die inhoudelijke keuze los te beoordelen van de vraag hoe iemand de omgeving opent.

Hoe werkt het installeren van een PWA?

Een gebruiker bezoekt eerst de webapp. Afhankelijk van browser en apparaat kan die vervolgens een installatieoptie of een optie voor toevoegen aan het beginscherm gebruiken. Een webappmanifest beschrijft onder meer naam, iconen en weergave. Voor het aanbieden van installatie gelden browservoorwaarden; een productieomgeving gebruikt HTTPS. De actuele installatiegids van MDN legt ook uit dat de precieze mogelijkheden en bediening per platform verschillen. Beloof daarom geen identieke installatieknop op iedere telefoon.

Een belangrijk onderscheid: een service worker is niet algemeen verplicht om een PWA te kunnen installeren. Dit is een script waarmee onder andere offlinegedrag kan worden geregeld. Ook kunnen sommige browsers gewone websites als app toevoegen. Alleen aantonen dat er een icoon verschijnt, bewijst dus weinig over de werking. Laat de leverancier de echte taak openen, uitvoeren en opnieuw terugvinden, zowel via het webadres als via het geïnstalleerde icoon. Houd een bruikbare browserroute beschikbaar wanneer installatie niet wordt ondersteund.

Schema met één webapp en twee toegangsroutes: een webadres in de browser en een appicoon na installatie. Offlinegebruik vraagt aparte inrichting.
Een icoon verandert de toegang tot de webapp. Of de taak offline werkt, moet afzonderlijk worden ontworpen en getest.

Wat kan een progressive web app offline doen?

Offlinegebruik vraagt een bewuste keuze per onderdeel. Een service worker kan bijvoorbeeld eerder opgehaalde schermbestanden uit een lokale cache gebruiken. De MDN-gids over caching beschrijft de afweging tussen snel reageren, offlinebeschikbaarheid en actualiteit. Een opgeslagen scherm kan direct openen, terwijl een nieuwe voorraadstand of afspraak nog bij de server moet worden gecontroleerd. Een mooie interface zonder verbinding betekent daarom niet dat de getoonde gegevens nog actueel zijn.

Spreek af wat een gebruiker mag lezen, als concept mag bewaren of pas na een servercontrole mag uitvoeren. Een eerder opgehaalde instructie kan bruikbaar blijven als duidelijk is van wanneer die is. Een definitieve reservering vraagt controle op beschikbaarheid en een bevestiging. De MDN-uitleg over browseropslag beschrijft hoe lokale gegevens door de gebruiker of de browser kunnen worden gewist. Als nog niet verstuurd werk belangrijk is, moet zichtbaar zijn waar het staat en welk verliesrisico overblijft. Beschouw een lokale kopie nooit zonder meer als een bedrijfsback-up.

Een fictief voorbeeld: een serviceverslag onderweg

Stel dat een medewerker bij een servicebezoek bevindingen invult op een telefoon. Op de locatie valt de verbinding weg. In dit fictieve voorbeeld is afgesproken dat het verslag lokaal als concept mag worden bewaard. De medewerker ziet dan bijvoorbeeld op dit apparaat bewaard. Dat is een andere status dan ontvangen door kantoor. De klant mag op basis van alleen dat concept nog geen bericht krijgen dat het bezoek administratief is afgerond.

Zodra verbinding beschikbaar is, kan het verslag worden aangeboden aan het bedrijfssysteem. Laat pas na bevestiging door de server zien dat het ontvangen is, bij voorkeur met een terugvindbare referentie. Voorkom dat opnieuw aanbieden twee verslagen maakt. Is de opdracht intussen gewijzigd, toon dan een conflict dat iemand kan oplossen. De uitleg over API-koppelingen laat zien hoe systemen gegevens uitwisselen; de PWA moet daarnaast aan de gebruiker helder maken welke stap werkelijk gelukt is.

Dit is een ontwerpvoorbeeld, geen beschrijving van een bestaande klantcase of een toezegging dat iedere PWA dit al doet. Voor sommige processen is offline invoer te riskant of onnodig. Dan kan het eerlijker zijn om zonder verbinding alleen beperkte informatie te tonen en de wijzigingsactie uit te schakelen. Die grens hoort vooraf in de opdracht te staan, zodat een gebruiker geen succesmelding krijgt voor werk dat nog niet is overgedragen.

Drie statussen voor een serviceverslag: lokaal concept op dit apparaat, wachten op verbinding en ontvangen na bevestiging door de server.
Bewaren op het apparaat en ontvangen door kantoor zijn verschillende uitkomsten. Toon de juiste status en bewaar bewijs van de overdracht.

Wanneer past een PWA bij je bedrijf?

Een PWA is het onderzoeken waard wanneer dezelfde gebruikers regelmatig een duidelijke webtaak uitvoeren: een opdrachtstatus bekijken, een controlelijst invullen of een document aanleveren. Een appicoon kan de terugkeer eenvoudiger maken. Bepaal wel eerst of mensen die taak vaak genoeg doen om installatie zinvol te vinden. Voor een openbare bedrijfspresentatie die vooral nieuwe bezoekers informeert, kan een goede mobiele website al voldoende zijn.

Kies techniek op de vereiste handelingen. Zijn specifieke apparaatfuncties of langdurige achtergrondtaken noodzakelijk, laat die dan op de bedoelde apparaten aantonen voordat je een PWA vastlegt. Vergelijk dezelfde taak ook met een gewone webapp of native app. Een PWA is geen automatische snelheidswinst: zware beelden, scripts en trage gegevensverzoeken blijven aandacht vragen. Het stappenplan om website-snelheid te verbeteren helpt om laden en reageren apart meetbaar te maken.

Meldingen en achtergrondwerk vragen aparte afspraken

Een PWA kan met ondersteunde webfuncties meldingen ontvangen of werk op de achtergrond proberen uit te voeren. Dat is geen onbeperkt draaiend programma. MDN beschrijft dat browsers service workers kunnen stoppen en dat verschillende achtergrondfuncties beperkingen of toestemming kennen. Laat daarom niet alle bedrijfszekerheid afhangen van de belofte dat een telefoon vanzelf later iets zal versturen. Ondersteuning moet voor iedere noodzakelijke functie worden gecontroleerd.

Maak een bruikbare route wanneer iemand meldingen weigert, de app sluit of lang niet terugkomt. Een openstaande taak moet bijvoorbeeld ook na opnieuw openen zichtbaar zijn. Laat belangrijke opvolging waar passend door het bedrijfssysteem bewaken, met een eigenaar voor fouten. Vraag de leverancier welke browsers, besturingssystemen en toestemmingen zijn getest. Een demonstratie op één recente telefoon is onvoldoende bewijs voor de hele gebruikersgroep.

Welke gegevens blijven op het apparaat staan?

Lokale opslag vraagt een bewuste beveiligingskeuze, vooral bij klantgegevens of gedeelde apparaten. De OWASP-richtlijnen voor HTML5 waarschuwen onder meer voor gevoelige gegevens en sessie-identificatoren in localStorage en voor de gevolgen van kwaadaardige scripts. Ook een andere browserdatabase maakt gegevens niet vanzelf vertrouwelijk. Spreek af welke informatie lokaal nodig is, hoelang die blijft staan en wat er gebeurt bij uitloggen, een andere gebruiker of ingetrokken toegang.

Een icoon op het beginscherm vervangt geen inlog- of rechtencontrole. Laat bij online handelingen de server controleren wat iemand mag doen. Bepaal voor offlinegebruik expliciet of bepaalde informatie überhaupt mag worden bewaard en bekeken. Neem ook oude versies mee: een medewerker kan nog een eerder geopend scherm hebben wanneer het bedrijfssysteem verandert. Test hoe de app daarmee omgaat, welke concepten behouden blijven en wanneer een gebruiker opnieuw moet inloggen. Dit zijn beheerafspraken, geen garantie dat een toepassing volledig veilig is.

Vijf proeven voordat je de webapp in gebruik neemt

Begin met een koude eerste opening op een afgesproken telefoon en netwerk: zijn de vereiste gegevens en knoppen bruikbaar? Installeer daarna de webapp waar dat wordt ondersteund, sluit die en voer dezelfde taak opnieuw uit via het icoon. Controleer ook de gewone browserroute. Noteer de gebruikte apparaten, browserversies en gemeten tijden; zo blijft de demonstratie herhaalbaar. Vraag geen algemene score zonder te weten welke taak daarbij werkelijk is getest.

Onderbreek als derde proef de verbinding terwijl een concept openstaat en tijdens het aanbieden ervan. Kijk wat bewaard blijft en of de status eerlijk is. Bied daarna hetzelfde verslag opnieuw aan en controleer de uitkomst in het bedrijfssysteem. Test vervolgens een oude gegevenskopie tegenover een inmiddels gewijzigde opdracht. De app moet het afgesproken conflictgedrag tonen en mag een oude kopie niet stilzwijgend als actuele bevestiging presenteren.

De vijfde proef gaat over toegang en herstel: log uit, wissel van gebruiker en trek testtoegang in. Controleer welke eerder opgeslagen informatie nog zichtbaar is en wat er met onafgeronde concepten gebeurt. Spreek vooraf af welk resultaat aanvaardbaar is. Gebruik fictieve gegevens en laat fouten opzettelijk zien. Een leverancier moet kunnen uitleggen hoe iemand verdergaat wanneer installatie, opslag of verbinding faalt, inclusief wie ondersteuning biedt.

Taakmatrix: bij status lezen toon je de datum van de kopie, invullen blijft een lokaal concept en definitief boeken wacht op servercontrole.
Leg de offlinegrens per taak vast. Een leesbare kopie, een lokaal concept en een definitieve boeking vragen verschillende bewijzen.

Begin met één taak en een toetsbare scope

Neem voor een eerste gesprek één terugkerende taak mee, de gebruikte telefoons, het leidende bedrijfssysteem en de gewenste uitkomst bij een verbroken verbinding. Beschrijf daarnaast wat de app nadrukkelijk pas online mag afronden. Vraag een offerte die installatie, koppelingen, lokale opslag, testen, updates en ondersteuning apart beschrijft. Er bestaat geen vast PWA-tarief dat los van die scope bruikbaar is. Ook gedeelde webcode neemt beheer en platformtests niet weg.

Softora kan met je onderzoeken of een gewone webapp, een PWA of een andere oplossing bij die taak past. Bij een maatwerk platform begint het gesprek daarom bij gebruikers, gegevens en aantoonbare taakafronding. Je hoeft vooraf geen techniek vast te kiezen. Een klein werkend voorbeeld met de lastige verbindings- en toegangsgevallen maakt de afweging concreter dan een lange lijst met mogelijke appfuncties.

Over deze uitleg

Deze uitleg is opgesteld door Softora met hulp van AI. De technische claims zijn gecontroleerd aan de genoemde originele documentatie, geraadpleegd op 21 oktober 2026. Het servicebedrijf en verslag zijn fictief. Het taakfilter, de statusvoorbeelden en acceptatieproeven zijn een eigen praktische uitwerking. De hoofdillustratie is met AI gemaakt; de drie schema’s zijn voor deze uitleg getekend.

Geschreven door SoftoraNaar boven
Gratis download

Meer groei. Minder handwerk.

Jouw praktische gids voor slimmer werken met bedrijfssoftware.

Meer groei. Minder handwerk. Een e-book van Softora.
Groeiscan + keuzehulp + 30-dagenplan

Maak ruimte voor de volgende stap.

Ontdek waar je tijd verliest, welke software bij je past en hoe je klein begint met een verbetering die telt.

Softora ontvangt je naam en e-mailadres voor deze aanvraag. Je krijgt direct toegang tot de PDF. Geen automatische nieuwsbrief. Privacybeleid