Service Workers zijn een browserfunctie waarmee u offline-functionaliteit kunt bieden, evenals andere netwerkgerelateerde verbeteringen. Hier is een basisvoorbeeld van hoe u een service worker kunt gebruiken in een React-app, er zijn nog meer dingen die u kunt doen met hen, zoals pushmeldingen verzenden.
React scripts versie 2 & hoger leveren een service worker standaard mee. Voor gebruik moet je de volgende regel in je src/index.js bestand ongecommentarieerd hebben:
```
serviceWorkerRegistration.register();
```
Als je dit hebt gedaan dan zal je applicatie nu de service-worker in de productiebuild gebruiken.
Maar als je de service worker wilt aanpassen:
1. Expelleer je React-app (zorg ervoor dat je zeker weet dat je dit wilt doen omdat dit een eenrichtingsactie is).
```
npm run eject
```
1. Na ejectie react-scripts zou er een map (src/service-worker.js) moeten zijn gegenereerd.
1. Voeg je aanpassing toe aan dit bestand.
Hier is een eenvoudig voorbeeld van service-worker.js:
```
// Installeer een service worker
self.addEventListener(‘install’, event => {
// Voer installatiewerkzaamheden uit
});
// Activeer een service worker
self.addEventListener(‘activate’, event => {
// Voer activeringswerkzaamheden uit
});
// Fetch event
self.addEventListener(‘fetch’, event => {
// Voer iets uit met fetch events
});
```
Belangrijk om op te merken is dat Service Workers werken met HTTPS en dat kan moeilijk zijn om in een ontwikkelomgeving te hanteren.
Vergeet niet de service workers te “unregister” bij het testen of ze zullen gekke dingen met uw cache doen. Zorg ervoor dat de onderstaande regel is ongecommentarieerd in je src/index.js bestand om ze te registeren voor een productie build:
```
serviceWorkerRegistration.unregister();
```
