Blog
De Progressive Web App: alle feiten en must-knows op een rij
10 min
Bij onze klanten neemt de vraag naar nieuwe, interactieve en makkelijk te gebruiken applicaties toe. Waar klanten in het verleden vaak moesten uitwijken naar een 'native' Android of iOS app, is het met de komst van de Progressive Web App (PWA) mogelijk geworden om een groot deel van de native functionaliteit te gebruiken in webapplicaties.
In dit artikel zetten we uiteen wat je van de Progressive Web App moet weten.
Een Progressive Web App (PWA) is een webapplicatie die beschikt over functionaliteiten die voorheen alleen waren weggelegd voor native desktop- of mobiele applicaties.
De PWA is ontstaan door de ontevredenheid van de twee bedenkers (Frances Berriman en Alex Russell) over de verschillende producten die er op de markt waren om gebruikers een native-ervaring aan te bieden.
Wat is precies een 'native-ervaring'? Denk hierbij aan kenmerken van de 'gewone' apps die je vanuit de App Store of Google Play Store kunt installeren op je telefoon of tablet. Deze apps hebben push-notificaties, kun je offline gebruiken, en ze hebben vaak een heel ander uiterlijk dan een website. Progressive Web Apps hebben deze functies ook en lijken dus heel erg op 'normale' of native apps.
Hoe krijgt een PWA dit precies voor elkaar? De bedenkers zijn op zoek gegaan naar technologieën die gecombineerd konden worden om de werking van een native app na te bootsen. Een van deze nieuwe technologieën is de Service Worker. Een soort proxy, die tussen de server en de client draait om eventueel data te cachen en continu op de achtergrond kan luisteren naar events zoals push-notificaties.
Om een webapplicatie een echte PWA te kunnen noemen, moet deze beschikken over de volgende een aantal karakteristieken:
Een webapplicatie is responsive wanneer deze goed schaalt op ieder apparaat dat toegang heeft tot de applicatie. Dat wil zeggen, dat de website even leesbaar is op een telefoon met een relatief klein scherm als op een desktop met een 4k scherm. Dit is van belang voor het gebruikersgemak van de eindgebruiker.
Om de gebruikerservaring optimaal te houden, is het van belang dat de applicatie ook nog werkt als de gebruiker even geen internetverbinding tot zijn beschikking heeft. Dit kan zijn in de vorm van een offline-pagina, dan wel een gecachte versie van de applicatie. Het tonen van een browser error dat de gebruiker offline is, dient voorkomen te worden. Hiervoor dient de PWA te beschikken over een Service Worker.
Een service worker is een stukje JavaScript dat op de achtergrond in de browser van de gebruiker opereert. De service worker kan onder andere webpagina’s cachen om te zorgen voor een snellere laadtijd en eventueel offline gebruik van de webapplicatie. De service worker draait continu op de achtergrond. Een van de voordelen hierbij is, dat de webapplicatie kan luisteren naar push-notificatie events en op de achtergrond data kan synchroniseren.
De gebruiker moet zoveel mogelijk het gevoel moet krijgen dat hij te maken heeft met een app, in plaats van een website. Denk hierbij aan swipe-bewegingen om bijvoorbeeld een sidebar-menu in of uit te klappen of geanimeerde paginaovergangen, maar ook laad-icoontjes of skeleton-views zodat de gebruiker weet waar de applicatie mee bezig is.
De applicatie moet altijd beschikken over de laatste informatie. Ondanks dat er met een cache-first pattern kan worden gewerkt, moet de informatie in de applicatie worden geüpdatet zodra deze beschikbaar is.
De data die de PWA verstuurt en ontvangt, moeten worden versleuteld en moeten voldoen aan het Transport Layer Security (TLS) protocol. Hierdoor kunnen de data die gebruikers versturen niet door derden gelezen worden.
Door gebruik te maken van een zogeheten webmanifest, is de applicatie eenvoudig te indexeren voor zoekmachines. Dit webmanifest geeft de belangrijkste kenmerken van de applicatie aan, denk hierbij aan de naam, korte naam, omschrijving en de iconen.
Verder staan er een aantal variabelen in die nodig zijn om de applicatie op een apparaat te installeren (splash-screen, theme-color etc.).
De applicatie heeft toegang tot “engagement”-functies van het apparaat. Denk hierbij aan optie om push-notificaties te versturen en ontvangen. Dit gebeurt met behulp van de Service Worker.
Als de app aan de bovenstaande eisen voldoet, zullen compatibele browsers zelf een pop-up aan de gebruiker tonen met de mogelijkheid om de applicatie te installeren. In dit geval is dat in de vorm van een snelkoppeling op het home screen.
De Progressive Web App (PWA) vult het gat tussen native desktop- of mobiele applicaties en web applicaties. De PWA heeft de eigenschappen van webapplicaties, zoals onder andere de universele werking en design. Waar een website op ieder apparaat werkt, moeten native applicaties per platform ontwikkeld en ontworpen worden. Dit zorgt voor hoge ontwikkelkosten bij een native app, die er niet zijn bij webapplicaties.
Het is vaak het geval dat web apps traag laden in vergelijking met native applicaties. Dit komt doordat de applicatie iedere keer de volledige User Interface (UI) op moet halen. Dit in combinatie met het ophalen van de content kan zorgen voor een traag aanvoelende applicatie, die haperingen vertoont in de UI. Door gebruik te maken van een app shell architectuur, is de UI direct geladen en spelen animaties vloeiend af.
Wacht, wat? Wat wordt er met app shell architectuur bedoeld? Simpel gezegd is dit is een manier van bouwen waarbij de basiselementen die de app nodig heeft om te werken offline worden bewaard op het apparaat van de gebruiker. Daardoor hoeft niet elke keer alles opnieuw opgehaald te worden van het internet.
Daarnaast kan de content gecached worden door gebruik te maken van één van de cache strategieën voor de service worker. Dit zorgt dan dus voor een snelle en vloeiende gebruikerservaring, waardoor gebruikers ook langer op de website blijven en de conversieratio toeneemt.
De PWA combineert dus de voordelen van zowel native apps als traditionele web apps. De PWA is offline te gebruiken, responsive en aanzienlijk sneller door gebruik te maken van cache strategieën en de app shell. Op deze manier vult de PWA het gat tussen native en web applicaties.
Hier moet wel bij vermeld worden dat PWA’s (nog) niet de vervanger zijn van de native applicatie. Het is belangrijk om de grenzen van een technologie te kennen en bij de PWA ligt deze grens bij het ontwikkelen van zware grafische- of processor-intense applicaties. Hiervoor heeft de PWA nog niet genoeg toegang tot de resources van het apparaat (processor, GPU etc.).
Over het algemeen wordt het grootste probleem van traditionele software omschreven als zijnde het distribueren van het product. App ontwikkelaars besteden geregeld zoveel aan de distributie van applicaties, dat de investering moeilijk terug te verdienen is met de verkoop van het product (ORI Solutions, 2019).
Zo moeten developers die hun app via de App Store van Apple distribueren en hieraan verdienen, 30% van hun inkomsten afstaan aan Apple. Door een applicatie niet in een app store maar op het web te plaatsen, is het eenvoudig om het product snel en efficiënt te verspreiden, net als een website.
Een ander probleem waar native apps tegenaan lopen, is de indexeerbaarheid door zoekmachines. Over het algemeen kan de content van deze apps niet geïndexeerd worden.
Bij een PWA is dit anders! Hierbij kan niet enkel de applicatienaam, maar ook de content volledig geïndexeerd worden. Dit betekent dat de PWA grote voordelen heeft tegenover native-applicaties op het gebied van Search Engine Optimization (SEO) en Search Engine Advertising (SEA). Daarnaast heeft Google aangekondigd dat “mobile-friendly” content hoger in de zoekresultaten terecht komt (Kloboves, 2016).
Bij web apps is het vaak lastig om de gebruiker betrokken te houden en deze terug te laten keren. Progressive Web Apps hebben toegang tot push-notificaties waarmee gebruikersbetrokkenheid en terugkeer aanzienlijk omhoog gaat.
De mogelijkheid om de PWA te installeren als een reguliere app betekent dat gebruikers de app op hun eigen apparaat hebben en hierdoor vaker van de app gebruik maken. Zodra de website BookMyShow – India's grootste ticketverkoop bedrijf – haar mobiele website om had gezet naar een PWA, stegen de conversies met 80% (Google, 2017).
Uit onderzoek (Comscore, 2016) blijkt dat 50% van de Amerikaanse smartphone gebruikers gemiddeld 0 apps per maand download. De helft van alle smartphone gebruikers bezoekt dus liever websites dan het downloaden van native apps. De verwachting is dat deze trend de komende jaren verder door zal zetten en dat app store downloads met de toenemende populariteit van PWA’s exponentieel af zullen nemen.
Uit een onderzoek (Alibaba & Google, 2017) van webgigant Alibaba.com kwam tevens naar voren, dat na het ombouwen van hun mobiele site naar een Progressive Web App er een 76% hogere conversie plaatsvond onder mobiele gebruikers. Dit komt volgens hen mede door de snelheid, offline beschikbaarheid en het gebruiksgemak die de PWA met zich meebrengt. Een reserveringssysteem is bijvoorbeeld erg geschikt voor een PWA.
De PWA is dus een goede oplossing voor bedrijven of particulieren die het budget voor het bouwen van een app niet kunnen of willen besteden aan het ontwikkelen van een native product voor ieder los platform (iOS, Android, Windows, macOS).
Het is echter wel van belang dat de applicatie geen zware rekenkracht vereist of functionaliteiten nodig heeft die, voornamelijk op iOS, nog niet beschikbaar zijn voor PWA's.
De PWA is een opkomende technologie. Net als bij de opkomst van de blockchain, circa 2017, kan er veel enthousiasme ontstaan rondom een nieuwe technologie. Dit enthousiasme uit zich vaak in een golf van uitgedachte use cases die niet per se voordelen halen uit het gebruik van de nieuwe technologie. Dit fenomeen heet de Hype Cycle van Gartner (Gartner, Inc., z.d.).
In bovenstaande grafiek wordt beschreven hoe de populariteit en verwachting van een nieuwe technologie in de loop van de tijd verandert. Volgens Gartner bevond de Progressive Web App zich in 2018 rond de “peak of inflated expectations” (Leow, 2018). Het is belangrijk om goed na te gaan of een website wel of niet over PWA functionaliteit zou moeten beschikken en dus niet maar overal een PWA voor te gaan ontwikkelen.
Het is daarom goed om per use case te kijken of de voordelen opwegen tegen de nadelen.
Zoals hierboven vermeld, zijn PWA’s niet de oplossing voor iedere use-case. Er zijn nog altijd cases waarbij het beter is om een native app te ontwikkelen, omdat er bijvoorbeeld functionaliteit vereist is die (nog) niet beschikbaar is voor een PWA. Een andere use case waarbij het beter is om een native app te ontwikkelen, is wanneer de app veel CPU (processor) intensieve taken moet verwerken.
Aan de andere kant is het ook belangrijk om de afweging te maken of het voordeel oplevert om de PWA technologie toe te passen op een normale web-app, aangezien er voor een goede PWA een hoop extra man-uren kunnen gaan zitten in bijvoorbeeld het optimaliseren van de user experience en het implementeren van de service-worker.
Voor websites die bijvoorbeeld geen realtime-data (nieuwsfeeds, updates etc.) aan de gebruiker tonen, is het niet nodig om de website om te bouwen naar een PWA, omdat er hierbij niet veel voordelen te behalen vallen. Wanneer het platform interactief is, regelmatig updates ontvangt of ter vervanging of aanvulling dient van een mobiele (native) app is het project wél geschikt om de PWA technologie aan toe te voegen (denk hierbij aan nieuwssites, webapplicaties, sociale netwerken, etc.).
De Progressive Web App is nog een nieuwe technologie en daarom verschilt de ondersteuning tussen de verschillende besturingssystemen. Google pusht het gebruik van Progressive Web Apps, aangezien dit enkel voordelen heeft voor hun businessmodel. Google verdient nog altijd het meeste geld met hun webservices. Android en Chrome OS is voor hen enkel een platform om gebruik te maken van de services die Google aanbiedt. Microsoft is ook een groot aanhanger van de Progressive Web App, voornamelijk omdat er aanzienlijk minder Windows apps in de Microsoft Store te vinden zijn dan bij de concurrenten en ze dit gat willen opvullen door de app store te vullen met Progressive Web Apps.
Apple daarentegen verdient nog altijd veel geld met de App Store, meer dan €40 miljard in de afgelopen 10 jaar (Bhardwaj, 2018). Daarom is het voor hen belangrijk dat de App Store zo lang mogelijk de beste bron voor applicaties blijft. Apple is dus een van de weinige bedrijven die achterblijven met het ondersteunen van Progressive Web Apps.
Vanwege de toenemende populariteit heeft ondertussen Apple een groot deel van de PWA functionaliteiten toegevoegd aan iOS. Er kan echter nog geen gebruik worden gemaakt van push-notificaties en er wordt geen melding gegeven om de applicatie op het apparaat te installeren, wanneer de gebruiker de PWA in de browser bezoekt. Dit zijn functionaliteiten die met het App Store verdienmodel concurreren. Met iedere iOS update voegt Apple weer meer PWA functionaliteiten toe, en de verwachting is dat het niet heel lang meer zal duren voordat er op iOS ook een volwaardig PWA-ervaring beschikbaar is.
Image by Freepik
Aan de PWA zitten ook een heleboel voordelen verbonden. Een groot aantal apps, denk aan nieuws-apps, sociale netwerken en andere relatief simpele applicaties zouden vervangen kunnen worden door een PWA. Een Progressive Web App heeft namelijk aardig wat voordelen tegenover zowel native- als web apps.
Een groot nadeel bij het ontwikkelen van native applicaties is, dat er een hoop dubbele kosten zijn om de applicaties compatibel te maken met de verschillende besturingssystemen en apparaten. Bij een PWA vallen deze dubbele kosten weg aangezien er een universele applicatie ontwikkelt wordt voor ieder platform. Afhankelijk van de hoeveelheid besturingssystemen en apparaten waarvoor ontwikkeld moet worden, is het dus aanzienlijk goedkoper om een Progressive Web App te laten maken in plaats van een native applicatie.
Een ander voordeel tegenover een native applicatie, is de ruimte die de PWA inneemt op het apparaat waarop deze geïnstalleerd wordt. Als we de Pokeren.nl PWA als voorbeeld pakken, neemt deze 100 keer minder ruimte in beslag dan de native app. Dit betekent niet alleen dat de gebruiker lekker wat opslag bespaart op zijn apparaat, maar ook dat de app sneller downloadt tijdens het installeren en sneller laadt tijdens het opstarten.
Onder andere door de grootte van de PWA, is deze dus ook aanzienlijk sneller dan conventionele (web) applicaties. De service worker kan bijvoorbeeld (een deel van) de content cachen, zodat websites vrijwel onmiddellijk laad en offline gebruikt kan worden. De best practices beschrijven dat PWA’s gebruik moeten maken van skeleton views en laad icoontjes, zodat de gebruiker weet waar het systeem mee bezig is. Dit laat de PWA sneller aanvoelen. Ideaal voor bijvoorbeeld een reserveringssysteem.
Op gebied van gebruiksgemak en engagement liepen conventionele web applicaties altijd enigszins achter op native applicaties. In tegenstelling tot native applicaties konden deze niet geïnstalleerd worden en daarom ook geen toegang krijgen tot apparaat-functionaliteiten zoals push-notificaties en API’s, die wel beschikbaar zijn voor native applicaties. Met de komst van de PWA is hier verandering in gekomen.
PWA’s zijn installeerbaar en hebben mede door gebruik te maken van de Service Worker toegang tot een aantal apparaat functies die voorheen enkel weggelegd waren voor de native applicaties. Een groot voordeel hierbij is tevens dat de applicaties na installatie en met behulp van de juiste cache-strategie ook offline gebruikt kunnen worden. Zeker in gebieden met een slechte of helemaal geen internetverbinding zorgt dit voor mogelijkheden, die er voorheen niet waren als er gekozen was voor een webapplicatie.
Door de snelheid en gebruiksvriendelijkheid van de PWA’s blijven gebruikers ook langer gebruik maken van de applicaties en zien deze dus bijvoorbeeld meer advertenties of producten langskomen dan bij conventionele web apps. Door het gebruik van push-notificaties zijn gebruikers eenvoudig te benaderen voor aanbiedingen of nieuws updates. Dit was voorheen enkel mogelijk door het bouwen van een native applicatie of gebruik te maken van een betaalde notificatie-service.
Op marketinggebied heeft de PWA ook een aantal voordelen. PWA’s zijn in de basis normale websites en kunnen dus gebruik maken van reguliere SEO & SEA strategieën.
In tegenstelling tot native apps is de volledige PWA indexeerbaar door zoekmachines. Door de geringe marketingmogelijkheden binnen de app stores is het lastig om te concurreren met de andere 2.000.000+ apps (Appfigures, 2018). Dit is dus een groot voordeel van de PWA.
Google plaatst sites die voor mobiele apparaten geoptimaliseerd zijn hoger in de zoekresultaten. PWA’s bieden dus ook voordelen qua ranking, en uit cijfers blijkt dan ook dat de PWA vrijwel altijd aanzienlijk meer gebruikers heeft dan de mobiele site die deze vervangt. Een Progressive Web App is dus eenvoudig te verspreiden en biedt een frictieloze installatie aan de gebruiker. Dit zorgt voor meer installaties en terugkerende gebruikers.
Een groot voordeel is dat de bijscholing die nodig is om ontwikkelaars te onderwijzen in het ontwikkelen van Progressive Web Apps, goed aansluit op de skills, die webontwikkelaars tegenwoordig vaak al bezitten. Er hoeven daarom over het algemeen geen nieuwe talen geleerd te worden en de concepten die gebruikt worden, sluiten goed aan op de technologieën waar al mee gewerkt wordt.
Om de voor- en nadelen duidelijk in beeld te brengen is er een SWOT-analyse gemaakt. Hierin worden de sterktes (Strenghts), zwaktes (Weaknesses), kansen (Opportunities) en bedreigingen (Threats) tegenover elkaar gezet om een goed overzicht te vormen van de huidige status van deze technologie.
De nadelen van de Progressive Web App hebben voornamelijk betrekking op het verschil in ondersteuning tussen de verschillende besturingssystemen. Google is groot supporter van Progressive Web Apps en op Android kunnen deze dan ook alle functionaliteit benutten. Apple daarentegen, blijft nog enigszins achter qua ondersteuning om zo lang mogelijk het gebruik van de App Store te stimuleren (aangezien dit miljarden aan winst oplevert). Hiermee moet dus rekening gehouden worden bij het ontwikkelen van de PWA.
Het grote voordeel van de PWA’s zijn de lagere ontwikkelkosten ten opzichte van native-applicaties, de performance en bestandsgrootte van de applicaties en het gebruiksgemak in verhouding tot conventionele web apps, doordat PWA’s over het algemeen meer aanvoelen als native apps dan als web apps.
Progressive Web Apps vullen het gat tussen native- en web applicaties. Ze bieden de oplossing voor dubbele ontwikkelkosten (voor verschillende platformen), het distributieprobleem dat bij conventionele software aanwezig is, en het gebrek aan performance- en apparaatmogelijkheden, dat speelt bij normale web apps.
Wil je ook een Progressive Web App laten maken? We gaan graag voor je aan de slag.
