Synchronisatie en updates op de achtergrond
Werk caches bij en synchroniseer opnieuw zodra u weer online bent.
Synchronisatie en updates op de achtergrond is een gratis JavaScript Academy-les op CoddyKit. Dit is les 4 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.
Caches actueel houden
Een app die offline kan werken, moet updates netjes afhandelen: nieuwe assets leveren, oude assets verwijderen en mislukte acties opnieuw proberen zodra de verbinding terugkomt. Service workers bieden hulpmiddelen voor alle drie.
Cache-namen met versienummers
Het eenvoudigste updatemechanisme is een cache-naam met een versienummer. Als je het versienummer verhoogt, wordt er een nieuwe cache gemaakt en blijft de oude over om tijdens de activering te worden opgeruimd.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});Oude caches opruimen
Geef in de gebeurtenis activate alle cache-namen weer en verwijder elke naam die niet de huidige versie is. Zo maak je opslagruimte vrij en verwijder je verouderde assets.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});De wachtende worker
Standaard wordt een nieuwe worker geïnstalleerd, maar blijft deze in de wachtstatus totdat alle pagina's die door de oude worker worden beheerd, zijn gesloten. Zo voorkom je versieverschillen tijdens een sessie.
skipWaiting
self.skipWaiting() geeft een wachtende worker opdracht om meteen te activeren en de controle over te nemen zonder te wachten tot tabbladen zijn gesloten. Roep dit aan in install wanneer je wilt dat updates direct worden toegepast.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
Na de activering zorgt self.clients.claim() ervoor dat de nieuwe worker meteen de controle over al geopende pagina's kan overnemen, in plaats van alleen toekomstige navigaties te beheren.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Updates vanaf de pagina detecteren
De pagina kan via de gebeurtenis updatefound van de registratie luisteren naar een nieuwe worker en de gebruiker vervolgens vragen om opnieuw te laden voor de nieuwste versie.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});Synchronisatie op de achtergrond
Met de Background Sync API kun je een actie, zoals het verzenden van een formulier, uitstellen totdat het apparaat verbinding heeft. Je registreert een synchronisatielabel en de browser activeert online een gebeurtenis sync.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));De gebeurtenis sync afhandelen
Luister in de service worker naar sync en controleer het label. Gebruik waitUntil zodat de browser de worker actief houdt totdat de nieuwe poging is voltooid.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});Patroon: eerst in de wachtrij, daarna synchroniseren
Een robuuste offlineverwerking: sla de wachtende actie op in IndexedDB, registreer een synchronisatie en lees in de handler van sync de wachtrij uit. Verstuur vervolgens elk item met POST en verwijder het bij succes.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}Samenvatting van updates en synchronisatie
Samen maken deze functies apps veerkrachtig: caches met versienummers en opruimen houden assets actueel, skipWaiting/clients.claim bepalen het moment van uitrollen en Background Sync zorgt ervoor dat acties betrouwbaar worden voltooid zodra de gebruiker weer online is.
Korte controle
Test je begrip van updates en synchronisatie op de achtergrond.
Samenvatting
Je hebt synchronisatie op de achtergrond en updates geleerd:
- Gebruik cache-namen met versienummers en ruim oude caches op tijdens
activate. skipWaitingenclients.claimbepalen het moment van updates.- Detecteer nieuwe versies via
updatefound. - Background Sync stelt acties uit totdat je online bent via de gebeurtenis
sync. - Zet acties in de wachtrij in IndexedDB en verwerk ze daarna tijdens synchronisatie.
Je hebt Service Workers en offlinecaching voltooid.
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 “Synchronisatie en updates op de achtergrond” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Synchronisatie en updates op de achtergrond”, 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 “Synchronisatie en updates op de achtergrond”?
Werk caches bij en synchroniseer opnieuw zodra u weer online bent. 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 4 van 4.
Hoe lang duurt de les “Synchronisatie en updates op de achtergrond”?
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