Design Progressive Web Apps – de voordelen van web én native
PWA staat voor Progressive Web App. PWA’s kun je omschrijven als bijzonder geavanceerde websites die als een app functioneren. Ze zijn zowel online als offline te gebruiken. Daarnaast zijn ze steeds up-to-date, werken ze veilig en zijn dergelijke progressive web apps ook gewoon prima vindbaar in de verschillende zoekmachines.
Werken via de browser van je tablet of smartphone
Wat zijn eigenlijk de verschillen tussen PWA’s, responsive websites en native apps?
Als we eerst eens kijken naar native apps dan doelen we op de apps die aangeboden worden via de App Store van Apple of de Google Play Store en die je op je smartphone downloadt. Native apps hebben toegang tot allerlei functies die beschikbaar zijn in de smartphone zoals de microfoon, lokale opslag of locatiegegevens.
Responsive websites zijn websites waarvan het design is geoptimaliseerd om ook (of zelfs met name) goed te werken op tablets en mobiele apparaten. Niet alleen websites maar ook webapps kunnen gebruik maken van responsive webdesign, of van een mobile-first design.
Progressive Web Apps zijn in feite een variant van responsive web applicaties, maar dan verrijkt met functionaliteiten die voorheen alleen toegankelijk waren voor native applicaties. Je gebruikt een PWA, net als elke website, gewoon vanuit de webbrowser op je smartphone. Wel kun je een progressive web app ‘installeren op het startscherm’ (komen we nog op terug).
De service worker verricht op de achtergrond nuttig werk
Progressive web apps maken gretig gebruik van de service worker: een script dat op de achtergrond in je browser uitstekend werk verricht. De service worker maakt het namelijk mogelijk dat zonder enige interactie toch bepaalde acties kunnen worden uitgevoerd.
Dan moet je denken aan bijvoorbeeld het verkrijgen van een push melding. Daarnaast zorgt de service worker ervoor dat de inhoud ook offline beschikbaar is, want de service worker cachet op de achtergrond steeds de opgehaalde content.
De service worker zorgt zo dus voor een bijzonder korte laadtijd. Bovendien kun je dankzij de worker ook prima offline je werk doen doordat data pas wordt verstuurd als je netwerk verbinding hebt.
Zo houd je ruimte over
Nog een wezenlijk verschil tussen een PWA en een native app is dat je de progressive webapplicatie niet eerst hoeft te downloaden om deze applicatie op je mobiele apparaat te gebruiken. Er wordt vanuit de browser gewoon een snelkoppeling aangemaakt op het startscherm van je smartphone. Van daaruit kun je snel – via de snelkoppeling dus – de progressive web app openen. Vanwege het feit dat er geen download plaats hoeft te vinden, houd je veel ruimte op je smartphone over. Bovendien ben je dus door het gebruik van een PWA niet afhankelijk van Google of Apple. En dat is ook wel eens prettig.
Installeren als een native app
Als je een progressive web app in de browser bezoekt, dan krijg je de melding: ‘add to homescreen’. Klik je dit vervolgens aan, dan wordt deze progressive web app aan je startscherm toegevoegd. Deze melding om de web app te “installeren” is een specifieke PWA browser-functionaliteit.
Naast dat de browser zelf al aangeeft dat een PWA geïnstalleerd kan worden, is het voor de developer ook mogelijk om op basis van verschillende signalen (opnieuw) aan te bieden om de web app te installeren.
Het toevoegen van een PWA aan je device is net even iets meer dan een snelkoppeling naar een webpagina. De webapp wordt met een eigen icon tussen de apps in je app drawer getoond en staat los van de browser in het overzicht van actieve apps. Het voelt dus echt als een native app, niet als een website!
Geen updates installeren
Je weet dat native apps altijd weer handmatig van een update voorzien moeten worden mocht er een nieuwe versie van de applicatie beschikbaar zijn. Iedereen krijgt dan een melding en moet dus heel even geduld hebben voor de app daadwerkelijk weer gebruikt kan worden.
Bij PWA’s is het niet nodig om handmatig te updaten, wat zorgt voor een stukje extra gebruiksvriendelijkheid. Net als bij iedere website of webapplicatie krijg je altijd toegang tot de versie die op dat moment online staat. Zo zijn nieuwe functies direct beschikbaar voor alle gebruikers.
Dat is natuurlijk precies hetzelfde voor de content in een progressive web app. Wat wel verschilt is dat deze content in het geheugen van je telefoon wordt opgeslagen. Heb je even geen verbinding? Dan laadt de service worker de content direct uit het geheugen van je telefoon. Of voor content die niet vaak wijzigt: na het eerste bezoek, wordt de content voortaan direct uit het geheugen geladen. Dat scheelt weer in de MB’s.
(Misschien leuk om te weten: Native apps gebruiken vaak een “WebView” voor dynamische content. Dat is in feite precies hetzelfde: de content wordt dan als webpagina opgehaald en weergegeven.)
Stuur meldingen over bepaalde acties
In native apps kun je zoals bekend al notificaties laten sturen, dat is niet heel bijzonder. Voor een gewone website lag dat toch even anders. Met PWA’s kan dit nu echter wel. Ideaal, want zo kun je meldingen versturen over bepaalde acties die je als ondernemer ontketent of als je nieuwe producten aan het assortiment gaat toevoegen.
Nog niet elk besturingssysteem en iedere browser ondersteunt overigens alles wat een progressive web app je aan gebruikersgemak kan bieden. Op dit moment werkt het altijd op Android smartphones in Chrome, Edge, Firefox en Opera. Heb je een smartphone met iOS, dan kun je nog geen gebruik maken van alle functies die een PWA te bieden heeft.
Vul je winkelwagen ook als je offline bent
Zeker als je een webshop hebt, kunnen deze progressive web apps heel veel voor je betekenen. Je hebt dan in elk geval steeds een zeer snelle en uitermate gebruiksvriendelijke webshop, en dat is wel zo prettig voor jouw (potentiële) klanten. PWA’s creëren wat men noemt een zeer hoog engagement met de gebruikers, en die relatie zal gaandeweg steeds sterker worden. Er worden zoals gesteld pushmeldingen verstuurd, er is een pictogram op het startscherm beschikbaar en ze laden op het volledige scherm. De progressive web apps werken uiteraard op elke device en dus ook op iedere schermgrootte. De service worker maakt ook offline werken prima mogelijk, waardoor de consument gewoon producten in de winkelwagen kan zetten, ook als de internetverbinding even niet goed is of je offline bent.
Supersnelle overgangen terwijl je content wordt geladen
Progressive web applicaties werken en voelen in alles aan als een ‘gewone’ (native) applicatie. De paginaovergangen zijn uitermate soepel en content en afbeeldingen worden razendsnel geladen. Het app shell model maakt namelijk onderscheid tussen functionaliteit en inhoud.
De app shell zet alle onderdelen van een pagina eerst op de juiste plek, om vervolgens pas de inhoud te laden (“skeleton screen”). Zo hoef je niet, zoals op het web, eerst te wachten tot een pagina is geladen, voordat je door wordt gestuurd.
Een ander voordeel is dat de laadvolgorde kan worden aangepast, zodat je de tekst van een artikel alvast kunt lezen, terwijl de afbeelding nog even moet worden geladen. Echt een uitkomst als je verbinding weer eens zo traag als dikke stroop is.
Voor de optimale user experience
Bij progressive web apps is het zo dat de gebruiker bepaalt. Je bent onafhankelijk van Apple of Google die doorgaans bepalen of een app al dan niet in de store opgenomen wordt. Je blijft steeds dicht in de buurt van je klanten. Je bedient ze optimaal en bereikt ze op de best denkbare wijze. Bovendien bespaar je de extra kosten voor de ontwikkeling van één of meerdere native applicaties.
Kortom: met progressive web apps heb je geen download nodig, wat je data en opslagruimte bespaart. Je hebt daarbij de beschikking over alle functionaliteiten zoals je die van een native app gewend bent, inclusief pushmeldingen. Je biedt bovendien de optimale user experience, en dat is goed voor zowel SEO als voor je conversie. Bovendien maken PWA’s offline werken mogelijk.
