JavaScript Academy · Les

De Cache API

Sla responses op in de cache en lever ze daaruit.

Les 2 van 413 stappen

De Cache API is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 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 de Cache API?

De Cache API slaat paren van verzoeken en antwoorden op in benoemde caches. Service workers gebruiken deze om bestanden te leveren zonder het netwerk te raadplegen. Dit vormt de basis van offlineondersteuning.

Het object caches

Het globale object caches (een CacheStorage) beheert al je benoemde caches. Het is beschikbaar in zowel pagina's als service workers.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Een cache openen

caches.open(name) retourneert een Promise voor een cache met die naam en maakt die aan als hij nog niet bestaat. Met namen kun je je caches van verschillende versies voorzien.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

Vooraf cachen met addAll

Tijdens install haalt cache.addAll(urls) in één aanroep een lijst bestanden op en slaat die op. Als een van de verzoeken mislukt, wordt de hele bewerking afgewezen.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) vertelt de browser dat hij de worker actief moet houden totdat de Promise is afgehandeld. Plaats je cache-initialisatie hierin, zodat de installatie niet te vroeg wordt afgerond.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Eén item toevoegen

cache.put(request, response) slaat één antwoord op, terwijl cache.add(url) één URL ophaalt en opslaat. Gebruik put wanneer je al een antwoord hebt dat je wilt opslaan.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Een antwoord in de cache vinden

cache.match(request) zoekt een opgeslagen antwoord op. De Promise wordt opgelost met het antwoord, of met undefined als er geen overeenkomst is.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

Snelkoppeling caches.match

caches.match(request) doorzoekt alle caches tegelijk. Dat is handig in een fetch-afhandelaar wanneer het niet uitmaakt in welke cache het bestand staat.

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

respondWith

Binnen een gebeurtenis fetch levert event.respondWith(promise) het antwoord dat de browser gebruikt. Laat de Promise worden opgelost met een antwoord uit de cache of een nieuw opgehaald Response-object.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Antwoorden klonen

De inhoud van een antwoord kan maar één keer worden gelezen. Als je een antwoord zowel wilt retourneren als opslaan, moet je het eerst klonen.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Cache-items verwijderen

cache.delete(request) verwijdert één item; caches.delete(name) verwijdert een hele benoemde cache. Gebruik deze functies om verouderde bestanden uit de cache te verwijderen.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Korte controle

Test je begrip van de Cache API.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt de Cache API geleerd:

caches.open(name) haalt een benoemde cache op of maakt die aan.
addAll vult de cache vooraf; put/add slaan items op.
match haalt items op; caches.match doorzoekt alle caches.
respondWith levert het antwoord tijdens fetch.
Kloon antwoorden voordat je ze opslaat en retourneert.

Hierna volgen cachingsstrategieën.

Gratis beginnen

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

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “De Cache API” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “De Cache API”, 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 “De Cache API”?

Sla responses op in de cache en lever ze daaruit. 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 2 van 4.

Hoe lang duurt de les “De Cache API”?

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

← Terug naar JavaScript Academy