Strategier for service workers
Cache-first, network-first og stale-while-revalidate – velg strategi etter ressurstype.
Strategier for service workers er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Oversikt over hurtigbufringsstrategier
En service worker fanger opp nettverksforespørsler og avgjør om svaret skal leveres fra hurtigbufferet, nettverket eller begge deler. Workbox har navn på fire kjernestrategier, og hver av dem passer til en bestemt type ressurs.
CacheFirst
CacheFirst leverer fra hurtigbufferet og bruker bare nettverket når innholdet ikke finnes der. Strategien passer best for ressurser som sjelden endres og har innholdsbaserte hash-verdier, for eksempel skrifter og bilder.
// serve cached, fall back to network on missNetworkFirst
NetworkFirst prøver nettverket først og bruker hurtigbufferet hvis De er frakoblet eller forespørselen får tidsavbrudd. Strategien passer best for API-svar der oppdatert innhold er viktig, men der tilgang uten nett også er ønskelig.
// try network, fall back to cache when offlineStaleWhileRevalidate
StaleWhileRevalidate returnerer den hurtigbufrede kopien umiddelbart for å gi høy hastighet, samtidig som en oppdatert kopi hentes i bakgrunnen for å oppdatere hurtigbufferet. Strategien passer godt for JS-bunter og CSS.
// return cache now, update cache in backgroundNetworkOnly og CacheOnly
De to ytterpunktene er NetworkOnly, som alltid henter fra nettverket uten hurtigbufring, og CacheOnly, som bare leverer forhåndslastet innhold. Bruk disse for POST-forespørsler som ikke kan hurtigbufres, eller for ressurser som utelukkende er forhåndslastet.
Matrisen runtimeCaching
I Workbox-konfigurasjonen er runtimeCaching en matrise med regler. Hver regel samsvarer med URL-er for forespørsler og tilordner en strategi og et navn på hurtigbufferet.
VitePWA({
workbox: {
runtimeCaching: [ /* rules */ ]
}
});En urlPattern-regel
Hver regel har et urlPattern (regulært uttrykk eller funksjon), en handler (strateginavnet) og options, for eksempel navnet på hurtigbufferet.
{
urlPattern: /\/api\//,
handler: "NetworkFirst",
options: { cacheName: "api-cache" }
}Hurtigbufre statiske ressurser med CacheFirst
Finn bilder og skrifter, og lever dem med CacheFirst, siden URL-ene med innholds-hash endres når filen endres.
{
urlPattern: /\.(?:png|jpg|svg|woff2)$/,
handler: "CacheFirst",
options: { cacheName: "static-assets" }
}Hurtigbufre JS-bunter med StaleWhileRevalidate
Lever skript- og stilbunter umiddelbart fra hurtigbufferet, samtidig som de oppdateres i bakgrunnen.
{
urlPattern: /\.(?:js|css)$/,
handler: "StaleWhileRevalidate",
options: { cacheName: "assets" }
}Utløpsplugin-modulen
Hurtigbuffere vokser uten grenser hvis De ikke setter begrensninger. Alternativet expiration begrenser antallet oppføringer og maksimal alder, og fjerner de eldste først.
options: {
cacheName: "api-cache",
expiration: {
maxEntries: 50,
maxAgeSeconds: 60 * 60 * 24
}
}Hurtigbufre ugjennomsiktige svar
For API-svar fra andre opphav legger De ofte til cacheableResponse med tillatte statuskoder, slik at bare vellykkede svar lagres.
options: {
cacheableResponse: { statuses: [0, 200] }
}Hurtigsjekk
Hvilken strategi passer best for API-svar som bør være oppdaterte, men tilgjengelige uten nett?
Oppsummering
Workbox-strategiene passer til ulike ressurstyper: CacheFirst for statiske ressurser, NetworkFirst for API-svar og StaleWhileRevalidate for JS-/CSS-bunter. Definer dem i matrisen runtimeCaching med en urlPattern, en handler og options, for eksempel plugin-modulen expiration, for å begrense størrelsen på hurtigbufferet.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Strategier for service workers» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Strategier for service workers», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Strategier for service workers»?
Cache-first, network-first og stale-while-revalidate – velg strategi etter ressurstype. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Strategier for service workers»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Oppsett av vite-plugin-pwa
- Strategier for service workers
- Offline-støtte og bakgrunnssynkronisering
- Push-varsler i Vue PWA