managarten/games/mana-games/apps/web/public/sw.js

const CACHE_NAME = 'mana-games-v1';
const OFFLINE_URL = '/offline.html';

// Assets, die immer gecacht werden sollen
const STATIC_CACHE_URLS = ['/', '/offline.html', '/favicon.svg', '/manifest.json'];

// Cache-Strategien für verschiedene Ressourcen
const CACHE_STRATEGIES = {
	// Netzwerk zuerst, dann Cache (für HTML)
	networkFirst: [/\/$/, /\.html$/, /\.astro$/],
	// Cache zuerst, dann Netzwerk (für Assets)
	cacheFirst: [
		/\.css$/,
		/\.js$/,
		/\.woff2?$/,
		/\.ttf$/,
		/\.otf$/,
		/\.svg$/,
		/\.png$/,
		/\.jpg$/,
		/\.jpeg$/,
		/\.webp$/,
		/\.ico$/,
	],
	// Nur Netzwerk (für API-Calls)
	networkOnly: [/\/api\//, /\.json$/],
};

// Service Worker Installation
self.addEventListener('install', (event) => {
	event.waitUntil(
		caches
			.open(CACHE_NAME)
			.then((cache) => {
				console.log('Service Worker: Caching static assets');
				return cache.addAll(STATIC_CACHE_URLS);
			})
			.then(() => self.skipWaiting())
	);
});

// Service Worker Aktivierung
self.addEventListener('activate', (event) => {
	event.waitUntil(
		caches
			.keys()
			.then((cacheNames) => {
				return Promise.all(
					cacheNames
						.filter((cacheName) => cacheName !== CACHE_NAME)
						.map((cacheName) => caches.delete(cacheName))
				);
			})
			.then(() => self.clients.claim())
	);
});

// Fetch-Event Handler
self.addEventListener('fetch', (event) => {
	const { request } = event;
	const url = new URL(request.url);

	// Ignoriere Chrome Extension Requests
	if (url.protocol === 'chrome-extension:') {
		return;
	}

	// Bestimme die Cache-Strategie
	const strategy = getStrategy(url.pathname);

	if (strategy === 'networkFirst') {
		event.respondWith(networkFirst(request));
	} else if (strategy === 'cacheFirst') {
		event.respondWith(cacheFirst(request));
	} else if (strategy === 'networkOnly') {
		event.respondWith(networkOnly(request));
	} else {
		// Standard: Network First
		event.respondWith(networkFirst(request));
	}
});

// Cache-Strategien Implementierung
async function networkFirst(request) {
	try {
		const networkResponse = await fetch(request);
		if (networkResponse.ok) {
			const cache = await caches.open(CACHE_NAME);
			cache.put(request, networkResponse.clone());
		}
		return networkResponse;
	} catch (error) {
		const cachedResponse = await caches.match(request);
		if (cachedResponse) {
			return cachedResponse;
		}

		// Wenn es eine Navigation ist und wir offline sind, zeige die Offline-Seite
		if (request.mode === 'navigate') {
			const offlineResponse = await caches.match(OFFLINE_URL);
			if (offlineResponse) {
				return offlineResponse;
			}
		}

		throw error;
	}
}

async function cacheFirst(request) {
	const cachedResponse = await caches.match(request);
	if (cachedResponse) {
		return cachedResponse;
	}

	try {
		const networkResponse = await fetch(request);
		if (networkResponse.ok) {
			const cache = await caches.open(CACHE_NAME);
			cache.put(request, networkResponse.clone());
		}
		return networkResponse;
	} catch (error) {
		console.error('Fetch failed:', error);
		throw error;
	}
}

async function networkOnly(request) {
	return fetch(request);
}

// Hilfsfunktion zur Bestimmung der Cache-Strategie
function getStrategy(pathname) {
	for (const [strategy, patterns] of Object.entries(CACHE_STRATEGIES)) {
		if (patterns.some((pattern) => pattern.test(pathname))) {
			return strategy;
		}
	}
	return 'networkFirst';
}

// Message Handler für Cache-Updates
self.addEventListener('message', (event) => {
	if (event.data && event.data.type === 'SKIP_WAITING') {
		self.skipWaiting();
	}

	if (event.data && event.data.type === 'CACHE_GAME') {
		const gameUrl = event.data.url;
		caches
			.open(CACHE_NAME)
			.then((cache) => cache.add(gameUrl))
			.then(() => {
				event.ports[0].postMessage({ cached: true });
			})
			.catch((error) => {
				event.ports[0].postMessage({ cached: false, error: error.message });
			});
	}
});