Progressive web apps:
wat hebben progressive apps in petto?

Wat is een progressive application?


De progressive web app (PWA) is een van de nieuwste ontwikkelingen op het gebied van apps. Een PWA verbindt de eigenschappen van een website met veel kenmerken van native mobile apps. Daardoor functioneert de applicatie onafhankelijk van het besturingssysteem en tegelijkertijd als website en app.

Maar kunnen progressive web apps écht met de gevestigde native apps concurreren? En waarom zijn deze apps progressief en in hoeverre verschillen ze van klassieke web apps? Wij geven een overzicht over de functies van progressive web apps en gaan in op wat de verschillen zijn in vergelijking met andere app-vormen. Bovendien worden niet alleen de voordelen van progressive web apps genoemd, maar werpen we ook een licht op de nadelen.


Wat is een progressive web app?

De term ‘progressive web app’ beschrijft een nieuwe methode op het gebied van app-ontwikkeling waardoor veelbelovende mogelijkheden ontstaan. Deze methode bouwt voort op de al bestaande web app. Net als een web app is de progressive application via de browser toegankelijk, waardoor de app op verschillende besturingssystemen kan draaien en niet aan één specifieke app store verbonden is.

Maar aangezien Google voor dit nieuwe app-formaat voornamelijk verantwoordelijk is, is het dus geen verrassing dat PWA's tot nu toe vooral geoptimaliseerd zijn om op het Android-besturingssysteem te worden gebruikt. Progressive web apps functioneren op iOS-toestellen van de concurrent Apple meestal alleen met beperkingen. Maar de technologie staat nog in de kinderschoenen, wat betekent dat nog niet alle mogelijkheden zijn ontwikkeld. We kunnen wel verwachten dat Google meer in de progressive web apps zal investeren. Het is dus zeer waarschijnlijk dat deze apps verder geoptimaliseerd worden.


progressive web apps

Definitie progressive web apps, deel 1: Tegelijkertijd website en app

Omdat PWA's nog steeds verder worden ontwikkeld, is het nu alleen globaal mogelijk om een definitie te geven. En hoewel we er ervan uit kunnen gaan dat de basis niet zal veranderen, zijn er al wel een aantal opvallende features vast te stellen: in tegenstelling tot een normale web app kun je een progressive web app namelijk ook offline gebruiken. Dit doe je door op het startscherm van een smartphone of tablet een bookmark toe te voegen met de URL van de website van de app. Via deze bookmark kun je de app dan eenvoudig openen – ook als je een slechte of zelfs helemaal geen internetverbinding hebt (hiervoor heeft je browser wel een offline cache nodig). De applicatie ziet er dan niet als een website uit, maar geeft de indruk dat je van een native app gebruikmaakt. Het responsieve design zorgt ervoor dat de app aan het display wordt aangepast.


Definitie progressive web apps

Definitie progressive web apps, deel 2: PWA vs. native app

Een PWA is een responsieve web app die de indruk geeft dat je een native app gebruikt. De applicatie heeft toegang tot de functies van het gebruikte toestel, zoals de camera, microfoon, gps en push-berichten en kan deze in de applicatie opnemen. Hiervoor controleert de app de compatibiliteit van de gebruikte browser en het gebruikte toestel. Ook de look and feel van een PWA op een smartphone of tablet lijkt op die van een native app (vlotte prestaties, goede reactietijden bij het swipen etc.).

De progressive web app heeft als voordeel dat je altijd over de nieuwste versie beschikt, zodra je de app online opent. In tegenstelling tot bij native apps hoef je als gebruiker dus geen updates downloaden – wanneer je met de server van de PWA bent verbonden, wordt er gekeken of er updates zijn.

Een ander voordeel ten opzichte van een native app is het feit dat een PWA eenvoudiger te ontwikkelen is (omdat het zowel een website als een app is, die op verschillende besturingssystemen draait ), waardoor ook de kosten veel lager zijn – terwijl de reactietijden bij de weergave en bediening onder verschillende omstandigheden goed blijven. Bovendien gebruikt een PWA bijna geen opslagruimte op het toestel (hoewel dit afhankelijk is van de omvang van de offline cache).

Enkele genoemde functies zijn ook al onderdeel van klassieke web apps en gedeeltelijk bij responsieve en mobiele websites. Wat zijn dus werkelijk nieuwe functies van een progressive web app ten opzichte van een klassieke web app?


PWA vs. traditionele web app

Definitie progressive web apps, deel 3: PWA vs. traditionele web app

