Begin deze week lanceerden we onze nieuwe website. Gezien we bij SiteOptimo grote voorstander zijn van gebruiksvriendelijkheid en performance, hebben we geprobeerd om dit zo goed mogelijk te laten weerspiegelen in onze nieuwe website. Eén van de technologieën waar we gebruik van maken om dat te verwezenlijken, is een PWA, oftewel Progressive Web App.

Progressive Web App

We geloven zeer sterk in de toekomst van progressive web apps. Het is een technologie die oorspronkelijk voorgesteld werd door Google in 2015. Ze hebben niet stilgezeten, want ondertussen staat alles stevig op punt en sinds kort wordt deze ondersteund in alle grote browsers! Gebruik maken van een PWA zorgt voor aanzienlijke voordelen op het gebied van gebruiksvriendelijkheid en snelheid van een web applicatie of website.

Heel concreet gaat het om web applicaties (of websites) die ook als stand-alone applicatie kunnen draaien op een toestel. Ze maken gebruik van de laatste nieuwe technologie die moderne browsers tegenwoordig te bieden hebben. Dankzij PWA’s wordt het verschil tussen web en native apps kleiner en kleiner.

Enkele voordelen van een PWA

  • Offline capaciteiten: een PWA heeft de mogelijkheid om volledig offline te werken. Bovendien kunnen acties waarvoor een internetverbinding vereist is worden opgeslagen om achteraf uit te voeren wanneer de verbinding terug is.
  • Snelheid: Mede dankzijde de offline capabilities zorgt een PWA voor een aangename en snelle surfervaring, zelfs bij een slechte internetverbinding.
  • Push notifications: Push meldingen wanneer er bijvoorbeeld nieuwe content beschikbaar is, zorgen voor een hogere betrokkenheid van je gebruikers.
  • Installeerbaar: PWA’s kunnen rechtstreeks vanuit de browser worden geïnstalleerd op eender welk toestel, ongeacht de app store. Bovendien kunnen PWA’s gewoon door zoekmachines worden geïndexeerd zoals gewone websites. Eens geïnstalleerd wordt deze app buiten de browser om en al dan niet full screen getoond.
  • Veiligheid: Bij een PWA kan je gewoon controleren of je wel degelijk de juiste app aan het gebruiken bent (via de URL) en of de verbinding beveiligd is. Een SSL certificaat is trouwens verplicht voor een PWA met service worker.
  • Ontwikkelkost: Eén van de grote voordelen is de ontwikkelkost wanneer je ervoor kiest om je verschillende apps per platform (Android, iOS, Windows, …) te vervangen met een PWA. Je kan een PWA ook gewoon inpakken als een hybrid app en publiceren op de app stores, voor het beste van beide werelden.

PWA uitlegDe bouwstenen

Om een web app om te vormen naar een PWA heb je minstens twee zaken nodig: een web app manifest en een service worker.

Web app manifest

Een web app manifest is een json-bestand waarin informatie wordt opgeslagen over de applicatie. Denk hiervoor aan de naam, korte beschrijving, de verschillende icons, weergavemodus, kleurenschema, … Dankzij dit bestand kan bovendien een bezoeker de optie aangeboden worden om de web-applicatie te installeren op zijn apparaat.

Service worker

De kracht van een progressive web app zit echter bijna volledig in de service worker. In essentie is een service worker een proces dat wordt uitgevoerd op het apparaat van de gebruiker dat zich tussen de website en de webserver bevindt. Een service worker is geschreven in JavaScript.

Een service worker draait onafhankelijk van de webpagina. Bovendien dient deze als een filter voor al het webverkeer van en naar de app. Dit betekent dat deze eenvoudig taken kan uitvoeren in de achtergrond zoals data synchroniseren, pagina’s offline beschikbaar maken, push notificaties ontvangen, acties in de wachtrij plaatsen wanneer er geen verbinding is, enzovoort.

De P in PWA

Het woord progressive in Progressive Web App staat voor het gebruik van Progressive Enhancement. Progressive enhancement is de basis van elke goed werkende website en web app. Er wordt immers gebruik gemaakt van een groot aantal tools om het web te verkennen en te gebruiken. Web browsers zijn de voor-de-hand-liggende koplopers in die categorie, maar er bestaan natuurlijk ook nog dingen zoals zoekrobots, webcrawlers, schermlezers, Internet Explorer,

Het is super fancy om een nieuwe website te bouwen die alle nieuwe snufjes gebruikt. Daar ben je helaas niet veel mee als dat zou betekenen dat Google, je slechtziende buurman en je grootmoeder met een browser van 10 jaar geleden je website niet kunnen bezoeken. Daarom is het van belang om te vertrekken van een basis waarbij alle basisfunctionaliteit zonder toeters of bellen gewoon werkt. Van daaruit kan dan stap voor stap extra functionaliteit toegevoegd worden om de gebruikservaring te verbeteren.

Application shell

Voor onze website maken we gebruik van de zogeheten app shell architectuur. Dit betekent dat alle gemeenschappelijke elementen doorheen de website (header, navigatie, footer, statische bestanden, …) worden geïsoleerd in de app shell. De app shell hoeft dus slechts één keer ingeladen te worden. Daarna worden verdere navigaties opgevangen en afgehandeld via JavaScript en wordt enkel de content aangepast. Doordat niet heel de pagina opnieuw geladen en verwerkt hoeft te worden, is deze manier van werken dus aanzienlijk sneller voor de bezoeker, zeker wanneer de bezoeker beschikt over een oud toestel en/of een slechte internetverbinding.

In combinatie met een service worker, kan de shell zelfs meteen getoond worden bij elke nieuwe navigatie. Bovendien kunnen problemen zoals een geen internetverbinding of serverproblemen op een veel elegantere manier worden afgehandeld.

In the wild

Progressive web apps worden al redelijk vaak gebruikt. Hieronder enkele voorbeelden:

Bovendien gebruiken vele andere websites reeds de grote voordelen van service workers (offline cache, push notifications, …). Denk bijvoorbeeld aan social networks zoals Twitter en Facebook.

Meer informatie

Meer weten over progressive web apps? Hier zijn enkele resources die van pas kunnen komen!