JavaScript Academy · Lektion

Cache-API:t

Lagra och leverera svar från cacheminnet.

Lektion 2 av 413 steg

Cache-API:t är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad är Cache API?

Cache API lagrar par av förfrågningar och svar i namngivna cachar. Service workers använder det för att leverera resurser utan att kontakta nätverket, vilket utgör grunden för funktioner utan nätanslutning.

Objektet caches

Det globala objektet caches (en CacheStorage) hanterar alla era namngivna cachar. Det är tillgängligt både på sidor och i service workers.

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

Öppna en cache

caches.open(name) returnerar ett Promise för en cache med det namnet och skapar den om den inte finns. Med namn kan ni versionshantera cacharna.

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

Förhandslagra med addAll

Under install hämtar och lagrar cache.addAll(urls) en lista med resurser i ett enda anrop. Om någon hämtning misslyckas avvisas hela operationen.

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

waitUntil

event.waitUntil(promise) meddelar webbläsaren att workern ska hållas aktiv tills promiset har slutförts. Omslut cachekonfigurationen med det, så att installationen inte avslutas för tidigt.

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

Lägga till en post

cache.put(request, response) lagrar ett enskilt svar, medan cache.add(url) hämtar och lagrar en URL. Använd put när ni redan har ett svar som ska sparas.

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

Slå upp från cache

cache.match(request) slår upp ett lagrat svar. Det löses till svaret eller till undefined om ingen matchning finns.

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

Genvägen caches.match

caches.match(request) söker igenom alla cachar samtidigt, vilket är praktiskt i en fetch-hanterare när det inte spelar någon roll vilken cache som innehåller resursen.

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

respondWith

Inuti ett fetch-event tillhandahåller event.respondWith(promise) det svar som webbläsaren ska använda. Lös promiset till en cachad eller nyhämtad Response.

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

Klona svar

Innehållet i ett svar kan bara läsas en gång. Om ni både vill returnera ett svar och lagra det måste ni klona det först.

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

Ta bort poster ur cache

cache.delete(request) tar bort en post, medan caches.delete(name) tar bort en hel namngiven cache. Använd dessa för att rensa bort inaktuella resurser.

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

Snabbtest

Testa er förståelse av Cache API.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt er om Cache API:

caches.open(name) hämtar eller skapar en namngiven cache.
addAll förhandslagrar resurser; put/add lagrar poster.
match hämtar poster; caches.match söker i alla cachar.
respondWith tillhandahåller svaret i fetch-hanteringen.
Klona svar innan ni cachar och returnerar dem.

Nästa steg är cachningsstrategier.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Cache-API:t” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Cache-API:t”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Cache-API:t”?

Lagra och leverera svar från cacheminnet. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Cache-API:t”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy