Offline Caching Strategies: CacheFirst NetworkFirst
Implement Cache-First for static assets and Network-First for API responses using the Cache API and the Workbox library.
Why Caching Strategies Matter
Service workers can intercept every fetch — but you need a strategy. Different content needs different rules: a logo should be cached forever, an API response should always be fresh, news articles benefit from stale-while-revalidate.
The Cache API
Service workers use the Cache API: a key-value store of Request → Response pairs, scoped per origin. Persisted across sessions.
// 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');All lessons in this course
- The Web App Manifest
- Service Worker Registration and Lifecycle
- Offline Caching Strategies: CacheFirst NetworkFirst
- Push Notifications