JavaScript Academy · Oppitunti

Cache API

Tallentakaa vastauksia välimuistiin ja tarjotkaa niitä sieltä.

Oppitunti 2/413 vaihetta

Cache API on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on Cache API?

Cache API tallentaa pyyntö-vastauspareja nimettyihin välimuisteihin. Service workerit käyttävät sitä resurssien tarjoamiseen ilman verkkopyyntöä, mikä muodostaa offline-tuen perustan.

caches-objekti

Globaali caches-objekti (eli CacheStorage) hallitsee kaikkia nimettyjä välimuistejasi. Se on käytettävissä sekä sivuilla että service workereissa.

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

Välimuistin avaaminen

caches.open(name) palauttaa Promisen nimellä määritetystä välimuistista ja luo välimuistin, jos sitä ei ole olemassa. Nimien avulla voit versioida välimuisteja.

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

Esivälimuistiin tallentaminen addAll-menetelmällä

Asennuksen aikana cache.addAll(urls) hakee ja tallentaa resurssiluettelon yhdellä kutsulla. Jos jokin haku epäonnistuu, koko operaatio hylätään.

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

waitUntil

event.waitUntil(promise) kertoo selaimelle, että worker on pidettävä käynnissä, kunnes Promise on valmis. Kääri välimuistin määritys sen sisään, jotta asennus ei valmistu liian aikaisin.

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

Yhden tietueen lisääminen

cache.put(request, response) tallentaa yhden vastauksen, kun taas cache.add(url) hakee ja tallentaa yhden URL-osoitteen. Käytä put-komentoa, kun sinulla on jo tallennettava vastaus.

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

Haku välimuistista

cache.match(request) etsii tallennettua vastausta. Se palautuu vastauksena tai arvona undefined, jos vastaavaa ei löydy.

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

caches.match-pikavalinta

caches.match(request) etsii kaikista välimuisteista kerralla. Se on kätevä fetch-käsittelijässä, kun sillä ei ole väliä, missä välimuistissa resurssi on.

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

respondWith

fetch-tapahtuman sisällä event.respondWith(promise) määrittää vastauksen, jota selain käyttää. Palauta siinä välimuistissa oleva tai juuri haettu Response.

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

Vastausten kloonaaminen

Vastauksen rungon voi lukea vain kerran. Jos haluat sekä palauttaa vastauksen että tallentaa sen, kloonaa se ensin.

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

Välimuistimerkintöjen poistaminen

cache.delete(request) poistaa yhden merkinnän, kun taas caches.delete(name) poistaa kokonaisen nimetyn välimuistin. Näiden avulla voit poistaa vanhentuneet resurssit välimuistista.

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

Pikatarkistus

Testaa, kuinka hyvin ymmärrät Cache API:n.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit Cache API:n:

caches.open(name) hakee nimetyn välimuistin tai luo sen.
addAll tallentaa resurssit etukäteen välimuistiin, ja put/add tallentavat merkintöjä.
match hakee merkinnän, ja caches.match etsii kaikista välimuisteista.
respondWith määrittää fetch-tapahtuman vastauksen.
Kloonaa vastaukset ennen niiden tallentamista ja palauttamista.

Seuraavaksi käsitellään välimuististrategioita.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Cache API” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Cache API”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Cache API”?

Tallentakaa vastauksia välimuistiin ja tarjotkaa niitä sieltä. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Cache API”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy