Hebben Progressive Web Apps een toekomst?

Het leven van Progressive Web Apps (PWA's) begon in 2015. Ze beloofden de kloof tussen web- en native apps te dichten. Hoe? Door de huidige webapps geleidelijk te verbeteren met nieuwe API's en functies, zoals de mogelijkheid om volledig offline te werken.

Hoewel grote spelers zoals AliExpress, Flipkart en Forbes in het verleden al PWA's introduceerden, gebruiken ze nog steeds hun apps en zijn ze niet van plan deze binnenkort in de steek te laten. Is de technologie tot stilstand gekomen? Zijn PWA's nog steeds relevant? Is het de moeite waard om tijd te steken in het (laten) maken en onderhouden van PWA's?

Tech editing website

Een PWA is een app die is gebouwd met webtechnologie zoals HTML, CSS en JavaScript, maar met de uitstraling en de functionaliteiten die nodig zijn om te concurreren met een native mobiele app. Om een PWA te maken begin je met een website of web-app en pas je best practices toe zoals:

-    Een beveiligde verbinding (HTTPS): Een beveiligde verbinding is verplicht voor PWA’s. Niet alleen vanwege veiligheidsredenen, het is ook een zeer belangrijke betrouwbaarheidsfactor voor gebruikers.

-    Een service worker: Een service worker is een afzonderlijk stuk JavaScript dat op de achtergrond draait. De service worker kan verzoeken aan en reacties van het internet onderscheppen en zo als proxy optreden. Wanneer een netwerk storing optreedt, kan de service worker een offline pagina laden of een bron uit de cache gebruiken en op de achtergrond bijwerken, zodat de gebruiker de best mogelijke ervaring krijgt.

-    Een webmanifest: dit bestand bevat informatie over hoe een PWA eruit moet zien en hoe die zich moet gedragen. Hierin staan de  naam, beschrijving, pictogrammen en kleuren die worden gebruikt in de opstart- en overzichtsvensters van het apparaat.

Deze technieken veranderen een slecht presterende web-app niet in een flitsende native-achtige app, maar ze verhelpen wel enkele tekortkomingen van de klassieke web-app. 

Een aantal succesverhalen uit 2017

Rond 2017 deelden grote spelers zoals Flipkart, Trivago, Forbes, MakeMyTrip, AliExpress en Twitter indrukwekkende resultaten over gebruikersbetrokkenheid met behulp van PWA's.

Flipkart

Flipkart koos voor een app-only-strategie en haalde zelfs hun mobiele website uit de lucht. Na de introductie van PWA's besloten ze die aanpak te heroverwegen. Ze wisten in veel opzichten hun web-aanwezigheid en hun native app succesvol te combineren:

  • Gebruikstijd on site PWA versus voorheen: 3,5 minuten versus 70 seconden

  • Verdrievoudiging van de gemiddelde gebruikersbetrokkenheid

  • 40% hoger re-engagement rate

  • 70% meer conversies vanuit het ‘startscherm icoon’

  • Drie keer minder dataverbruik

MakeMyTrip

MakeMyTrip is één van de meest toonaangevende reisorganisaties in Azië. Het helpt reisliefhebbers, vliegtickets, hotels en rondreizen te boeken in verschillende steden en landen. MakeMyTrip vond het moeilijk om gebruikers een native app te laten downloaden. Dat leidde tot hoge kosten en weinig klantbinding. Het maakte ook duidelijk dat ze een betere UX nodig hadden voor het mobiele web. Om dat te veranderen hadden ze een oplossing nodig die de voordelen van native apps met de voordelen van het mobiele web combineerde. Zo konden ze de cost of discovery verlagen en de engagement rates verhogen.

  • De laadtijden van pagina's verbeterden met 38%

  • Een toename van 160% van shopperssessies

Twitter

Twitter implementeerde PWA's door Twitter Lite te ontwikkelen. Deze versie verbruikt minder gegevens en vertrouwt zoveel mogelijk op de cache. De PWA-overgang gaf gebruikers ook de keuze om lid te worden van het sociale platform zonder de enorme native app van 82 MB te downloaden. Twitter Lite is bijna te verwaarlozen qua grootte (slechts ongeveer 1 MB), maar levert een gebruikerservaring die vergelijkbaar is met de native app.

  • 65% meer pagina's per sessie

  • 75% meer verzonden tweets

  • 20% daling van de bounce rate

Ben jij online overal?

De tijd dat een website voldeed voor een goede digitale aanwezigheid ligt achter ons. Onze experts helpen je liever aan een volwaardig digitaal ecosysteem - geoptimaliseerd en on-brand – om écht je doelen mee na te jagen.

Tech in conversation while working on Mac

Waarom braken PWA’s niet direct door?

Google noemt Project Fugu de ‘app gap’ – verwijzend naar de (lege) ruimte tussen web en native.

Bijna alle bovenstaande succesverhalen waren een paar jaar oud. Wat is er in die tussentijd met PWA's gebeurd? Waarom was niet alles inmiddels een PWA? Laten we eens kijken naar de Gartner Hype Cycle om die vragen te beantwoorden.

Het leven van PWA's begon in 2015. De succesverhalen en hype piekten in 2017, maar het duurde tot 2018 voordat Apple (inclusief Safari, iOS en iPad OS) en Microsoft de implementatie voor de servicemedewerker voltooiden.

Omdat een PWA een web-app is, is er geen aparte bundeling en distributie nodig. Het is geen vereiste voor ontwikkelaars of gebruikers om een PWA te installeren via app stores zoals Apple App Store, Google Play, de Microsoft Store of de Samsung Galaxy Store. Sommige app stores ondersteunen PWA's, waardoor ze ook daar te vinden zijn. De Google Play store gebruikt een bridge in de vorm van TWA (Trusted Web Activity) om de webapp te koppelen aan een Google Play app, maar Apple ondersteunt dit niet.

Aangezien Apple een grote speler is in de mobiele wereld, heeft hun houding ten opzichte van PWA’s de overstap tot stilstand gebracht. Als je iOS-ondersteuning wilt moet je een app aan de Apple App Store leveren die voldoet aan hun richtlijnen en regels.

Hoewel technisch gezien de meeste PWA-standaarden in Safari voor iOS en iPad OS zijn geïmplementeerd, ontbreken er bij een PWA nog steeds veel native app-functies. Eén daarvan is de mogelijkheid om pushmeldingen te ontvangen, zelfs wanneer de app niet wordt gebruikt. Safari voor Mac heeft een eigen implementatie, terwijl Safari voor iOS en iPad OS die optie volledig mist.

Firefox voor desktop heeft de implementatie van PWA's in december 2020 stopgezet met de mededeling dat PWA-ondersteuning niet snel naar desktop Firefox zal komen. Mozilla ondersteunt nog wel PWA's op Android.

Project Fugu

Google's Project Fugu is een poging om de huidige kloof tussen de mogelijkheden van het internet en die van native apps te dichten door de browser uit te breiden met bovengenoemde functies. Aangezien Fugu een Google-project is, profiteren alle browsers en besturingssystemen waar Google invloed op heeft van deze pogingen. Denk bijvoorbeeld aan Android, Chrome OS, Windows en zelfs MacOS, als er een op Chromium gebaseerde browser wordt gebruikt, waaronder Microsoft Edge, Samsung Internet Browser en Chrome.

iOS en iPad OS vertrouwen volledig op Apple om de functies toe te voegen en te implementeren. Dat ze de eerder genoemde push notifications, maar ook NFC, background sync en badge support zouden doorvoeren, is hoogst twijfelachtig. Of Mozilla de functies gaat doorvoeren die door Project Fugu zijn toegevoegd, valt nog maar te zien. Maar gezien de verklaring van Mozilla met betrekking tot Firefox PWA-ondersteuning op desktops lijkt de toekomst niet al te rooskleurig voor volledige ondersteuning van deze functies door verschillende leveranciers. Voor een actueel overzicht zie Fugu API Tracker.

Cross-platform-apps versus PWA

Cross-platform ontwikkeling zoals Cordova, Capacitor en React Native combineert de kracht van webtechnologie met de kracht van native apps en hun diepe integratie in het onderliggende besturingssysteem. Cordova en Capacitor kunnen zelfs dezelfde webapp-basis gebruiken als de PWA én de functies uitbreiden met native bindingen.

Cordova/Capacitor vs. React Native

Het grootste verschil tussen Cordova/Capacitor en React Native is dat React Native de gebruikersinterface van een app compileert naar native code, terwijl de business rules worden uitgevoerd in een JavaScript-runtime. Het hebben van een pure native UI geeft de beste gebruikerservaring op een mobiele telefoon of tablet, dit komt door het gebruik maken van native UI-elementen en de daarbij horende toegankelijkheid integraties.

Als de gebruikersinterface wordt weergegeven met behulp van een webweergave, moet deze webweergave specifieke elementen en gedragingen zelf implementeren in plaats van dat het besturingssysteem daarvoor zorgt. Het resultaat is meestal een beetje teleurstellend, omdat het veel tijd en moeite kost om alle onderliggende gebruikerservaring gerelateerde functies zoals pull-to-refresh of eindeloze lijsten te implementeren. Een native-achtige UI-bibliotheek zoals Ionic helpt deze gaten op te vullen, maar dit zorgt voor een mobiele ervaring op een desktopcomputer.

Wanneer ontwikkel je (g)een PWA?

Maak je een nieuwe web-app, dan moet je altijd de best practices die een PWA met zich meebrengt overwegen. Een veilige verbinding, een controleerbaar netwerkgedrag en het web manifest dat beschrijft hoe de web-app zich zal gedragen na installatie, zijn waardevolle toevoegingen.

Wat als de doelgroep voornamelijk iOS en iPad OS gebruikers is? Wat als er verschillende functies nodig zijn die Project Fugu in de browser heeft geïntroduceerd? Wat als aanwezigheid in de App Store een vereiste is om een succesvol product te maken?

Sommige API's die beschikbaar zijn voor native app-ontwikkeling zijn niet beschikbaar voor een browser. Of ze vertrouwen op software van derden die alleen beschikbaar is als native libraries. Dit zijn allemaal geldige redenen voor situaties waarin een PWA geen haalbare oplossing is. Soms is een (begeleidende) website nodig. Die website is een uitstekende kandidaat om de best practices van PWA te implementeren.

Maar wat als de doelgroep voornamelijk web- of Android gebruikers is? Wat als je webtechnologie kunt gebruiken die door verschillende leveranciers wordt ondersteund? In die gevallen kan een PWA veel tijd en geld besparen. Hoe? Door alleen een PWA te bouwen én onderhouden, in plaats van (ook) een website en losse native apps.

En nu?

Google introduceert nieuwe API's en functies in Chromium sneller dan ontwikkelaars ze kunnen implementeren. Ontwikkelaars zijn tegelijkertijd terughoudend om verschillende functies te implementeren, omdat deze alleen worden ondersteund door op Chromium gebaseerde browsers. Ook blijft het onduidelijk of de kijk van Apple op internet en PWA's binnenkort verandert.

Een eerste teken van leven van pushmeldingen in iOS en iPad OS is gespot, maar het is te vroeg om daar iets over te zeggen én het zijn alleen pushmeldingen. Technologie zoals PWA's is mooi, maar het is alleen rendabel als iedereen ervan kan genieten. Voorlopig hangt het succes af van de aanpassing van de OS-leveranciers.

PWA, als het systeem het toelaat

De keuze om een PWA te bouwen en te onderhouden hangt puur af van jouw doelen en wensen. Wat wil je ermee doen? En waarom wil je dat?

Hét antwoord op bovenstaande vragen bestaat niet. Ieder bedrijf heeft andere doelen en wensen. Deze zijn afhankelijk van bijvoorbeeld de doelgroep, de benodigde functionaliteiten, enzovoort. Wel of niet aan de slag gaan met een PWA is geheel afhankelijk van die factoren. En dan moet je ook nog kijken naar waar jouw gebruikers het meest actief zijn. Bedenk dus goed wat je wilt en hoe je dat het beste kunt verwezenlijken.

Lucien Immink
Over de auteur
Lucien Immink
Software Architect

Lucien is een software-architect maar even goed een full-time development advocate. Hij heeft tijdens zijn carrière al zo’n beetje elk framework gezien en deelt die kennis nu graag met (jongere) collega's en klanten. Ook handelt hij elke dag naar waar hij voor staat: dat digitale producten er voor iedereen moeten zijn.

Blijf op de hoogte. Schrijf je in op onze nieuwsbrief

  • Laat je inspireren: onze strategen, technologen en creatievelingen delen hun kennis en inzichten.

  • Blijf up-to-date: ontvang relevante content over merkstrategie, bedrijfstransformatie, digitale ecosystemen of data-intelligentie.

  • Mis niks: ontdek onze nieuwe cases en blijf op de hoogte van onze laatste ontwikkelingen.