Caching Strategies
Apply cache-first and network-first patterns.
Why Strategies Matter
Different assets need different handling. A logo can be served from cache forever; an API feed must be fresh. A caching strategy decides whether to try the cache or the network first, and how to combine them.
Cache-First
Cache-first: check the cache; if found, return it; otherwise fetch from the network. Ideal for static, rarely-changing assets like fonts, CSS, and images.
async function cacheFirst(request) {
const cached = await caches.match(request);
return cached || fetch(request);
}All lessons in this course
- Registering a Service Worker
- The Cache API
- Caching Strategies
- Background Sync and Updates