Violet88 Bel direct 030 227 14 29

De Progressive Web App

Alle feiten en must-knows op een rij

Bij onze klanten neemt de vraag naar nieuwe, interactieve en makkelijk te gebruiken applicaties toe. Waar klanten in het verleden hiervoor vaak moesten uitwijken naar een native Android of iOS app is het met de komst van de Progressive Web App mogelijk geworden om een groot deel van de native functionaliteit te gebruiken in webapplicaties.

 

In dit artikel zetten we uit een wat je van de Progressive Web App moet weten.

Wat is een Progressive Web App?

Een Progressive Web App (PWA) is een app die voldoet aan een aantal eisen, die in 2015 zijn opgesteld door Berriman (Designer) en Russel (Chrome ontwikkelaar). Deze is ontstaan door de ontevredenheid van de twee bedenkers over de verschillende producten die er op de markt waren om gebruikers een native-ervaring (push-notificaties, apparaat installatie, caching etc.) aan te bieden.

 

Hun doel was dan ook om door verschillende technologieën te combineren, webapplicaties te laten beschikken over verschillende functionaliteiten, die voorheen alleen waren weggelegd voor desktop- of mobiele applicaties. Een ander criterium was dat de applicatie wel een echte webapplicatie moest blijven en niet door een framework tot een native-app moest worden verpakt.

 

Om dit doel te bereiken, zijn de bedenkers gaan kijken naar nieuwe technologieën die gecombineerd kunnen worden tot een PWA. 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 website de PWA titel te geven moet deze beschikken over de volgende een aantal karakteristieken:*

  • Responsive
    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.

 

  • Niet afhangend van een internetconnectie (Service Worker)
    Om de gebruikerservaring optimaal te maken moet de applicatie ook nog functioneren bij het ontbreken van een internetconnectie. 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 werkt als een proxy tussen de cliënt en de webserver. Het is een stukje javascript, dat in de achtergrond in de browser van de cliënt 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.

 

  • App-achtige interacties
    Dit wil zeggen, dat de gebruiker zoveel mogelijk het gevoel moet krijgen dat deze met een native-app interacteert. Denk hierbij aan: Intuïtieve Swipe-bewegingen om bijvoorbeeld een sidebar-menu in of uit te klappen, ggeanimeerde paginaovergangen. laad-icoontjes of skeleton-views zodat de gebruiker weet waar de applicatie mee bezig is enzovoort.
    Dit zijn User Experience-criteria, die zorgen dat de gebruiker een goede gebruikservaring heeft en hopelijk zal kiezen om regelmatig terug te keren naar de applicatie en deze eventueel op zijn apparaat zal installeren.

 

  • Up-to-date
    De applicatie moet altijd beschikken over de laatste server informatie. Ondanks dat er met een cache-first pattern kan worden gewerkt, moet de informatie in de applicatie worden geupdate zodra deze beschikbaar is.

 

  • Veilig
    De data, die de PWA verstuurt en ontvangt, moet versleuteld worden en voldoen aan het Transport Layer Security (TLS) protocol. Hierdoor kunnen de data die gebruikers versturen, niet door derden gelezen worden.

 

  • Vindbaar
    Door gebruik te maken van het 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.).

 

  • Stimulatie tot wedergebruik
    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.

 

  • Installeerbaar
    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. De gebruiker moet een goede ervaring hebben, wanneer deze ervoor kiest om de applicatie te installeren. Hiervoor moet dus rekening gehouden worden met knoppen, styling etc.

 

  • Makkelijk te linken
    Een andere eigenschap van een Progressive Web App is, dat deze eenvoudig te linken moet zijn. Hiermee wordt bedoeld, dat de applicatie volledig moet werken zonder install en makkelijk te delen (linken) is via sociale netwerken of andere platformen. Dit voornamelijk, zodat de eerste interactie tussen de gebruiker en de applicatie een positieve ervaring is.


Als de webapplicatie voldoet aan bovengenoemde criteria, spreek je van een progressive web app. Er kan dus tot de conclusie gekomen worden, dat een progressive web app een web app is, die werkt met moderne technologieën, waardoor deze meer functionaliteit heeft dan een gebruikelijke webapplicatie en hierdoor ook installeerbaar en makkelijk te linken is.

