Service workers intercept network requests enabling offline support and advanced caching. Strategies include Cache First (fast, stale risk), Network First (fresh, slow), Stale While Revalidate (best UX), and Cache Only/Network Only for specific needs.
Service Worker Capabilities:
Caching Strategies:
Cache First: Check cache, fallback to network
Network First: Try network, fallback to cache
Stale While Revalidate: Serve cache, update in background
Cache Only: Only from cache
Network Only: Never cache
// Register service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('SW registered:', registration.scope);
})
.catch(error => {
console.log('SW registration failed:', error);
});
}
// sw.js - Service Worker
const CACHE_NAME = 'app-cache-v1';
const ASSETS = [
'/',
'/index.html',
'/styles.css',
'/app.js',
'/offline.html'
];
// Install - cache assets
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(ASSETS))
.then(() => self.skipWaiting())
);
});
// Activate - clean old caches
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames
.filter(name => name !== CACHE_NAME)
.map(name => caches.delete(name))
);
})
);
});