Een Service Worker registreren
Installeer en activeer een service worker.
Een Service Worker registreren is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat is een service worker?
Een service worker is een script dat de browser op de achtergrond uitvoert, los van de pagina. Het werkt als een programmeerbare netwerkproxy: het kan verzoeken onderscheppen, antwoorden uit de cache leveren en offline-ervaringen mogelijk maken.
Functieondersteuning detecteren
Niet elke omgeving ondersteunt service workers. Controleer vóór het registreren of navigator.serviceWorker bestaat, zodat oudere browsers netjes kunnen terugvallen.
if ('serviceWorker' in navigator) {
// safe to register
}Registreren
Registreer een service worker door de URL van het script door te geven aan navigator.serviceWorker.register. Dit retourneert een Promise die wordt opgelost met het registratieobject.
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('registered, scope:', reg.scope))
.catch(err => console.log('registration failed:', err));Registratiebereik
Het bereik is de verzameling URL's die de worker beheert. Standaard is dit de map waarin het script staat. Een worker op /sw.js beheert de hele website; een worker op /app/sw.js beheert alleen /app/.
navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.Een expliciet bereik instellen
Je kunt het bereik met een optie beperken, maar je kunt het niet uitbreiden buiten de map van het script, tenzij de server een speciale header instelt.
navigator.serviceWorker.register('/sw.js', {
scope: '/dashboard/'
});Vereiste voor HTTPS
Service workers vereisen een beveiligde context: HTTPS in productie. localhost wordt voor ontwikkeling als veilig beschouwd. Zo voorkom je dat aanvallers de netwerkproxy kapen.
De gebeurtenis install
De eerste keer dat een worker wordt geregistreerd, voert deze de gebeurtenis install uit. Hier sla je meestal essentiële bestanden vooraf in de cache op, zodat de app offline werkt.
// sw.js
self.addEventListener('install', (event) => {
console.log('service worker installing');
});De gebeurtenis activate
Na de installatie activeert de worker activate. Dit is de plek om oude caches van vorige versies op te ruimen voordat de worker pagina's gaat beheren.
// sw.js
self.addEventListener('activate', (event) => {
console.log('service worker activated');
});De levenscyclus
Een service worker doorloopt verschillende toestanden:
- installing — de afhandelaar voor de installatie uitvoeren
- installed/waiting — klaar en wachtend om het beheer over te nemen
- activating / activated — beheert nu de pagina's
Standaard wacht een nieuwe worker met activeren totdat oude pagina's zijn gesloten.
Verzoeken onderscheppen
Zodra de worker actief is, ontvangt hij via de gebeurtenis fetch elk netwerkverzoek binnen zijn bereik. Je kunt antwoorden uit de cache, het netwerk of een combinatie daarvan leveren.
// sw.js
self.addEventListener('fetch', (event) => {
// event.request describes the outgoing request
console.log('intercepted', event.request.url);
});Samenvatting van registratie
Een service worker registreren betekent: controleer de functieondersteuning, roep register aan met een script-URL, let op het bereik en de vereiste voor HTTPS, en verwerk de gebeurtenissen install, activate en fetch in het workerscript.
Korte controle
Test je begrip van het registreren van een service worker.
Samenvatting
Je hebt geleerd hoe je een service worker registreert:
- Controleer de functieondersteuning met
'serviceWorker' in navigator. register(url, { scope })retourneert een Promise.- Het bereik is standaard de map van het script; HTTPS is vereist.
- Verwerk
install,activateenfetchin de worker.
Hierna volgt de Cache API.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Een Service Worker registreren” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Een Service Worker registreren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat leer ik in “Een Service Worker registreren”?
Installeer en activeer een service worker. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Een Service Worker registreren”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Een Service Worker registreren
- De Cache API
- Cachingstrategieën
- Synchronisatie en updates op de achtergrond