Een offline website met een PWA?

Een Progressive Web App (=PWA) zorgt ervoor dat bezoekers je website offline kunnen bereiken. De voordelen zijn talrijk: een betere SEO-score, tijd- en kostenbesparing én een hogere klanttevredenheid.  Maar hoe werkt een PWA nu?

PWA offline website

De populariteit van PWA's stijgt

Je hebt het misschien al gezien op verschillende websites, zoals Pinterest, Uber, HLN of Trivago: een pop-up met de vraag of je de webpagina wil installeren op je mobile device als standalone app. Dit zijn PWA’s of Progressive Web Apps. Een PWA zorgt ervoor dat de website die je bezoekt als icoon op je homescreen zal geïnstalleerd worden.

Steeds meer vragen klanten om een PWA voor hun website. We voerden dit ook al uit op onze eigen website om zo onze bezoekers een betere customer experience te bieden. Dat ondersteunt je SEO-inspanningen. En juist omdat we de vraag meerdere keren krijgen en ervaring hebben met PWA’s pennen we even alle info helder neer.

Wat is nu een PWA?

PWA’s zitten tussen een webpagina en een native app. Om zich te kunnen gedragen als een gewone app gebruikt een PWA ‘service workers’. Een service worker is in zijn essentie een JavaScript file die los van de browser opereert. Het onderschept netwerkverzoeken, het cached webpagina’s of probeert uit de cache bepaalde informatie te recupereren. En als laatste kan het ook notificaties pushen naar de gebruiker toe.

Met caching neem je eigenlijk de files die op je website staan zoals css-code, tekst en afbeeldingen en plaats je die in een cache. Als je dit al op voorhand opslaat werk je ‘offline first’. Wanneer een bezoeker je pagina dan offline opvraagt probeer je die eerst van het netwerk te halen en pas daarna via de cache. Want de voorwaarde is wel dat die bezoeker je pagina al eerder heeft bezocht.

Samen met een ‘app manifest file’, een soort metadata die je toevoegt aan je PWA, een serviceworker en https en je slaat de pagina op je mobiel op, dan gedraagt deze PWA zich als een app. Via service workers kan je met een PWA webpagina’s toevoegen in de vorm van een app op de homescreen van een smartphone of tablet. Net zoals een native app dus. Maar in tegenstelling tot een native app is een PWA enkel een gewone offline webpagina met extra functies. Deze pagina zal wel niet worden weergegeven als je nog nooit online de website hebt bezocht.

De extra functies van een offline webpagina blijven tot op vandaag wel beperkt, zeker in iOS. Hardware functies zoals NFC (Near-field communication), Bluetooth en motion sensors worden niet ondersteund, afhankelijk van welke OS je gebruikt.

Developers hoeven ook geen speciale app te ontwikkelen. Dat bespaart je veel kosten en tijd én je hebt een website die zich gedraagt als een mobiele app, die je makkelijk toevoegt aan het startscherm van je smartphone en die push-notificaties kan versturen.

Voor- en nadelen van een PWA ten opzichte van een native app

Eén van de belangrijkste verschillen waarom je voor een native app kiest in de plaats van een PWA is dat native apps wel hardware functies ondersteunen. Wil je dus een complexe app die veel hardware functies aanspreekt, dan ben je dus nog altijd verplicht een native app te laten ontwikkelen.

Wil je enkel dat bezoekers ook offline je website kunnen bezoeken? Dan kies je best voor een PWA. Een kostenefficiënte keuze, want de kost van een PWA is heel klein tegenover een native app. Een PWA is eigenlijk de mobile versie van je website op je homescreen. Je hoeft dus geen aparte app te ontwikkelen die zowel op de Google Play als de App store beschikbaar moet zijn.

Een betere SEO-score? Ook daarvoor zorgt een PWA. Het doet je pagina’s snel laden, levert een rijke ervaring aan gebruikers op desktop én mobiel en kunnen geïnstalleerd worden op elk toestel. Het doel is namelijk om een uitstekende user experience aan te bieden net zoals bij een ‘native app’. En het is deze user experience die een belangrijke factor is in hoe hoog je rankt in zoekresultaten van bv. Google.

Conclusie

Zowel een native app als een PWA heeft zijn voordelen. Het hangt gewoon enorm af van welke features je wil kunnen met je app, hoeveel je wil spenderen en wie je doelpubliek is. Daarom is het belangrijk dat je weet wat je exact nodig hebt.

Als je je mogelijkheden wil verkennen, plan dan gerust een gesprek in met een van onze experten. Hoe? Stuur ons een bericht en we nemen meteen contact met je op!

Heb je nog vragen voor ons of wil je eens afspreken?