Klassieke web apps kunnen via de browser (dus zonder installatie) op verschillende mobiele besturingssystemen zoals Android, iOS en Windows Phone worden geopend. De basis van een progressive web app is dus zeker niet nieuw, maar biedt wel veel meer mogelijkheden dan traditionele web apps. De beschikbare functies van een PWA passen zich aan de mogelijkheden van het gebruikte toestel aan. Dit betekent dat gebruikers van toestellen en/of browsers die niet met alle functies van de applicatie compatibel zijn, alsnog van de app gebruik kunnen maken (ook al zijn de functies dan beperkt).

Een voorbeeld: Via een progressive web app kun je de camera gebruiken om foto's op een online platform te uploaden. Dit zorgt ervoor dat gebruikers direct in de app foto's kunnen maken en uploaden. Niet alle browsers en toestellen ondersteunen de technische eisen van deze functie. Zodra je de applicatie in een browser opstart, controleert hij daarom of er een camera beschikbaar is en of deze wordt ondersteund door de PWA en de browser. Als dit niet het geval is, kun je de camera-functie niet gebruiken, maar wel de overige bruikbare functies van de web app. Als je, zoals bij dit voorbeeld, geen toegang hebt tot de camera, is het nog steeds mogelijk om in de progressive web app gebruik te maken van bijvoorbeeld de uploadfunctie.

De apps zijn dus in zoverre progressief dat je ze via iedere browser kunt openen, maar de mogelijke functies zijn echter afhankelijk van de gebruikte hardware en browser. De functies van een PWA groeien daardoor met de beschikbare mogelijkheden van de gebruikte browser en het toestel.


PWA vs. hybride app

Definitie progressive web app, deel 4: PWA vs. hybride app

Naast de web app bestaat er ook al langer de hybride app, een andere soort app die een aantal mogelijkheden van native apps kopieert zonder alle nadelen over te nemen. Zo kun je een hybride app – net zoals een PWA – met relatief weinig moeite voor verschillende mobiele besturingssystemen ontwikkelen. Hybride apps hebben echter een andere basis: Ze worden via de app store op je Android-toestel of iOS-apparaat geïntegreerd en imiteren de functies van native apps – dat heeft voor- en nadelen.

Naast de eenvoudigere ontwikkeling is de integratie in het besturingssysteem een van de belangrijkste voordelen van hybride apps. Een ander voordeel is dat je door de installatie van meer native toestelfuncties gebruik kunt maken dan met (progressive) web apps mogelijk is – hoewel dit nog steeds niet zo omvangrijk is als bij native apps.

De verplichte installatie heeft ook nadelen. Een hybride app kun je niet zo eenvoudig testen als een web app. Bovendien blijft de applicatie afhankelijk van het platform – en zelfs als bij deze soort apps de ontwikkeling voor een enkel besturingssysteem sneller is afgerond dan bij native apps, betekent dit uiteindelijk dat het programmeren veel meer moeite kost dan bij een progressive web app. Als je een PWA ontwikkelt, hoef je het programma namelijk niet speciaal voor Android of iOS te modificeren – de compatibiliteit van de hardware en de browser zijn in dit geval van belang.


Technische achtergrond van een PWA

Een PWA is uitsluitend gebaseerd op open web standaarden en wordt – net zoals een gebruikelijke web app – over het algemeen in de talen HTML, CSS en JavaScript geschreven. Progressive web apps zijn buitengewoon flexibel en passen hun functies steeds aan de gegeven mogelijkheden aan. Wat een PWA precies kan doen, is altijd afhankelijk van de gebruikte browser en het toestel (en gedeeltelijk ook van het besturingssysteem). Welke technologieën worden voor de ontwikkeling gebruikt?


Service worker

Service worker

Een nieuwe technologie van de PWA is het gebruik van de service worker, die voortbouwt op de web worker. Een service worker wordt als JavaScript op de achtergrond van de browser gedraaid (als threads die los staan van de website). Als je de applicatie voor het eerst opent, downloadt de PWA-server de service worker en probeert hem te installeren. Nadat de installatie is afgerond, staat de service worker altijd gereed als de app opnieuw wordt geopend. Hij wordt bovendien altijd geïnformeerd als het netwerk van het domein wordt aangevraagd. Dit is alleen mogelijk als HTTPS wordt gebruikt, anders ontstaan er veiligheidsrisico's.

De service worker en de bijbehorende cache worden op de gebruikte browser opgeslagen – mits deze functie wordt ondersteund. Tot nu toe is dit het geval bij Google Chrome, Mozilla Firefox en Opera. Bijzonder aan deze functie is dat je met een service worker ook van een PWA gebruik kunt maken als je geen internetverbinding hebt, omdat de inhoud dan vanuit de cache wordt gedownload. Dit proces kun je veel sneller laten lopen door de app te cachen. Daardoor hoeven alleen maar nieuwe gegevens worden gedownload.


