Progressive Web App

Tim Cosson
dinsdag 20 april 2021
4 minuten

Iedereen weet wat een website is. Ook weet iedereen wat mobiele apps zijn. Maar wist je ook dat er een ontwikkeling is die deze twee technologieën combineert? De Progressive Web App (PWA) combineert de voordelen van een website en een native mobiele app. Desktop, mobiel of tablet: de PWA vormt de oplossing voor het bedienen van alle apparaten, omdat hij als applicatie én als website kan worden gebruikt.

Wat is een Progressive Web App?

Om duidelijk te maken wat een Progressive Web App precies is en wat de voordelen hiervan zijn, is het goed om eerst onderscheid te maken tussen een aantal begrippen:

Native app: een native app is een applicatie op je mobiele telefoon of tablet, die speciaal is ontwikkeld voor deze apparaten. Denk bijvoorbeeld aan de bekende app WhatsApp. Een native app installeer je vanuit de App Store of Google Play Store en zet je op je apparaat. Deze apps zijn vaak heel interactief en gemaakt om de gebruiker zo veel mogelijk betrokken te houden bij de app. Denk aan de rode bolletjes boven een app-icoon (badges) die verschijnen als je een ongelezen bericht hebt, en het gebruik van pushnotificaties. Bovendien kun je apps vaak offline gebruiken en zien ze er heel anders uit dan een website.

Responsive website: een responsive website is een website die óók goed te lezen en te gebruiken is op een tablet of smartphone. Het is dus een ‘gewone’ website, die zich wat betreft lay-out aanpast aan het scherm van de bezoeker. Je hoeft als bezoeker niet in te zoomen om de tekst op de pagina te kunnen lezen en het gebruik van knoppen en dergelijke werkt als op een gewone website.

Progressive Web App: simpel gezegd is een PWA een geavanceerde website die, wanneer je hem op je mobiele telefoon of tablet opent, functioneert als een native app. Een PWA combineert alle voordelen van een website met een aantal voordelen van een native app.

Waaraan moet een Progressive Web App voldoen?

Een Progressive Web App voldoet in elk geval aan de volgende elementen:

  1. Responsive: de webapp schaalt naar ieder apparaat dat toegang heeft tot de applicatie.
  2. Offline te gebruiken: ook als de gebruiker even geen internetverbinding heeft, moet de webapp werken. Dit kan in de vorm van een offline pagina, of een ‘gecachte’ versie van de applicatie.
  3. Voelt aan als een native app: de webapp maakt gebruik van de interactiemogelijkheden van een native app. Het gebruik moet makkelijk en vertrouwd zijn en aanvoelen als een native app.
  4. Stimuleert betrokkenheid: de webapp maakt gebruik van de functies van een native app die de betrokkenheid van de gebruiker vergroten. Denk bijvoorbeeld aan het gebruik van pushnotificaties. Dit gebeurt met behulp van de service worker.
  5. Veiligheid: de data die de PWA verstuurt en ontvangt, moeten worden versleuteld en voldoen aan het Transport Layer Security (TLS)-protocol. Dit zorgt ervoor dat de informatie niet leesbaar is voor derden.
  6. Snelkoppeling op de homescreen: de webapp is te openen via een snelkoppeling op de homescreen van een mobiele telefoon of tablet. Hierbij wordt een icoontje getoond, precies zoals bij een native app.

Wat zijn de voordelen van een Progressive Web App?

Het laten ontwikkelen van een Progressive Web App heeft een aantal voordelen ten opzichte van een reguliere website of een native app:

  1. Meer functionaliteiten: de PWA maakt gebruik van de functionaliteiten van de browser én die van het apparaat waarop de PWA bezocht wordt. Denk bijvoorbeeld aan het gebruik van gps, pushnotificaties of de camera.
  2. Geen installatie: PWA’s zijn beschikbaar vanuit de browser. Je kunt de webapp dus openen zonder hem eerst te hoeven installeren. Dit maakt de webapp voor nieuwe gebruikers laagdrempeliger dan een native app. Bovendien betekent het dat de webapp geen ruimte inneemt op de telefoon van de gebruiker. Ook hoeft de gebruiker de app niet te updaten, omdat de bezoeker altijd gebruikmaakt van de versie die het meest up-to-date is.
  3. Offline: een PWA kan (deels) offline gebruikt worden, wat de gebruikerservaring verbetert.
  4. Snelkoppeling: de PWA is te benaderen via een browser, maar ook direct vanuit de homescreen met behulp van een snelkoppeling. Deze snelkoppeling wordt in de vorm van een icoon toegevoegd aan het telefoonscherm van de gebruiker. Dit ziet er hetzelfde uit als bij een native app.
  5. Zoekmachineoptimalisatie: de content die je toevoegt aan een native app draagt niet bij aan de vindbaarheid via Google, omdat de app niet via de browser te benaderen is. Hierdoor kan Google de content op de pagina niet lezen en gebruiken in de zoekresultaten. PWA’s bieden wel ondersteuning voor search engine optimization (SEO): de content in de webapp is dus te vinden via Google.
  6. Kosten: het laten ontwikkelen van een PWA is vaak goedkoper dan het ontwikkelen van een native app. Dit komt onder meer doordat je bij een native app zowel een versie voor Android als een versie voor iOS moet ontwikkelen. Bovendien willen veel bedrijven wanneer ze een native app laten ontwikkelen óók een reguliere website. Met een PWA sla je eigenlijk twee vliegen in één klap: je krijgt een website die ook als applicatie op mobiele apparaten te gebruiken is.

Wat zijn de nadelen van een Progressive Web App?

Hoewel een Progressive Web App voor veel organisaties uitkomst kan bieden, zijn er ook nadelen te benoemen. Zo is een Progressive Web App meestal duurder om te laten ontwikkelen dan een reguliere (responsive) website. Ook kun je met een webapp niet alle functionaliteiten van het toestel gebruiken waarop de koppeling staat. Je hebt bijvoorbeeld geen toegang tot contacten, kunt vanuit de webapp geen items toevoegen aan de agenda, en je kunt niet gebruikmaken van Bluetooth.

Kortom: twijfel je tussen een (responsive) website, een native app en een PWA, bedenk dan goed welke functies je wilt toevoegen en wat je budget is.

Een Progressive Web App laten ontwikkelen voor jouw organisatie?

Ben je benieuwd of het laten ontwikkelen van een Progressive Web App iets is voor jouw organisatie? Wij hebben de kennis en expertise om je hierin te adviseren. Aarzel dus niet om contact met ons op te nemen.

Download het plan van aanpak voor jouw nieuwe website

  • In 10 essentiële stappen komen tot een plan van aanpak voor jouw ideale website;
  • Breng je doelen en strategie in kaart om de juiste website te creëren.
  • En nog veel meer…
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.