webnews/static/sw.js

const CACHE_VERSION = '0.2.0';
const CACHE_NAME = `web-news-${CACHE_VERSION}`;
const urlsToCache = ['/', '/favicon.svg', '/manifest.json'];

self.addEventListener('install', (event) => {
	event.waitUntil(
		caches.open(CACHE_NAME).then((cache) => {
			return cache.addAll(urlsToCache).catch(() => {
				console.log('Some resources failed to cache');
			});
		})
	);
	self.skipWaiting();
});

self.addEventListener('activate', (event) => {
	event.waitUntil(
		caches.keys().then((cacheNames) => {
			return Promise.all(
				cacheNames.map((cacheName) => {
					if (cacheName !== CACHE_NAME && cacheName.startsWith('web-news-')) {
						return caches.delete(cacheName);
					}
				})
			);
		})
	);
	self.clients.claim();
});

self.addEventListener('message', (event) => {
	if (event.data && event.data.type === 'SKIP_WAITING') {
		self.skipWaiting();
	}
});

self.addEventListener('fetch', (event) => {
	if (event.request.method !== 'GET') return;

	const url = new URL(event.request.url);

	// Don't cache API calls or external RSS fetches
	if (url.pathname.startsWith('/api') || !url.origin.startsWith(self.location.origin)) {
		return;
	}

	// Network-First Strategy for everything else
	// This ensures you always see the latest version if online,
	// and only see the cached version if truly offline.
	event.respondWith(
		fetch(event.request)
			.then((response) => {
				// If valid response, clone and cache it
				if (response && response.status === 200 && response.type === 'basic') {
					const responseToCache = response.clone();
					caches.open(CACHE_NAME).then((cache) => {
						cache.put(event.request, responseToCache);
					});
				}
				return response;
			})
			.catch(() => {
				// If network fails, try the cache
				return caches.match(event.request).then((response) => {
					if (response) return response;
					// Fallback to index.html for SPA routing offline
					if (event.request.mode === 'navigate') {
						return caches.match('/');
					}
					return new Response('Offline', { status: 503 });
				});
			})
	);
});