Application

Application shell en inhoud van elkaar scheiden

Om een progressive web app te realiseren, speelt naast de service worker de ‘application shell architecture’, die ook bij native apps wordt gebruikt, een belangrijke rol. Hierdoor kan de gebruikerssoftware onderscheid maken tussen de application shell (de vastgelegde opbouw van de applicatie, ook: app shell) en de content/inhoud. De gebruikersinterface is gebaseerd op een app shell, die eerst wordt gedownload en afgebeeld. De hierin getoonde inhoud is dynamisch en wordt vanaf het internet gedownload.

Nadat de PWA voor het eerst is gebruikt, wordt de app shell in de cache van de service worker opgeslagen. Daardoor zijn de downloadtijden van de app shell korter en de prestaties van de PWA beter. Bovendien kun je de inhoud van een PWA in de cache of via IndexedDB bewaren. Hiervoor moet de inhoud (net zoals de app shell) tijdens een eerder gebruik van de progressive web app worden gedownload. Vervolgens is het dan mogelijk om al gedownloade content van een PWA offline te gebruiken.


WebAPK's

WebAPK's

Een WebAPK is een server die het mogelijk maakt om een via de browser geopende progressive web app in het bestandsformaat APK (Android Package) te converteren. Zo kan een een PWA nog beter in het besturingssysteem geïntegreerd worden – tenminste, op Android-toestellen.

Een PWA in APK-formaat kan in de app drawer (een overzicht van alle geïnstalleerde apps) worden geïntegreerd waardoor het lijkt alsof hij net zoals een native app op het toestel is geïnstalleerd. Op deze manier kan de PWA beter gebruikmaken van de beschikbare functies, van de toegangsrechten tot andere apps en van de resources van het gebruikte apparaat. Nadat een PWA is geïnstalleerd, wordt het bijvoorbeeld via Android als eigen app geopend en niet langer als nieuwe tab in een browser.

Tot nu toe zijn er echter slechts weinig bèta-browsers op Android die de WebAPK-functie ondersteunen en is het omslachtig om een app in het APK-formaat te converteren. De tot op heden beschikbare vorm van WebAPK's is dus nog niet geschikt voor alle toestellen en browsers, maar het lijkt er wel op dat deze functie in de toekomst op alle gangbare browsers kan worden gebruikt. Toch overtuigen PWA's nu al – ook zonder de installatiefunctie – vanwege het enorme prestatievermogen.


Status quo en toekomst van PWA's

De redenen voor de snelle vooruitgang in de ontwikkeling van nieuwe web app-technologieën, zijn de algemene verbeteringen op het gebied van browser-technologie en vooral de daarmee verbonden implementatie van de service worker. Met de actuele vooruitgang kun je met de hierboven beschreven PWA-technologieën verschillende en indrukwekkende apps creëren – die je echter alleen in hun volle omvang kunt gebruikten als je over een browser beschikt die de service worker ondersteunt. Veel voorbeelden van progressive web apps zijn te vinden op de PWA-showcase van Google en op de website pwa.rocks.

Progressive web apps zijn op dit moment niet in staat om een native app op alle gebieden te vervangen – en dat zal in de toekomst ook niet gaan gebeuren. Native applicaties die zijn ontwikkeld voor een besturingssysteem hebben namelijk altijd de meeste mogelijkheden om toegang te krijgen tot de functies van het toestel en de systeemresources. Toch hebben de meeste apps helemaal niet zo’n uitgebreide toegang tot de hard- en software nodig. Dat maakt het PWA-formaat voor veel applicaties zeker interessant..

Door de vele, voor de hand liggende voordelen van progressive web apps, verwachten zowel app-aanbieders als gebruikers veel van het PWA-formaat. Toch zijn er ook factoren die een massale distributie en productie van PWA's belemmeren. Ze zijn misschien kleinschalig, maar wel belangrijk.


Voor- en nadelen van PWA's

In het onderstaande overzicht worden de voor- en nadelen van progressive web apps nog eens getoond in vergelijking met andere app-vormen. De tabel gaat in op het programmeren alsook het gebruik van PWA's.

