‘Progressieve web-apps’ hebben de toekomst

Webtechnologie verandert in een razend tempo. Het aanbod van programmeertalen, raamwerken, tools en platformen biedt een rijke omgeving voor snelle innovatie en groei. Bijblijven met deze veranderingen is nagenoeg een fulltime-bezigheid, mede vanwege het uiteenlopende spectrum, variërend van formele programmeertalen tot abstracte cloud architecturen. Als gevolg van deze grote hoeveelheid innovatie is door Google het concept van progressive web app (pwa) geïntroduceerd, een hybride variant van website en app.

Conceptueel is een progressieve web app (pwa) niets meer dan een webapplicatie. Dit houdt in dat je geen software development kit (sdk) nodig hebt om een pwa te bouwen, zoals je dat wel nodig hebt voor een native Android- of iOS-applicatie. In 2007 kondigde Steve Jobs aan dat het pwa-concept de standaard zou gaan worden voor iPhone-applicaties. Ondanks deze visie werd er kort daarna alsnog een sdk vrijgegeven, wat uiteindelijk de populariteit van de huidige App Store aanzienlijk deed toenemen. Ironisch genoeg heeft Apple tot vrij recentelijke versies van iOS-ondersteuning voor pwa’s geblokkeerd. Vele andere bedrijven hebben soortgelijke producten als pwa’s geïntroduceerd, waarbij webtechnologie centraal staat. Enkele voorbeelden zijn Windows Store Apps, Cordova/PhoneGap-apps en Electron-apps.

Ondertussen heeft het web een aanzienlijke groei doorgemaakt, waardoor pwa-ontwikkeling steeds toegankelijker is geworden. Deze ontwikkeling heeft geresulteerd in een herdefinitie van pwa’s, in 2015 geïntroduceerd door Google Chrome-engineers Frances Berriman en Alex Russell. Hierbij kunnen gebruikers gewone webapplicaties upgraden naar progressieve webapplicaties door gebruik te maken van native OS features (bijvoorbeeld push-notificaties en offline-gebruik). Hoewel pwa’s voornamelijk gericht waren op Android- en iOS-apparaten heeft ook desktop-ondersteuning zich inmiddels in enkele mainstreambrowsers gevestigd. Een mooi voorbeeld hiervan is het nieuwe Google Stadia-platform, waar de pwa-feature beschikbaar is op zowel mobiele als desktop-apparaten.

Elementen en patronen

De diversiteit van pwa-features in browsers en de bijbehorende ondersteuning heeft geleid tot de ontwikkeling van twee kenmerkende strategieën voor het ontwikkelen van webapplicaties. De eerste strategie, genaamd graceful degradation, richt zich op het aanbieden van de nieuwste features aan gebruikers, waarbij de prioriteit ligt bij het gebruik maken van moderne features in browsers. Dit leidde op zijn beurt naar het tegenovergestelde progressive enhancement, waarbij stabiele features de prioriteit hebben en daarna geleidelijk moderne features worden toegevoegd. De laatste is tevens de strategie die ten grondslag ligt aan pwa’s.

In essentie bevat een pwa drie kernelementen:het moet gebruik maken van https,een pwa heeft een ‘service worker’ voor achtergrondtaken en offline-gebruik en het heeft een ‘manifest’ met informatie over de pwa

Naast deze kernelementen zijn er verschillende patronen voor het bouwen van pwa’s. Een goed voorbeeld is een App Shell Model-architectuur, die onder andere de opstarttijd verbetert en hiermee dicht in de buurt komt van native applicaties. Bij dit patroon wordt de applicatieschil offline gecached, waardoor de laadtijd bij het opstarten van de applicatie nihil is. Bovendien kan dit patroon gebruikt worden in combinatie met zowel server-side rendering (ssr) als client-side rendering (csr). Statische website hebben waarschijnlijk meer baat bij het gebruik van ssr, waar hoog interactieve applicaties juist meer kunnen halen uit csr. Bij een pwa kunnen beide strategieën naast elkaar worden geïmplementeerd. Een lijst met veelvoorkomende patronen, opgesteld door Google, kan worden gebruikt bij het bouwen van hedendaagse pwa’s.

