Välimuististrategiat
Soveltakaa cache-first- ja network-first-malleja.
Välimuististrategiat on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Miksi strategioilla on merkitystä
Eri resurssit vaativat erilaisen käsittelyn. Logon voi tarjota välimuistista pysyvästi, mutta API-syötteen on oltava tuore. Välimuististrategia määrittää, yritetäänkö ensin käyttää välimuistia vai verkkoa ja miten niitä yhdistetään.
Cache-first
Cache-first: tarkista välimuisti. Jos resurssi löytyy, palauta se; muussa tapauksessa hae se verkosta. Tämä sopii staattisille, harvoin muuttuville resursseille, kuten fonteille, CSS-tiedostoille ja kuville.
async function cacheFirst(request) {
const cached = await caches.match(request);
return cached || fetch(request);
}Cache-first ja varatallennus
Jos resurssia ei löydy välimuistista, voit hakea sen ja tallentaa tuloksen samalla, jolloin seuraava pyyntö on nopea. Näin välimuisti lämpenee vähitellen käyttäjien selatessa.
async function cacheFirst(request) {
const cached = await caches.match(request);
if (cached) return cached;
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
}Network-first
Network-first: yritä ensin verkkoa. Jos se onnistuu, käytä vastausta ja tallenna se välimuistiin; jos se epäonnistuu (offline-tilassa), käytä välimuistia. Tämä sopii usein päivittyvälle sisällölle, kuten uutisille tai koontinäytöille.
async function networkFirst(request) {
try {
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
} catch (err) {
return caches.match(request);
}
}Stale-while-revalidate
Stale-while-revalidate: palautetaan välimuistissa oleva kopio heti nopeuden vuoksi ja haetaan samalla taustalla tuore kopio välimuistin päivittämiseksi seuraavaa käyttökertaa varten. Tämä tarjoaa erinomaisen tasapainon nopeuden ja tuoreuden välillä.
async function staleWhileRevalidate(request) {
const cache = await caches.open('runtime');
const cached = await cache.match(request);
const network = fetch(request).then(res => {
cache.put(request, res.clone());
return res;
});
return cached || network;
}Network-only ja cache-only
Kaksi yksinkertaista ääripäätä:
- Network-only: haetaan aina verkosta eikä tallenneta välimuistiin (esimerkiksi analytiikan seurantapisteet).
- Cache-only: tarjotaan ainoastaan valmiiksi välimuistiin tallennettuja resursseja eikä käytetä verkkoa lainkaan (esimerkiksi sovelluksen runko).
// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);Reititys pyynnön tyypin mukaan
Oikeat sovellukset valitsevat strategian kullekin pyynnölle. Tutkitaan request.url- tai request.destination-arvoa fetch-käsittelijässä ja reititetään pyyntö sen perusteella.
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.startsWith('/api/')) {
event.respondWith(networkFirst(event.request));
} else {
event.respondWith(cacheFirst(event.request));
}
});Offline-varmistusten käsittely
Kun sekä verkko että välimuisti eivät löydä sisältöä, palautetaan rikkinäisen vastauksen sijaan käyttäjäystävällinen offline-sivu tai paikanhaltija.
async function withOfflineFallback(request) {
return (await caches.match(request)) ||
(await caches.match('/offline.html'));
}Vain onnistuneiden vastausten tallentaminen välimuistiin
Virheitä ei pidä tallentaa välimuistiin. Tarkistetaan response.ok (tai tila) ennen tallentamista, jotta 404- tai 500-vastaus ei saastuta välimuistia.
const fresh = await fetch(request);
if (fresh.ok) {
cache.put(request, fresh.clone());
}
return fresh;Strategian valinta
Strategia valitaan sisällön mukaan:
- Staattiset resurssit: cache-first
- Dynaamiset tiedot: network-first
- Sekasisältö: stale-while-revalidate
Useimmat sovellukset yhdistävät useita strategioita reitittämällä pyynnöt.
Strategioiden kertaus
Välimuististrategioiden avulla yksi service worker voi palvella koko sovellusta älykkäästi: staattiset resurssit saadaan heti, dynaamiset tiedot pysyvät tuoreina ja offline-varmistukset toimivat hallitusti. Kaikki valitaan pyynnön perusteella.
Pikatesti
Testatkaa, miten hyvin ymmärrätte välimuististrategiat.
Kertaus
Opitte välimuististrategiat:
- Cache-first staattisille resursseille.
- Network-first tuoreille dynaamisille tiedoille.
- Stale-while-revalidate nopeuden ja tuoreuden yhdistämiseen.
- Pyynnöt reititetään pyyntökohtaisesti käyttämällä arvoja
request.url/destination. - Vain onnistuneet vastaukset tallennetaan välimuistiin, ja offline-varmistukset tarjotaan tarvittaessa.
Seuraavaksi käsitellään taustasynkronointia ja välimuistin päivityksiä.
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
Usein kysytyt kysymykset
Onko oppitunti ”Välimuististrategiat” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Välimuististrategiat”. 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 ”Välimuististrategiat”?
Soveltakaa cache-first- ja network-first-malleja. 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 3/4.
Kuinka kauan ”Välimuististrategiat”-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
- Service Workerin rekisteröinti
- Cache API
- Välimuististrategiat
- Taustasynkronointi ja päivitykset