Voordelen Nadelen
In vergelijking met native apps is het eenvoudiger en goedkoper om een PWA te programmeren. Bovendien kun je met een PWA tegelijkertijd een normale website en een platformoverschrijdende app creëren. Het PWA-formaat en zijn compatibiliteit met (mobiele) browsers en besturingssystemen zijn nog in de ontwikkelingsfase. Tot zo ver is het nog niet duidelijk welke verdere gebruiksfuncties in de toekomst zullen worden ondersteund.
PWA’s zijn meteen via een browser beschikbaar – je hoeft ze niet eerst te downloaden en te installeren. Dat zorgt voor het extra voordeel dat je een PWA vrijblijvend kunt testen. Je kan een PWA bovendien via een WebAPK's installeren voor een betere integratie in het besturingssysteem. Niet alle browsers en besturingssystemen ondersteunen alle functies van PWA's. Veel hangt af van of iOS-toestellen deze techniek zullen ondersteunen. WebAPK's zijn bovendien een techniek waarmee nog veel wordt geëxperimenteerd en waarvan de toekomst onzeker is.
Enkele PWA's kunnen nu al gebruikmaken van de functies van het gebruikte mobiele toestel (push-berichten, geolocalisatie, camera, microfoon, sensoren van het apparaat). Niet alle functies van het toestel kunnen worden gebruikt (je hebt bijvoorbeeld geen toegang tot contacten, kalender, bluetooth, NFC). Zelfs als het door een betere browser-ondersteuning al snel mogelijk zal zijn om PWA's beter in het besturingssysteem te integreren, zal de integratie van de toestelfuncties via een native app altijd beter zijn.
Updates hoeven niet worden gedownload, omdat de app altijd automatisch bij het openen wordt geactualiseerd, als je internettoegang hebt. PWA's kunnen echter ook zonder internetverbinding worden gebruikt. Het staat niet vast of PWA's een gevestigde plaats op de markt kunnen krijgen. De kans dat dit lukt bestaat echter wel, omdat de verantwoordelijke van het app-formaat – Google – een van de invloedrijkste software- en internetbedrijven ter wereld is. Bovendien is het formaat een open web-technologie met veel invloedrijke ondersteuners.
Een PWA heeft bijna geen opslagruimte nodig en gebruikt minder resources dan een native app, terwijl de performance wel vergelijkbaar is. Geen klassieke integratie mogelijk in de app drawer van het toestel.
PWA's kunnen via zoekmachines worden gevonden en online worden verbonden. Ze zijn onafhankelijk van het gesloten ecosysteem van een app store. PWA’s kunnen niet in de app store worden aangeboden..

De genoemde kenmerken tonen de status quo van het prestatievermogen van progressive web apps – tenminste, wat de mogelijkheden betreft die je op dit moment via de nieuwste versies van gebruikelijke browsers zoals Google Chrome, Mozilla Firefox en Opera kunt gebruiken. Er zijn al enkele signalen dat het PWA-formaat in de toekomst uitgebreider ondersteund zal worden. Microsoft werkt bijvoorbeeld aan de integratie van service workers in de Edge-browser. Alleen Apple heeft nog niet laten weten of ze het PWA-formaat actief zullen ondersteunen – Apples Safari-browser ondersteunt PWA's slechts beperkt. Via Safari kun je PWA's bijvoorbeeld nog niet offline gebruiken. Bovendien is het nog niet mogelijk om een PWA in de app-drawer van iOS-toestellen te integreren.


progressive apps of native apps

Kunnen PWA's het tegen native apps opnemen?

Voor nieuwe app-formaten is het altijd moeilijk een gevestigde plaats op de markt te vinden. Normale web apps en hybride apps zijn bijvoorbeeld niet zo populair op mobiele apparaten als native apps. Progressive web apps hebben daarentegen een betere kans om een gevestigd formaat voor apps te worden, omdat de technische basis uitermate geavanceerd is en het formaat van veel kanten wordt ondersteund. De grote vraag is op dit moment of Apple een betere integratie van het PWA-formaat zal gaan aanbieden. Daardoor zouden progressive web apps waarschijnlijk binnen korte tijd sterke concurrenten van native apps kunnen worden.

Maar Apple heeft goede redenen om verder aan het native app-formaat vast te houden en het moeilijk te maken voor progressive web apps op iOS-toestellen. Apple verdient namelijk veel met aankopen via de app store en zorgt er zo ook voor dat gebruikers aan de eigen diensten worden gebonden. Ook de gegevens die via native apps en de app store worden verzameld, spelen een belangrijke rol. Als Apple het PWA-formaat in zoverre zou ondersteunen, dat veel apps op iOS en macOS ook als progressive web app in plaats van native app kunnen worden gebruikt, zou het resultaat zijn dat ontwikkelaars en gebruikers van Apple niet meer afhankelijk zijn van de app store. Deze binding aan de eigen store zou Apple waarschijnlijk alleen dan opgeven, als het PWA's lukt om populairder en meer gebruikt te worden dan native apps.

