Last updated
Registering the Service Worker
// In your main app JavaScript
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}
Cache Strategy Selection Guide
- Cache-first — static assets (CSS, JS, fonts, images) that are versioned
- Network-first — API responses, user-specific data, frequently updated content
- Stale-while-revalidate — pages and content where slight staleness is acceptable
- Network-only — payment flows, authentication, anything that must be fresh
- Cache-only — app shell resources that are always precached
Examples
Example 1: Cache-First Strategy (Static Assets)
Best for static assets like CSS, JS, and images that rarely change:
// service-worker.js — Cache-First Strategy
const CACHE_NAME = 'my-app-v1';
const PRECACHE_URLS = [
'/',
'/index.html',
'/styles/main.css',
'/scripts/app.js',
'/images/logo.png'
];
// Install: precache static assets
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(() => self.skipWaiting())
);
});
// Activate: clean up old caches
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames =>
Promise.all(
cacheNames
.filter(name => name !== CACHE_NAME)
.map(name => caches.delete(name))
)
).then(() => self.clients.claim())
);
});
// Fetch: serve from cache, fall back to network
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(cached => {
return cached || fetch(event.request).then(response => {
const clone = response.clone();
caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));
return response;
});
})
);
});
Example 2: Network-First Strategy (API Calls)
Best for API responses where fresh data is preferred but offline fallback is needed:
// Network-first with cache fallback for API routes
self.addEventListener('fetch', event => {
if (event.request.url.includes('/api/')) {
event.respondWith(
fetch(event.request)
.then(response => {
const clone = response.clone();
caches.open('api-cache-v1').then(cache =>
cache.put(event.request, clone)
);
return response;
})
.catch(() => caches.match(event.request))
);
}
});
Example 3: Stale-While-Revalidate
Serves cached content immediately while updating the cache in the background:
self.addEventListener('fetch', event => {
event.respondWith(
caches.open('dynamic-v1').then(cache =>
cache.match(event.request).then(cached => {
const networkFetch = fetch(event.request).then(response => {
cache.put(event.request, response.clone());
return response;
});
// Return cached immediately, update in background
return cached || networkFetch;
})
)
);
});