Een Progressive Web App (PWA) is een web app die het beste van het web combineert met het beste van een native-applicatie. Het is dan ook een web app die aanvoelt en grotendeels functioneert als een native-app.

Welk probleem lost de Progressive Web App op?

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. Native applicaties zijn echter over het algemeen aanzienlijk sneller, krachtiger en kunnen in tegenstelling tot conventionele webapplicaties, offline worden gebruikt. De PWA combineert de voordelen van beide ontwikkelstrategieën. 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). 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-applicaties tegenaan lopen, is de indexeerbaarheid door zoekmachines. Over het algemeen kan de content van deze applicaties niet geïndexeerd worden. Bij een PWA 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 deze “mobile-friendly” content hoger in de zoekresultaten plaatst (Kloboves, 2016).


Het is vaak het geval, dat webapps 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 vertoond in de UI. Door gebruik te maken van een app shell architectuur, dit is een manier van bouwen waarbij de minimale HTML, CSS en JavaScript om de app te draaien offline wordt gecached op het apparaat van de gebruiker, is de UI direct geladen en spelen animaties vloeiend af. 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.

 

 

Bij webapplicaties 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. Ook de mogelijkheid om de PWA te installeren als een reguliere app betekent dat gebruikers de app op hun eigen apparaat hebben en hierdoor vaker met de applicatie interacteren. Zodra de website BookMyShow, Indiaas 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.


De PWA is dus dé oplossing voor bedrijven of particulieren, die het budget voor een native app niet kunnen of willen besteden aan het ontwikkelen van een product voor ieder los platform (iOS, Android, Windows, MacOS). 

Het is echter wel van belang, dat de applicatie geen zware rekenkracht vereist of functionaliteiten behoeft die, voornamelijk op iOS, nog niet beschikbaar zijn als web-api.

Wat zijn de voor- en nadelen van een Progressive Web App?

Het ontwikkelen van Progressive Web Apps (PWA’s) heeft een aantal voor- en nadelen tegenover het ontwikkelen van conventionele (web) applicaties. De PWA is een opkomende technologie. Net als bij het opkomen 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.). 

Hype Cycle

In bovenstaande grafiek wordt beschreven hoe de populariteit en verwachting van een nieuwe technologie in de loop van de tijd verandert. Volgens Gartner bevindt de Progressive Web App zich in 2018 (laatste analyse) 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 en niet zomaar overal een Progressive Web App van te maken. 

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 Applicatie te ontwikkelen, omdat er bijvoorbeeld functionaliteit vereist is, die (nog) niet beschikbaar is voor een PWA of er CPU- of GPU-intense taken moeten worden uitgevoerd. Aan de andere kant is het ook belangrijk om de afweging te maken of het nodig is om de PWA technologie toe te passen op een normale web-app, aangezien er voor een goede PWA een hoop extra manuren kunnen gaan zitten in 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, social networks 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 zaak, 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.

Voordelen

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 webapps.


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 applicatie aanzienlijk minder ruimte in beslag neemt op het apparaat, maar ook dat deze sneller laadt tijdens het opstarten en download bij de installatie.


Onder andere door de grootte van de PWA, is deze dus ook aanzienlijk sneller dan conventionele (web) applicaties. De service worker en de best-practises, die bij een PWA verwacht worden, spelen hier ook een grote rol in. 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.


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.


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 appstores is het lastig om te concurreren met de andere 2.000.000+ apps (Appfigures, 2018).


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. 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.


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. 

 

SWOT PWA

Conclusie

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 door de applicatie zo te ontwikkelen, dat alle functies zowel op iOS als Android functioneren. 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.

We vertellen je er graag meer over.

Progressive Web Apps vullen het gat tussen native- en web applicaties. Het biedt de oplossing voor dubbele ontwikkelkosten (voor verschillende platformen), het distributieprobleem, dat bij conventionele software aanwezig is en het gebrek aan performance en apparaat mogelijkheden, dat speelt bij normale web apps.

 

Wil je ook een Progressive Web App laten maken? We gaan graag voor je aan de slag.

Gerelateerde artikelen