Strategier for frakoblet buf-ring: CacheFirst og NetworkFirst
Implementer Cache-First for statiske ressurser og Network-First for API-svar ved hjelp av Cache API og Workbox-biblioteket.
Strategier for frakoblet buf-ring: CacheFirst og NetworkFirst er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hvorfor strategier for hurtigbufring er viktige
Service workers kan fange opp hver eneste fetch – men De trenger en strategi. Ulike typer innhold trenger ulike regler: En logo bør hurtigbufres for alltid, et API-svar bør alltid være ferskt, og nyhetsartikler egner seg godt for stale-while-revalidate.
Cache API
Service workers bruker Cache API: et nøkkel-verdi-lager med par av typen Request → Response, avgrenset per opphav. Dataene bevares mellom økter.
// open a cache:
const cache = await caches.open('v1');
// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);
// look up:
const response = await cache.match('/styles.css');
// delete:
await cache.delete('/styles.css');Cache First
Se først i hurtigbufferet. Hvis innholdet finnes der, returner det. Hvis ikke, bruk nettverket som reserve og hurtigbufre svaret. Best for: statiske ressurser, skrifttyper, logoer og appskallet.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(res => {
const clone = res.clone();
caches.open('v1').then(c => c.put(event.request, clone));
return res;
});
})
);
});Network First
Prøv nettverket først. Hvis det mislykkes (frakoblet), bruk hurtigbufferet som reserve. Best for: API-kall og dynamisk innhold der ferskhet er viktigere enn hastighet.
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then(res => {
const clone = res.clone();
caches.open('api-v1').then(c => c.put(event.request, clone));
return res;
}).catch(() => caches.match(event.request))
);
});Stale While Revalidate
Returner hurtigbufferet umiddelbart (raskt), hent deretter innholdet i bakgrunnen og oppdater hurtigbufferet til neste gang. Best for: avatarer, nyhetsartikler og delvis ferske data.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
const network = fetch(event.request).then(res => {
caches.open('v1').then(c => c.put(event.request, res.clone()));
return res;
});
return cached || network;
})
);
});Network Only
Omgå hurtigbufferet fullstendig – gå alltid til nettverket. Bruk dette for forespørsler som ikke kan hurtigbufres (autentiseringsendepunkter, analyse og mutasjoner).
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});Cache Only
Gå aldri til nettverket – returner hurtigbufferet eller mislykkes. Nyttig for filer De har forhåndslastet og aldri vil oppdatere i løpet av en økt.
Workbox-strategier
Workbox samler alle strategiene som navngitte klasser. Mindre standardkode.
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(({ request }) => request.destination === 'image',
new CacheFirst({ cacheName: 'images' })
);
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);
registerRoute(({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'pages' })
);Utløp av hurtigbuffer
Hurtigbuffere vokser for alltid med mindre De setter grenser. Workbox tilbyr ExpirationPlugin.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});Hurtigbufrede svar
Som standard hurtigbufrer nettlesere bare 200-svar. Hopp over 4xx-, 5xx- og opaque-svar (cross-origin no-cors) for å unngå å fylle hurtigbufferet med feil.
Reserve-side ved frakobling
Vis en hjelpsom frakoblet side når en navigering mislykkes – bedre brukeropplevelse enn nettleserens standardfeil.
self.addEventListener('install', (e) => {
e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});
self.addEventListener('fetch', (e) => {
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request).catch(() => caches.match('/offline.html'))
);
}
});Velg riktig strategi
Statiske ressurser (logo, skrifttype, CSS): Cache First. API-data (brukerprofil, feed): Network First. Innhold som av og til skal være ferskt (avatarer, nyheter): Stale While Revalidate. Autentisering: Network Only. Forhåndsinstallerte statiske filer: Cache Only.
Rask sjekk
Hvilken strategi for hurtigbufring er best for en CSS-fil som sjelden endres, men må lastes inn raskt?
Oppsummering: Strategier for hurtigbufring
Cache First: statiske ressurser (raskest, kan være utdaterte). Network First: API-data (ferskest, tregere). Stale While Revalidate: lever hurtigbufferet og hent i bakgrunnen. Network Only: autentisering og mutasjoner. Cache Only: forhåndsinstallert skall. Bruk Workbox for mindre standardkode. Sett grenser for utløp. Legg til en reserve-side ved frakobling. Velg strategi etter ressurstype.
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
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Strategier for frakoblet buf-ring: CacheFirst og NetworkFirst» gratis?
Ja – hele teksten i «Strategier for frakoblet buf-ring: CacheFirst og NetworkFirst» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Strategier for frakoblet buf-ring: CacheFirst og NetworkFirst»?
Implementer Cache-First for statiske ressurser og Network-First for API-svar ved hjelp av Cache API og Workbox-biblioteket. Du øver på Frontend 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 Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend 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 3 av 4.
Hvor lang tid tar leksjonen «Strategier for frakoblet buf-ring: CacheFirst og NetworkFirst»?
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 Frontend Academy-leksjonen?
Ja. Alle Frontend 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
- Web App Manifest
- Registrering og livssyklus for Service Worker
- Strategier for frakoblet buf-ring: CacheFirst og NetworkFirst
- Push-varsler