De kracht van moderne webervaringen met progressive web apps

Progressive Web Apps, of PWA’s, zijn moderne webapplicaties die eruitzien en aanvoelen als native apps op je telefoon of tablet. Ze combineren het beste van websites en mobiele apps: je hoeft ze niet te installeren via een app-store, ze laden snel, werken ook offline en kunnen push-meldingen tonen. In dit artikel leggen we stap voor stap uit wat PWA’s zijn, waarom ze handig zijn, en geven we eenvoudige codevoorbeelden waarmee je zelf aan de slag kunt.

Wat maakt een webapp een PWA?

Een gewone website laadt pas wanneer er een internetverbinding is en biedt weinig mogelijkheden om offline te werken of meldingen te tonen. Een PWA voegt drie belangrijke elementen toe. Ten eerste is er een manifestbestand dat beschrijft hoe je app op het startscherm moet verschijnen, met icoon en naam. Ten tweede is er een service worker, een stukje JavaScript dat in de achtergrond draait en content in de cache bewaart zodat je app ook zonder internet werkt. Ten derde serveer je de pagina’s via HTTPS, wat ervoor zorgt dat de gegevens veilig tussen gebruiker en server gaan.

Het manifestbestand

Het manifest is een klein JSON-bestand dat je in de root van je project plaatst. Het bevat eigenschappen zoals de naam, icoon en de kleur van de statusbalk. Dit bestand vertelt je browser: “Dit is een app die je kunt installeren op je startscherm.”

{
    "name": "Mijn PWA Voorbeeld",
    "short_name": "MijnPWA",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#2c3e50",
    "icons": [
        {
            "src": "/icons/icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Na het aanmaken van manifest.json link je ernaar in je HTML-header:

<link rel="manifest" href="/manifest.json">

Registreren van de service worker

De service worker is een JavaScript-bestand dat in de browser werkt als een proxy tussen netwerk en cache. Het stelt je in staat om pagina’s en bestanden offline beschikbaar te maken.

In je hoofdscript, bijvoorbeeld app.js, registreer je de service worker zo:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js').then(function(reg) {
            console.log('Service worker geregistreerd.', reg);
        }).catch(function(err) {
            console.log('Service worker registratie mislukt:', err);
        });
    });
}

De service worker zelf

In sw.js definieer je welke bestanden je wilt cachen en hoe je ze serveert. Het simpelste voorbeeld ziet er zo uit:

const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
    '/',
    '/index.html',
    '/styles.css',
    '/app.js',
    '/icons/icon-192.png'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
    );
});

De install-gebeurtenis vult de cache met je opgegeven bestanden. De fetch-gebeurtenis zorgt ervoor dat de browser eerst in de cache kijkt en pas naar het netwerk gaat als iets niet gevonden is.

HTTPS is verplicht

Service workers werken alleen via HTTPS. Dit zorgt voor een veilige verbinding en voorkomt dat kwaadwillenden ongevraagd data kunnen afluisteren of manipuleren. Tijdens ontwikkeling kun je localhost gebruiken zonder HTTPS, maar zodra je live gaat, moet je een SSL-certificaat installeren.

Offline-first benadering

Het voordeel van een PWA is dat je app zelfs zonder internet grotendeels functioneel blijft. Voor dynamische data kun je in de service worker aanvullende strategieën toepassen, zoals “cache then network” of “network then cache”. De eerste strategie toont direct de gecachte versie en vernieuwt op de achtergrond, terwijl de tweede eerst een netwerkverzoek doet en bij falen terugvalt op cache.

self.addEventListener('fetch', event => {
    event.respondWith(
        fetch(event.request).then(response => {
            const responseClone = response.clone();
            caches.open(CACHE_NAME).then(cache => {
                cache.put(event.request, responseClone);
            });
            return response;
        }).catch(() => caches.match(event.request))
    );
});

Push-meldingen

Een PWA kan push-meldingen sturen, net als native apps. Dit vraagt om extra stappen: eerst vraag je de gebruiker om toestemming, daarna registreer je een pushservice én verwerk je push-data in de service worker.

Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
        navigator.serviceWorker.ready.then(registration => {
            registration.pushManager.subscribe({
                userVisibleOnly: true,
                applicationServerKey: ''
            }).then(subscription => {
                console.log('Geabonneerd op push:', subscription.endpoint);
            });
        });
    }
});

self.addEventListener('push', event => {
    const data = event.data.json();
    const options = {
        body: data.body,
        icon: '/icons/icon-192.png'
    };
    event.waitUntil(
        self.registration.showNotification(data.title, options)
    );
});

Installatieprompt

Browsers geven soms automatisch een prompt om de PWA te installeren. Je kunt dit ook handmatig triggeren. Bewaar het “beforeinstallprompt”-event en laat een eigen knop zien:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', e => {
    e.preventDefault();
    deferredPrompt = e;
    document.getElementById('install-button').style.display = 'block';
});

document.getElementById('install-button').addEventListener('click', () => {
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then(choice => {
        if (choice.outcome === 'accepted') {
            console.log('App geïnstalleerd');
        }
        deferredPrompt = null;
    });
});

Voorbeelden van succesvolle PWA’s

Twee bekende voorbeelden van bedrijven die overstapten naar PWA’s zijn Twitter en Starbucks. Twitter lanceerde Twitter Lite, een snellere en lichtere versie van de app, met 65% minder data-gebruik. Starbucks bouwde een PWA waarmee barista’s bestellingen snel kunnen uitlezen, zelfs met slechte verbinding, en zag een grote toename in bestellingen.

Bruikbare tools en bronnen

Om je PWA te testen gebruik je de Chrome DevTools in het 'Application' tabblad. Audit je site met Lighthouse voor prestatie- en PWA-checks. Voor het genereren van iconen kun je een generator gebruiken zoals RealFaviconGenerator.

Conclusie

Progressive Web Apps zijn een krachtige manier om je website om te vormen tot een app-ervaring zonder de drempel van de app-store. Met een manifest, een service worker en HTTPS maak je een app die snel laadt, offline werkt en zelfs push-meldingen verstuurt. Je gebruikers krijgen een vlotte, betrouwbare ervaring en jij behoudt één codebase. Begin klein, experimenteer met caching-strategieën en uitbreidende features, en zie hoe je website evolueert naar een moderne PWA.

Heb ik je goed geholpen?

Jouw bijdrage stelt mij in staat om meer artikelen te schrijven.

Ik doneer nu € 1,-