Progressive Web App of PWA bouwen en implementeren

26 mei 2021

Wat is PWA en hoe implementeer ik dit?

PWA staat voor ‘Progressive Web App’ en is een handige, betrouwbare manier voor websitebeheerders om hun website te presenteren als app. De webapplicatie laadt sneller en presteert beter dan een gewone website. Je kunt gebruikers een app-achtige ervaring bieden, zonder daarvoor een complete app voor bijvoorbeeld iOS of Android te hoeven bouwen.

Wat is een PWA?

Eigenlijk is een web app niets meer dan een responsieve website die zich gedraagt als een gewone app. Het handige van PWA’s is dat het door meerdere systemen en browsers wordt ondersteund en dat je er relatief uitgebreide functies in kunt bouwen. Het is erg flexibel en niet lastig te onderhouden.

Een PWA bestaat vaak uit een app shell, service workers en een web manifest. Onder een app shell verstaan we de informatie over hoe de website eruit moet zien. De shell bevat basis CSS, HTML en Javascript en is nodig om je web app te presenteren. Een service worker is een Javascript bestand dat op de achtergrond draait, zodat de app werkt en gebruikers ook offline gebruik kunnen maken van de app. De web manifest heeft alle informatie over de web app, zoals de naam ervan, logo’s, kleuren en de optie om de app op het beginscherm van het mobiele apparaat te zetten.

De app werkt ook offline

Gebruikers kunnen een Progressive Web App op hun mobiele toestel installeren. De web app maakt een kopie op de smartphone of tablet, waardoor ook zonder internet gebruik kan worden gemaakt van de app. Deze app hoeft niet te worden gedownload uit een Play Store of een App Store, maar wordt toegevoegd aan het beginscherm van de gebruiker, vanuit de browser.

Een web app implementeren

Heb je al een Managed Cloud VPS met je eigen webserver en je eigen CMS-systeem? PWA’s werken onder meer in WordPress, Joomla en Drupal. Voor WordPress kun je bijvoorbeeld de plugin ‘SuperPWA’ installeren en instellen. Deze converteert je website dan direct in een handige app voor mobiele gebruikers. Voor Joomla zou je Progressive Web App Maker kunnen gebruiken. Ook voor Drupal is een module beschikbaar.

De extensie, plugin of module maakt de service worker, zodat je app volledig (ook offline) werkt. Deze zorgt er ook voor dat de pagina snel laadt: het houdt een cache bij. De PWA-uitbreiding maakt ook een configureerbaar manifest, met alle informatie over je web app. Daarmee wordt het ook mogelijk de website als app toe te voegen aan het beginscherm van het mobiele apparaat.
Beheerders van websites kunnen naar eigen inzicht de app configureren en aanpassen. Vaak werken eventuele andere extensies, plugins en modules goed samen met de PWA-plugin, waardoor je je gebruiker een complete mobiele ervaring kunt bieden.

  • Deel dit bericht