Wel of niet voor pwa kiezen

Er zijn een aantal redenen waarom pwa’s vandaag de dag relevant zijn. Het feit dat de technologie actief wordt ontwikkeld, erkend en gebruikt, wijst op potentie en toekomstperspectief, zowel op technologisch als economisch gebied. Dit wordt verwezenlijkt door een aantal pwa-statistieken die toenames aantonen in conversie, betrokkenheid van gebruikers en prestaties op netwerken met een lage bandbreedte, zoals 2G.

Een ander voordeel is de standaard beveiliging, gezien pwa’s gebruik van transport layer security (tls) via https afdwingen. Daarnaast zijn pwa’s financieel aantrekkelijk omdat ze, per definitie, meerdere platformen ondersteunen zonder dat daar extra ontwikkeling voor benodigd is. Bovendien is een pwa nog altijd niets meer dan een web applicatie, waardoor pwa’s te indexeren zijn voor zoekmachines en zich lenen voor search engine optimization (seo) zoals elke andere website.

Er zijn echter ook redenen om een pwa niet boven een native applicatie te kiezen. Niet alle pwa-features worden altijd even goed ondersteund door alle apparaten. Zo vormt offline ondersteuning nog regelmatig een probleem. Let wel dat, zelfs in dit geval, progressive enhancement zorgt voor een solide basis. Daarnaast is toegang tot native features ten opzichte van native applicaties nog altijd gelimiteerd. Ondanks dat dit gat zich langzaamaan lijkt te sluiten is het voor nu nog altijd verstandig om te kiezen voor native applicaties wanneer functionaliteiten afhankelijk zijn van features als kalenders, contacten of sms-berichten. Deze features worden momenteel dan ook nog niet ondersteund in pwa’s.

Bovendien blijft er een verschil in prestaties van een pwa ten opzichte van een native app, waar native apps nog altijd winnen. In het geval dat een applicatie duidelijke kwaliteitseisen stelt is het hoogstwaarschijnlijk beter te kiezen voor native applicatieontwikkeling. Misschien wel de grootste keerzijde aan pwa’s is nog het gebrek van een centrale (en officiële) ‘pwa-store’, waardoor het voor eindgebruikers lastig is om op één plek pwa’s te doorzoeken. Dit heeft tot gevolg dat uiteindelijk de blootstelling van pwa’s wordt gelimiteerd, wat ten nadelen is voor de technologie. Desondanks lijkt er een eerste poging te zijn gedaan, genaamd pwa Rocks, om dit probleem te verhelpen.

De toekomst van pwa

We hebben gezien hoe pwa’s zijn ontstaan en welk pad ze tot dusver hebben afgelegd. Terwijl de technologie steeds meer stabiliseert, zien we pwa’s tegenwoordig overal om ons heen. Het concept en de bijbehorende technologie hebben hun weg gevonden naar moderne raamwerken als Angular, React en Vue. Het installeren van pwa-features is vaak niets meer dan het uitvoeren van een enkel commando, wat de drempel voor pwa-adoptie nog wat verder verlaagt.

Kijkend naar de pwa-ondersteuningstabel zien we dat de meeste grote browsers inmiddels ondersteuning bieden voor pwa’s. Ondanks dat Apple iOS hierbij nog altijd wat achterloopt is het aannemelijk dat ondersteuning ook daar zal toenemen. Verschillende metrieken laten zien dat native applicaties nog altijd dominant zijn ten opzichte van webapplicaties, maar wellicht staan we nog maar aan de vooravond van globale pwa-adoptie. Het is daarom niet meer dan logisch om jezelf af te vragen of pwa’s in de toekomst zullen domineren over native applicaties. Wat houdt de twee uit elkaar? Wat brengt ze samen? De tijd zal het leren.

Nicky Lenaers, software engineer bij TMC