Strategier för offlinecachning: CacheFirst och NetworkFirst
Implementera Cache-First för statiska resurser och Network-First för API-svar med Cache API och Workbox-biblioteket.
Strategier för offlinecachning: CacheFirst och NetworkFirst är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Varför cachelagringsstrategier är viktiga
Service workers kan fånga upp varje fetch – men ni behöver en strategi. Olika innehåll behöver olika regler: en logotyp bör cachelagras för alltid, ett API-svar bör alltid vara aktuellt och nyhetsartiklar lämpar sig för Stale While Revalidate.
Cache API
Service workers använder Cache API: ett nyckelvärdeslager med par av typen Request → Response, begränsat till varje origin. Informationen finns kvar mellan sessioner.
// 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
Kontrollera cacheminnet först. Om resursen finns där returnerar ni den. Annars hämtar ni den från nätverket och cachelagrar svaret. Bäst för: statiska tillgångar, typsnitt, logotyper och appskal.
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
Försök först med nätverket. Om det misslyckas (offline) använder ni cacheminnet som reserv. Bäst för: API-anrop och dynamiskt innehåll där aktualitet är viktigare än 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
Returnera innehållet från cacheminnet direkt (snabbt), hämta sedan en uppdatering i bakgrunden och uppdatera cacheminnet inför nästa gång. Bäst för: avatarer, nyhetsartiklar och halvaktuella 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
Hoppa helt över cacheminnet – gå alltid till nätverket. Använd detta för förfrågningar som inte ska cachelagras (autentiseringsendpoints, analys och mutationer).
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});Cache Only
Gå aldrig till nätverket – returnera innehållet från cacheminnet eller misslyckas. Användbart för filer som ni har förhandscachelagrat och aldrig vill uppdatera under en session.
Workbox-strategier
Workbox paketerar alla strategier som namngivna klasser. Mindre standardkod.
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' })
);Cache-expirering
Cacheminnen växer utan gräns om ni inte sätter begränsningar. Workbox tillhandahåller ExpirationPlugin.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});Cachebara svar
Som standard cachelagrar webbläsare endast svar med status 200. Hoppa över 4xx-, 5xx- och opaque-svar (cross-origin no-cors) för att undvika att fylla cacheminnet med fel.
Reservsida offline
Visa en vänlig offlinesida när en navigering misslyckas – bättre användarupplevelse än webbläsarens standardfel.
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'))
);
}
});Välj rätt strategi
Statiska tillgångar (logotyp, typsnitt, CSS): Cache First. API-data (användarprofil, flöde): Network First. Innehåll som ibland ska vara aktuellt (avatarer, nyheter): Stale While Revalidate. Autentisering: Network Only. Förinstallerade statiska filer: Cache Only.
Snabbkontroll
Vilken cachelagringsstrategi passar bäst för en CSS-fil som sällan ändras men måste laddas snabbt?
Sammanfattning: cachelagringsstrategier
Cache First: statiska tillgångar (snabbast, kan vara inaktuella). Network First: API-data (mest aktuella, långsammare). Stale While Revalidate: leverera från cacheminnet + hämta i bakgrunden. Network Only: autentisering och mutationer. Cache Only: förinstallerat appskal. Använd Workbox för mindre standardkod. Sätt gränser för cacheminnets storlek och livslängd. Lägg till en reservsida offline. Välj strategi utifrån resurstyp.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Strategier för offlinecachning: CacheFirst och NetworkFirst” gratis?
Ja – hela texten till ”Strategier för offlinecachning: CacheFirst och NetworkFirst” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Strategier för offlinecachning: CacheFirst och NetworkFirst”?
Implementera Cache-First för statiska resurser och Network-First för API-svar med Cache API och Workbox-biblioteket. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Strategier för offlinecachning: CacheFirst och NetworkFirst”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Webbappens manifest
- Registrering och livscykel för Service Worker
- Strategier för offlinecachning: CacheFirst och NetworkFirst
- Pushnotiser