Vue Academy · Oppitunti

Service Worker -strategiat

Cache-first, network-first, stale-while-revalidate — resurssityypin mukaisen strategian valinta

Oppitunti 2/413 vaihetta

Service Worker -strategiat on ilmainen Vue 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 Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Välimuististrategioiden yleiskatsaus

Service worker sieppaa verkkopyynnöt ja päättää, tarjotaanko sisältö välimuistista, verkosta vai molemmista. Workbox nimeää neljä keskeistä strategiaa, joista kukin sopii erityyppiselle resurssille.

CacheFirst

CacheFirst tarjoaa sisällön välimuistista ja käyttää verkkoa vain välimuistiosuman puuttuessa. Se sopii parhaiten harvoin muuttuviin ja sisältötiivistettyihin resursseihin, kuten fontteihin ja kuviin.

// serve cached, fall back to network on miss

NetworkFirst

NetworkFirst yrittää ensin käyttää verkkoa ja siirtyy välimuistiin, jos yhteys on poikki tai pyyntö aikakatkaistaan. Se sopii parhaiten API-vastauksiin, joissa ajantasaisuus on tärkeää mutta offline-käyttö halutaan silti mahdollistaa.

// try network, fall back to cache when offline

StaleWhileRevalidate

StaleWhileRevalidate palauttaa välimuistissa olevan kopion heti nopeuden vuoksi ja hakee samalla taustalla tuoreen kopion välimuistin päivittämiseksi. Se sopii erinomaisesti JavaScript-nipuille ja CSS-tiedostoille.

// return cache now, update cache in background

NetworkOnly ja CacheOnly

Nämä ovat kaksi ääripäätä: NetworkOnly hakee aina verkosta eikä käytä välimuistia, kun taas CacheOnly tarjoaa ainoastaan ennakkoon välimuistiin tallennettua sisältöä. Käytä näitä välimuistiin sopimattomiin POST-pyyntöihin tai tiukasti ennakkoon välimuistissa pidettäviin resursseihin.

runtimeCaching-taulukko

Workbox-määrityksissä runtimeCaching on sääntöjen taulukko. Kukin sääntö vastaa pyyntöjen URL-osoitteita ja määrittää käytettävän strategian sekä välimuistin nimen.

VitePWA({
  workbox: {
    runtimeCaching: [ /* rules */ ]
  }
});

urlPattern-sääntö

Kullakin säännöllä on urlPattern (säännöllinen lauseke tai funktio), handler (strategian nimi) ja options, kuten välimuistin nimi.

{
  urlPattern: /\/api\//,
  handler: "NetworkFirst",
  options: { cacheName: "api-cache" }
}

Staattisten resurssien välimuistitus CacheFirst-strategialla

Kohdista kuviin ja fontteihin CacheFirst-strategia, koska niiden sisältötiivistetyt URL-osoitteet muuttuvat tiedoston muuttuessa.

{
  urlPattern: /\.(?:png|jpg|svg|woff2)$/,
  handler: "CacheFirst",
  options: { cacheName: "static-assets" }
}

JS-nippujen välimuistitus StaleWhileRevalidate-strategialla

Tarjoa skripti- ja tyyliniput heti välimuistista ja päivitä ne samalla taustalla.

{
  urlPattern: /\.(?:js|css)$/,
  handler: "StaleWhileRevalidate",
  options: { cacheName: "assets" }
}

Expiration-plugin

Välimuistit kasvavat rajatta ilman rajoituksia. expiration-asetus rajoittaa merkintöjen määrää ja niiden enimmäisikää ja poistaa ensin vanhimmat merkinnät.

options: {
  cacheName: "api-cache",
  expiration: {
    maxEntries: 50,
    maxAgeSeconds: 60 * 60 * 24
  }
}

Opaque-vastausten välimuistitus

Ristikkäisen alkuperän API-vastauksille lisätään usein cacheableResponse sallittujen tilakoodien kanssa, jotta vain onnistuneet vastaukset tallennetaan.

options: {
  cacheableResponse: { statuses: [0, 200] }
}

Pikatarkistus

Mikä strategia sopii parhaiten API-vastauksiin, joiden pitäisi olla ajantasaisia mutta käytettävissä myös offline-tilassa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Workboxin strategiat vastaavat eri resurssityyppejä: CacheFirst staattisille resursseille, NetworkFirst API-vastauksille ja StaleWhileRevalidate JS-/CSS-nipuille. Määritä ne runtimeCaching-taulukossa käyttämällä urlPattern- ja handler-asetuksia sekä options-asetuksia, kuten välimuistin kokoa rajoittavaa expiration-pluginia.

Aloita maksutta

Opi HTML 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: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Service Worker -strategiat” ilmainen?

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

Mitä opin oppitunnilla ”Service Worker -strategiat”?

Cache-first, network-first, stale-while-revalidate — resurssityypin mukaisen strategian valinta Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue 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 ”Service Worker -strategiat”-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ä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue 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: Vue Academy