Het was het buzzword van 2020 en misschien ook nog wel van de komende jaren. Moet je er iets mee? Of voorbij laten gaan? Is het duurder dan ‘normaal’? En zoja, verdien je dat dan weer terug? Of als het goedkoper is, waarom doet niemand het dan?
Veel overwegingen, waar veel bureaus en product owners mee worstelen. We gaan hier proberen een overzicht neer te zetten van de verschillende voor- en nadelen.
Wat is PWA nou precies?
PWA staat voor Progressive Web App.
Progressive omdat de website op zowel oude als nieuwe devices werkt. Naarmate een device meer mogelijkheden biedt (touch, GPS, camera, etc.) kunnen deze ook gebruikt worden.
Web omdat het geen native app is voor iOS of Android, maar een website die in de browser draait.
App omdat het een applicatie is ;)
Wie heeft PWA bedacht?
Engineers van Google hebben het concept gepionierd. Het is gebaseerd op open standaarden en niet van 1 partij. Iedereen kan het gebruiken, met bestaande technologieën.
Wat is het verschil tussen PWA en een echte app?
Een native app wordt gepubliceerd in de Android Play Store of iOS App Store. In principe moet je een app dus ook 2x bouwen omdat de onderliggende technologie anders is, met verschillende programmeertalen, al zijn hier inmiddels wel oplossingen voor.
Als je een website en een app wilt, dan zijn dit 2 verschillende kanalen, die apart ontwikkeld moeten worden.
Een app kan gebruik maken van de mogelijkheden die een telefoon biedt via de API’s van het platform, iOS of Android. Dus als app-bouwer kan je bijvoorbeeld gebruik maken van de contacten en Bluetooth connecties.
Een PWA is een website. Het kan dus ook gebouwd worden met dezelfde technologie als iedere andere website: HTML, CSS en Javascript.
Een PWA is afhankelijk van de API’s die in de browsers beschikbaar zijn om gebruik te kunnen maken van de features van een telefoon. Bijv. GPS data kan tegenwoordig vanuit de telefoon doorgegeven worden aan de browser. Andere voorbeelden zijn camera, motion detection, device orientation (landscape vs portrait) en Apple Pay/Google Pay.
Langzaam komen steeds meer features die alleen voor native apps beschikbaar waren ook naar browsers toe, waarmee het gat tussen apps en PWA’s kleiner wordt.
Kan een PWA in de app stores gepubliceerd worden?
In de Play store wel, in de App Store op iOS niet. Apple verdient te veel geld aan apps en aan In-App Purchases, waardoor ze niet echt zitten te wachten op PWA’s in de app store. Vanuit Apple wordt gezegd dat vooral de security en kwaliteit niet kan worden bewaakt met PWA’s.
Waarom is PWA ontstaan?
Er is al jaren een trend gaande waarin websites steeds dynamischer worden. De user experience wil men zo rijk mogelijk maken, met smooth transitions, data die ververst zonder dat de hele pagina ververst hoeft te worden. Veel webapplicaties doen niet meer onder voor dedicated desktop of mobiele applicaties. Een term die hierbij om de hoek komt kijken is ‘SPA’, wat de afkorting is van Single Page Application. Bij de 1e page load laadt je ‘de applicatie’ en daarna zijn er geen page loads meer. Iedere link waar je op klikt laadt data in, zonder naar een echte andere pagina te gaan. Met (meestal) als gevolg dat het veel sneller voelt.
PWA is een doorontwikkeling op SPA. Waar SPA nog wel enigszins gewoon een website is, probeert PWA verder te gaan. Met full screens, zonder adresbalk van de browser boven in. Met een eigen ‘je bent offline’ pagina, ipv de standaard melding van je browser. Met vergaande lokale caching, waardoor je ook als je offline bent reeds bekeken pagina’s kan blijven opvragen. En nog veel meer (link naar ander stuk).
Zo heb je de voordelen van het bereik van een website (vindbaar in Google!) en voor iedereen eenvoudig te bekijken, zonder eerst iets te hoeven installeren, gecombineerd met de voordelen van een native app qua mogelijkheden.
Wat zijn de belangrijkste kenmerken van een Progressive Web App?
Google heeft richtlijnen opgesteld waar een PWA aan moet voldoen.
De basis is:
- Start snel op en blijft snel
- Werkt in iedere browser
- Responsive voor ieder schermformaat
- Custom offline pagina
- Is te installeren
Voor de beste experience zijn deze punten aan te raden:
- Biedt een offline ervaring waar mogelijk
- Accessible voor iedereen (ook slechthorende en slechtziende mensen)
- Kan gevonden worden in zoekmachines
- Werkt met een muis, touchscreen, keyboard of een stylus
- Geeft context waar gevraagd wordt om een extra rechten
- Gebruik best practices voor nette code
Zie https://web.dev/pwa-checklist/
Headless, SPA, PWA, wat is het nou?
Een headless website is een website waarbij de frontend die je ziet los staat van de backend. Traditioneel verzorgen content management systemen zoals Wordpress en Magento zowel de backend (waar de data staat en kan worden gewijzigd) als de frontend (dat wat zichtbaar is voor de eindgebruiker in de browser). Bij een headless website komt de data uit een backend via een API, die getoond wordt aan de gebruiker door de frontend applicatie. De frontend staat helemaal los van de backend. Dit kan op een andere server zijn, maar hoeft niet.
Een SPA waarbij er sprake is van data-uitwisseling met een backend is altijd headless.
Een PWA is niet per se definitie een SPA, maar is het in de praktijk vaak wel. Zie bovenstaande lijstje met kenmerken van een PWA, daar wordt niks gezegd over dat de website headless of een SPA moet zijn.
React, Vue, Angular… Wat kan ik ermee?
Om websites dynamischer te maken qua UX is Javascript nodig. Dit is een taal die in de browser werkt en bijvoorbeeld kan zorgen voor het tonen van een bevestiging popup, realtime validatie van een formulier, autocomplete search, dat soort zaken.
React en Vue zijn Javascript frameworks die vaak gebruikt worden om moderne web applicaties te bouwen. Ze zijn niet noodzakelijk, maar maken het wel veel eenvoudiger.
Bovenop die Javascript frameworks worden ook weer frameworks gebouwd, die allerlei veel gevraagde features ingebouwd hebben. Voor Vue kom je dan al snel uit bij Nuxt en met React kan je Next gebruiken https://nextjs.org/.
En dan zijn er ook nog frontend frameworks die zich richten op e-commerce, zoals bijvoorbeeld VueStoreFront, inderdaad op Vue gebouwd. ScandiPWA, op React. Next.js heeft nu ook een e-commerce oplossing: https://nextjs.org/commerce.
Welk framework je moet gebruiken? Hier wordt veel over gediscussieerd. Korte antwoord: het is een kwestie van voorkeur en wellicht onderwerp van een andere blogpost.
Waar moet ik op letten als ik een PWA wil bouwen?
Het bouwen van een PWA vereist een fundamenteel andere manier van websites bouwen. Waar je server-side altijd alle data en business-logica tot je beschikking hebt, moet nu een deel van die logica in de frontend(browser) gebouwd worden. Ook zal de backend de benodigde data via API’s moeten ontsluiten, zodat de frontend die data kan opvragen.
Een CMS als Magento heeft al veel API’s in de core beschikbaar waardoor de development daarvan meevalt. Al zal custom functionaliteit wel uitgebreid moeten worden met API’s. Als het CMS dat je gebruikt dit niet heeft, zal er veel werk gaan zitten in het bouwen van de API’s. Maar eerlijk gezegd moet je je dan ook afvragen of headless wel geschikt is.
De skills die nodig zijn om een PWA te bouwen, kunnen anders zijn dan bij traditionele bouw. Voor fullstack developers, die zowel frontend als backend doen, kan het bouwen van de frontend een zware dobber zijn. Het is niet hier en daar een beetje Javascript. Het is bijna alleen maar Javascript, dus hier moet je als developer wel heel goed mee uit de voeten kunnen. Als je al in frontend gespecialiseerde developers had, dan is de overstap naar PWA makkelijker te maken.
Om een headless frontend te bouwen is het belangrijk dat de data op een gestructureerde manier door de API wordt aangeleverd. Neem als voorbeeld een blogpost: in plaats van alle tekst in 1 veld te zetten, is het belangrijk om hier aparte input velden voor te hebben in het CMS. Op deze manier kan de data ook gestructureerd worden aangeleverd: een veld voor datum, auteur, hoofdafbeelding, introductietekst, hoofdtekst, etc.
Welke backends zijn geschikt om een PWA mee te bouwen?
Iedere backend die alle features ook via een API ontsluit is een geschikte kandidaat. Als je tevreden bent over bijvoorbeeld hoe content beheerd wordt in een platform, maar de content is niet op te halen via de API, of een klant kan zich niet registreren via de API, dan valt de kandidaat af, want je kan er dan niks mee.
Niet strikt noodzakelijk, maar wel handig is een backend die GraphQL ondersteunt. Dit is een API waarbij je in 1 request alle data kan opvragen die je nodig hebt. Bij REST kan het zo zijn dat je meerdere keren heen en weer moet om bij de benodigde data te komen. Bijv. niet alleen het product, maar ook de staffelprijzen, voorraad en cross-sells.
Is PWA snel?
PWA kán heel snel zijn. Maar dat kan een niet-PWA ook zijn. Dus voor alleen snelheid hoef je het niet te doen. Wel kan het zo zijn dat je backend niet de mogelijkheden biedt om een snelle frontend te leveren (ahum, standaard Magento 2…, hello Hyva :) ). Dan kan PWA een hele interessante keuze zijn, omdat je daarmee het beste van 2 werelden krijgt: de uitstekende e-commerce tools in de backend van Magento en een razendsnelle frontend.
Is PWA complex?
Je haalt wel wat complexiteit naar binnen ja, maar alles is relatief. Magento 2 frontend development is ook heel erg complex, waar veel developers vaak mee worstelen, vooral op Javascript vlak. Voor deze frontenders is het gebruik van een modern Javascript framework als Vue of React een verademing. Dit komt de developer experience ten goede, daarmee ook de productiviteit en de doorloopsnelheid kan zelfs korter zijn voor de bouw van bepaalde features.
Maar vanuit het perspectief van een simpele website met weinig interactiviteit, is PWA waarschijnlijk wel flink complexer. Daarbij moet je je dus ook meteen afvragen of het wel de juiste keuze is.
- Aantal redenen waarom het complexer kan zijn:
- Nieuwe technologie = nieuwe benodigde skills
- Alles moet via API’s ontsloten worden
- Erg afhankelijk van browsers en verschillende browsers ondersteunen verschillende features
Voor wie is een PWA geschikt?
Zoals vaak het geval is, dat hangt er van af:
Wel:
- Je wilt het nieuwste en hipste wat er te krijgen is
- Je wilt het app-gevoel op je website
- Je wilt een snelle website (kan ook op andere manieren)
- Je wilt je frontend onafhankelijk maken van je backend
- Je wilt gebruik maken van features als push notificaties
Niet:
- Je bent tevreden met je huidige frontend
- Je hebt een beperkt budget
- Je hoeft niet zo nodig op de 1e rij te zitten
- Je geeft alleen om snelheid
- Je hebt een simpele website zonder veel interactiviteit
Conclusie
We hopen dat je met deze blogpost iets beter weet wat je met de hype rondom PWA aan moet. Bij Bold Commerce zijn we erg gecharmeerd van de mogelijkheden die PWA biedt en we hebben hier dan ook veel tijd in gestoken om dit voor onze klanten te kunnen bouwen in combinatie met een backend op Magento 2. Een voorbeeld hiervan is de webshop van Loavies. Deze webshop is ontwikkeld in samenwerking met De Voorhoede.
Dat gezegd hebbende is PWA niet de holy grail die alle problemen in 1x oplost. Het komt ook met z’n eigen uitdagingen, die hopelijk ook duidelijk zijn geworden in deze blogpost.