Toch lijkt de markt voor progressive web apps ook zonder de complete ondersteuning van Apple groot genoeg en winstgevend te zijn. Succes op lange termijn is echter alleen mogelijk als ook de gebruikelijke browsers het formaat beter ondersteunen. We kunnen er wel van uitgaan dat de compatibiliteit van PWA's wordt verbeterd als de Chrome-browser verder wordt ontwikkeld, en dat het eenvoudiger wordt om PWA's op Android te integreren. Naast Google zijn o.a. ook Mozilla en Opera voorstanders van het PWA-formaat. De beschikbare compatibiliteit van hun browsers met PWA's wordt waarschijnlijk verder uitgebreid. De voorstanders van progressive web apps zijn voornamelijk partijen uit de internetindustrie en de software-industrie die profiteren van open computer- en informatietechnologieën.


Samenvatting: zijn progressive web apps de toekomst?

Het begrip "progressive web app" is niet alleen maar een modewoord of een marketingterm – PWA's bieden app-ontwikkelaars nieuwe mogelijkheden. Door de verdere ontwikkeling van "normale" web apps zijn er zeker revolutionaire mogelijkheden ontstaan: de apps zijn progressief, omdat ze zich aanpassen aan de functies van de gebruikersomgeving – hoe meer mogelijkheden het gebruikte toestel en de gebruikte browser hebben, hoe beter de prestaties zijn van een PWA.

Als je een PWA op een desktop of laptop opent, ziet deze eruit als een gewone website. Maar als je hem op een smartphone of tablet opent, krijg je een web app die eruitziet als een native app. Afhankelijk van de specificaties van je mobiele toestel kan de applicatie gebruikmaken van functies zoals de camera, microfoon, push-berichten en gps.

De voordelen van progressive web apps zijn helder en veelbelovend: je hoeft ze niet te downloaden of te installeren. Als ze worden geopend, worden ze automatisch geactualiseerd. Ze gaan zuinig om met de toestelresources en hebben niet per se een internetverbinding nodig. Doordat PWA's platform overschrijdend functioneren, is het mogelijk ze eerst online te testen, voordat je ze uitgebreider in je toestel integreert. Bovendien is de reactietijd van de applicatie een belangrijk punt. Tot nu toe hadden native apps de beste ‘look and feel’, maar ook op dit gebied zijn PWA's ondertussen in staat dezelfde prestaties te leveren.

Een groot voordeel voor ontwikkelaars is het feit dat het eenvoudiger en goedkoper is om een PWA te programmeren, omdat je slechts één applicatie nodig hebt die zowel als website en app kan functioneren voor alle platformen. De mogelijkheden van een PWA pakken dus goed uit voor aanbieders alsook voor gebruikers. Een nadeel ligt bij de ondersteuning van alle functies van het gebruikte mobiele toestel. Qua functies kunnen progressive web apps pas met native apps concurreren als ze net zoals native apps toegang tot alle mogelijkheden van een toestel krijgen (hoewel PWA's waarschijnlijk nooit even goed geïntegreerd kunnen worden).

Het grotere probleem is dat Apple niet bereid is om het app-formaat te ondersteunen. De browsers van de meeste aanbieders (Google, Mozilla, Microsoft, Opera) zullen er hard aan werken om ervoor te zorgen dat het open PWA-formaat zo snel en zo goed mogelijk in hun producten wordt geïntegreerd. Daarentegen is Apple er in principe niet in geïnteresseerd, omdat het bedrijf aanzienlijk profiteert van het geïsoleerde app-systeem van iOS en macOS en de daarbij behorende app store.

We zullen in de toekomst merken of progressive web apps daadwerkelijk kunnen concurreren met native apps – de kans dat het zo ver komt is vanwege de bekende ondersteuners uiterst groot. Het is maar de vraag of het PWA-formaat ooit geheel compatibel zal zijn met het besturingssysteem en de browser van Apple. Maar als het PWA-formaat in de toekomst populairder wordt en ontwikkelaars en gebruikers tevreden zijn, zal ook de terughoudendheid van Apple verdwijnen wat progressive web apps betreft. Over het algemeen kunnen marktleiders het zich niet veroorloven om een baanbrekende en succesvolle technologie te negeren.

  • Gecertificeerde veiligheid

    Gecertificeerde veiligheid
  • Beste hostingbedrijf

    Beste hostingbedrijf
  • MKB Best Choice

    MKB Best Choice
  • Professionele support

    Professionele support
  • Hosted in Germany

    Hosted in Germany