Zijn Progressive Web Apps de toekomst?
Webtechnologie ondergaat grote veranderingen. Het enorme aanbod van raamwerken, programmeertalen, platformen en tools biedt een rijke omgeving voor snelle groei en innovatie. Deze veranderingen bijhouden is een flinke opgave, onder andere vanwege het uiteenlopende spectrum, variërend van abstracte Cloud architecturen tot formele programmeertalen. 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. PWA’s zijn vandaag de dag uiterst relevant en draaien her en der al in productie. Nicky Lenaers, Software Engineer bij TMC legt uit wat een PWA tegenwoordig is en waarom het relevant is.
Dit artikel is op 17-06-2020 verschenen op Computable.
Het ontstaan van PWA
Conceptueel gezien is een PWA niets meer dan een webapplicatie. Dit betekent dat er geen Software Development Kit (SDK) nodig is voor het bouwen van een PWA, in tegenstelling bij voor een native Android of iOS applicatie. Het PWA-concept zou de standaard gaan worden voor iPhone-applicaties, zo kondigde Steve Jobs aan in 2007. Echter werd er ondanks deze visie, kort daarna alsnog een SDK vrijgegeven. Dit deed de populariteit van de huidige App Store aanzienlijk 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 web technologie centraal staat. Enkele voorbeelden zijn Windows Store Apps, Cordova/PhoneGap apps, Electron apps en nog veel meer. Hiervan worden vele nog altijd actief gebruikt.
Het web heeft ondertussen 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. Gebruikers kunnen hierbij gewone webapplicaties upgraden naar progressieve web applicaties waarbij ze gebruik maken van native OS features (zoals offline gebruik en push notificaties). Ook al waren PWA'S voornamelijk gericht op Android en iOS apparaten, ook desktop ondersteuning heeft zich inmiddels in enkele mainstream browsers gevestigd. Het nieuwe Google Stadia platform, waar de PWA-feature beschikbaar is op zowel mobiele als desktop apparaten, is hier een mooi voorbeeld van.
Patronen en elementen
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:
- Een PWA moet gebruik maken van HTTPS
- Een PWA heeft een Service Worker voor achtergrondtaken en offline gebruik
- Een PWA heeft een Manifest met informatie over de PWA
Naast deze kernelementen zijn er diverse patronen voor het bouwen van PWA’s. Een App Shell Model architectuur is hier een goed voorbeeld van: hierbij verbetert onder andere de opstarttijd en komt hiermee dicht in de buurt 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 Client-Side Rendering (CSR) als Server-Side Rendering (SSR). Statische website hebben vermoedelijk meer baat bij het gebruik van SSR, waar hoog interactieve applicaties juist baat hebben bij CSR. Bij een PWA kunnen beide strategieën naast elkaar geïmplementeerd worden. Een lijst met veelvoorkomende patronen, opgesteld door Google, kan worden gebruikt bij het bouwen van hedendaagse PWA’s.
Overwegingen om wel of niet voor PWA te kiezen
Er zijn een diverse redenen waarom PWA’s tegenwoordig erg relevant zijn. Het feit dat de technologie actief wordt ontwikkeld, erkend en gebruikt wijst op potentie en toekomstperspectief, zowel op economisch als technologisch gebied. Dit wordt verwezenlijkt door een aantal PWA-statistieken die toenames aanduiden in conversie, betrokkenheid van gebruikers en prestaties op netwerken met een lage bandbreedte, zoals 2G.
De standaard beveiliging is een ander voorbeeld, gezien PWA’s het gebruik van TLS via HTTPS afdwingen. Ook 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 indexeerbaar zijn voor zoekmachines en zich lenen voor SEO zoals elke andere website.
Het kiezen van een PWA boven een native applicatie is echter niet altijd de beste optie. PWA-features worden niet altijd even goed ondersteund door alle apparaten. Offline ondersteuning kan nog regelmatig voor problemen zorgen. Maar zelfs in dit geval zorgt progressive enhancement voor een solide basis. Toegang tot native features is daarnaast ten opzichte van native applicaties nog altijd beperkt. Desondanks lijkt dit gat zich langzaamaan te sluiten en is het voor nu nog altijd verstandig om te kiezen voor native applicaties wanneer functionaliteiten afhankelijk zijn van features zoals contacten, sms-berichten of kalenders. 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.
PWA: de toekomst
We hebben gezien hoe PWA’s zijn ontstaan en welk pad ze tot op heden afgelegd hebben. 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 Vue, React en Angular. 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.
Als we kijken 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 ons leren.
Met het maken van de juiste keuze kan TMC Software zich richten op een haalbaarheidsstudie voorafgaand aan de implementatie. Meer weten? Neem dan contact op met Nicky Lenaers of Roger Hacking.