William Meuwissen
Frontend Developer
Collega developers bespraken hem hier ook al eens: de Progressive Web App (PWA). Eerst als ‘new kid on the block’, daarna als één van de 5 development trends van 2020. Nu is het tijd om de balans op te maken: is de PWA dé belofte van 2020, of is het toch niet “de nieuwe app”? Mijn eindoordeel, onder de streep.
PWA, “de nieuwe app”?
In andere media werd al aangekondigt dat in 2020 50% van de apps vervangen zal worden door PWA’s. Geen heel gekke voorspelling, als je bedenkt dat het aantal gedownloade apps razendsnel afneemt en (vooral ecommerce) websites zoeken naar een nog mobielvriendelijke versie, omdat het mobiele verkeer alleen maar razendsnel toeneemt.
Het sociale platform Pinterest ging bijvoorbeeld over van en app en web naar PWA – in niet meer dan 3 maanden – en registreerde direct 40% toename in de ‘time on page’, 60% toename in ‘core engagement’ van de gebruiker en 44% stijging in winst opbrengsten. AliBaba ging ook om en zag 104% groei in ‘conversion rate’ bij nieuwe gebruikers. Niet gek.
En zo zijn er nog een heel aantal ijzersterke voorbeelden te geven.
Tijd voor mijn two cents over deze development ontwikkeling. Eerst over wat er zo bijzonder is aan de (techniek achter de) PWA, en daarna over alle voor- en nadelen die het met zich meeneemt. Uiteindelijk komt er dan een oordeel uit rollen: is de PWA de frontend development trend van 2020 en de belofte van de toekomst? Of valt het mee, en moeten we iets voorzichtiger zijn met dat voetstuk?
Maar dus eerst:
Wat er zo bijzonder is aan de PWA
De progressive web app (PWA) is – zoals je nu weet – een van de nieuwste ontwikkelingen op het gebied van web én app development. Google software engineer Alex Russell noemt de PWA “een website die alle goede vitamines heeft genomen”. Maar wat is een PWA dan? En vooral: wat is er zo bijzonder aan?
Site én app
Een PWA is een website met de kenmerken van een native mobile app. En die kenmerken vloeien inmiddels zozeer in elkaar over, dat de PWA eigenlijk in een grijs gebied verkeert tussen een website en app in. Eigenlijk is het allebei. Hij kan tegelijkertijd als website en/of als app functioneren. Een bijzondere feature die daar bijvoorbeeld uit voorkomt is dat je een PWA online en offline kunt gebruiken. Heb je dus (even) geen verbinding, dan werkt hij nog steeds.
De kracht van progressieve data
In mijn eigen rol als Frontend developer is dit is een prachtig bruggetje om iets te vertellen over de techniek van een PWA. Die is namelijk heel anders dan ‘normaal’. De kracht zit hem in het gebruik van de data.
Alle data wordt progressief bij gebruik van de app geladen. Dat zit zo. Alle data die nodig is voor een reguliere app is in feite ‘present’, ongeacht of de gebruiker het op dat moment gebruikt of niet. Bij progressieve data staat het als het ware op ‘stand by’, totdat de gebruiker klikt en de data tevoorschijn moet komen. Dit maakt een PWA efficiënter, en de laadtijd bijvoorbeeld supersnel.
Nieuwe development stijl
Volgens de reguliere techniek bundelen we de CSS (stijl elementen), Javascript (plugins) en afbeeldingen tot een werkzaam pakketje. Dit pakketje bevat alle data die een website nodig heeft. Ongeacht welke pagina je bezoekt; het hele pakket wordt ingeladen.
Voor de frontend developer is dit nog steeds de meest gebruikte manier van werken.
Maar de techniek is dus verder, zoals de PWA laat zien. De developer ontwikkelt bij die nieuwe techniek vanuit content.
De content bepaalt welke CSS (stijl elementen), Javascript (plugins) en afbeeldingen er per pagina nodig zijn en alleen de vereiste data wordt progressief – bij gebruik – ingeladen.
Oké, genoeg uitstapjes over de technische bijzonderheden van de PWA. Door naar de praktische voor- en nadelen, voor developers, en daarmee uiteindelijk voor de eigenaren van website en/of apps. Want is deze nieuwe techniek nu echt de oplossing van de toekomst voor jouw (ecommerce) site of app?
De voor- en nadelen van de PWA
De 5 voordelen
- Functionaliteiten van web én app
Een PWA kan naast als app ook als een website gebruikt worden. Daardoor kunnen de functionaliteiten van de browser en het apparaat waarop je de site bezoekt gebruikt worden. Denk aan het gebruik van een laptop- of tablet-camera (hardware) of push notificaties (software). Andersom worden nog niet alle functionaliteiten van de smartphone ondersteund door de browser. Hier vind je exact alle mogelijke functionaliteiten die in de PWA gecombineerd kunnen worden. - Geen app installatie
PWA’s zijn via de browser beschikbaar en hoeven dus niet via een de Google Play store of Apple Store aangeboden of geïnstalleerd te worden. Het kan (tegenwoordig) wel, maar hoeft dus niet. Handig wanneer je smartphone al aardig vol staat met allerlei apps bijvoorbeeld. - Standaard programmeertaal
Voor de ontwikkeling hoef je je als developer maar te richten op één programmeertaal om de PWA via web toegankelijk te maken. Ga je een native app maken voor IOS of Android dan heeft elk platform zijn eigen programmeertaal. Wil je de PWA toch binnen de Google Play of Apple Store aanbieden als app, dan zijn er mogelijkheden om de PWA via software te ‘vertalen’. - Retesnelle verbinding
Zelfs met een trage internetverbinding is een PWA razendsnel. Je kunt je dus wel voorstellen welke positieve effecten deze snelheid heeft op de gebruikerservaring. Denk aan de langere ‘time on page’ bij pinterest of de enorme ‘conversion rates’ bij AliBaba. - SEO wél mogelijk
In tegenstelling tot de apps die in de store staan, kunnen PWA’s via de zoekmachine volledig geïndexeerd en online verbonden worden. Handig, want dan is hij direct via Google te vinden. Toch het eerste dat mensen doen wanneer ze iets zoeken.
De 3 nadelen
- Strikte development regels
Voor de developer liggen de regels van een PWA hoger. Zo zal men meer rekening moeten houden dat zelfs bij een trage internetverbinding de (web)app snel geladen moet worden. Dit is het voordeel van de gebruiker, maar het kan oh zo zenuwslopend zijn voor een developer. Hierdoor zal de developer meer moeten testen. #HadHijMaarGeenDeveloperMoetenWorden - Onbekend maakt (nog) onbemind
De PWA blijft voor veel mensen een onbekend gebied. Dat zorgt ervoor dat veel mensen wat terughoudend zijn bij de optie voor een PWA, omdat ze graag willen afwachten hoe de trend zich gaat ontwikkelen. Toch zet hij al een paar jaar door, dus zou je kunnen zeggen dat iedereen met gemak ‘om’ zou moeten gaan. Geheel volgens de voorspelling. - Compatibiliteit
De techniek wordt steeds beter, maar de compatibiliteit van het PWA-formaat is nog altijd niet volledig. Kies je voor een PWA dan zul je vooraf goed moeten bedenken welke functionaliteiten hij moet hebben, afhankelijk van wat je ermee wil bereiken.
Als de trend, zoals we nu verwachten, doorzet - dan zal de PWA vooral voor Frontend developers een nieuwe tak van sport worden.
Even tussendoor…
Wat is een Frontend developer ook alweer?
Ik ben een van de Frontend developers van Exitable en richt me op de zogenaamde voorkant van een website. Onze designers maken een plaatje van hoe een website eruit moet komen te zien (de voorkant) als iemand deze bezoekt. Vervolgens zorgt de Frontend developer ervoor dat dit plaatje een daadwerkelijke website wordt. De developer houdt rekening met een functionele en praktische weergave voor desktop, tablet en mobiel. Zodat de website er altijd uitziet zoals hij eruit hoort te zien.
Wees er klaar voor!
De PWA is dus nog steeds in de (door)ontwikkelingsfase, maar toont grote beloften voor 2020. We kunnen nooit met zekerheid zeggen wat de toekomst gaat doen, maar wij geloven in de kracht van de PWA. De resultaten die een AliBaba of Pinterest tonen, spreken immers voor zichzelf.
Wil je weten of een PWA de juiste keuze is voor jouw organisatie? Bel of mail ons! We kijken graag naar de beste oplossing voor jouw vraagstuk. Of boek een trendsessie waarin we je helemaal klaarstomen voor het nieuwe jaar.