De Progressive Web App: alles wat je moet weten

Bij veel bedrijven neemt de vraag naar nieuwe, interactieve en makkelijk te gebruiken applicaties toe. Waar zij 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 functionaliteiten van een native app te gebruiken in webapplicaties. In dit artikel lees je alles wat je van de Progressive Web App moet weten.

Wat is een Progressive Web App?

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 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 elementen:

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.

Offline te gebruiken 

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

App-achtige interacties

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.

Up-to-date

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.

Veilig

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.

Vindbaar

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

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. In dit geval is dat in de vorm van een snelkoppeling op het home screen.

Welk problemen lost de Progressive Web App op?

Probleem 1. Native apps hebben hoge ontwikkelkosten

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.

Probleem 2. Traditionele web apps missen apparaat- en performancemogelijkheden van native apps

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.

Wat wordt er met app shell architectuur bedoeld? Simpel gezegd: 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.).

Probleem 3. Native apps hebben relatief hogere distributiekosten

App ontwikkelaars besteden geregeld zoveel aan de distributie van applicaties, dat de investering moeilijk terug te verdienen is met de verkoop van het product.

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.

Probleem 4. Native apps zijn niet indexeerbaar door zoekmachines

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.

Probleem 5. Traditionele web apps missen mogelijkheden om gebruikers betrokken te houden

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

Uit onderzoek blijkt dat de helft 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.

Uit een onderzoek 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 plaats vond onder mobiele gebruikers. Dit komt volgens hen mede door de snelheid, offline beschikbaarheid en het gebruiksgemak die de PWA met zich meebrengt.

Voorbeelden van PWA’s

Hieronder enkele voorbeelden van PWA’s. Probeer ze eens te openen op je mobiel en op je laptop of pc. De website op je laptop of pc lijkt op een normale webpagina, terwijl het op je mobiel lijkt op een app, dat komt omdat de PWA het apparaat herkent en zich daaraan aanpast.

Financial Times

Uber

2048

Spotify

De nadelen van een Progressive Web App

Nadeel 1. Langere ontwikkeltijd dan bij traditionele web app

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.

Voor websites die bijvoorbeeld geen realtime-data (nieuwsfeeds, updates etcetera) 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, etcetera).

Nadeel 2. Niet alle platformen bieden dezelfde ondersteuning

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. Microsoft is ook een groot fan 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 tien jaar. 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.

Voordelen van een Progressive Web App

Aan de Progressive Web App zijn ook heel veel voordelen verbonden. Een groot aantal apps zouden vervangen kunnen worden door een PWA. Een Progressive Web App heeft namelijk aardig wat voordelen tegenover zowel native- als web apps.

Voordeel 1, Geen dubbele ontwikkelkosten 

Een groot nadeel van het ontwikkelen van native applicaties is dat er een hoop dubbele kosten zijn om de applicaties compatibel te maken met verschillende besturingssystemen en apparaten. Bij een PWA vallen deze dubbele kosten weg omdat er een universele applicatie ontwikkelt wordt voor ieder platform. Het is dus aanzienlijk goedkoper om een Progressive Web App te laten maken in plaats van een native applicatie.

Voordeel 2. Ruimtebesparend

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 honderd keer minder ruimte in beslag dan de native app. Dit betekent niet alleen dat de gebruiker opslag bespaart op zijn apparaat, maar ook dat de app sneller downloadt en opstart.

Voordeel 3. Meer mogelijkheden

Op gebied van gebruiksgemak en engagement liepen web applicaties altijd enigszins achter op native applicaties. Ze kregen geen toestemming 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.

Voordeel 4. Marketing mogelijkheden (indexeerbaar)

Op het gebied van marketing 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. 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.

Voordeel 5. Relatief makkelijk op te pakken door web developers

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.

Verschil Progressive Web App en Hybride App

Naast de progressive web app bestaat er ook al de hybride app, een andere soort applicatie 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. Het verschil met de PWA zit in de basis: een hybride app wordt via de app store op je Android-toestel of iOS-apparaat geïntegreerd en imiteren vervolgens de functies van native apps – dat heeft voor- en nadelen.

Naast de eenvoudigere ontwikkeling is de integratie in het besturingssysteem een van de belangrijke 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.

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.

Meer dan een nieuwe term

Het begrip “progressive web app” is meer dan een nieuwe term – ze bieden app-ontwikkelaars veel nieuwe mogelijkheden. De apps zijn progressief, omdat ze zich aanpassen aan de functies van de gebruikersomgeving. 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. Daarnaast kan een PWA gebruik maken van de funcites van je mobiele toestel, zoals de camera, microfoon, push-berichten en gps. Het loont dus zeker om de mogelijkheden van een PWA voor je bedrijf te bekijken.