Fix service worker mess

This commit is contained in:
Roman Krček
2025-09-03 10:38:30 +02:00
parent 238d2eebc5
commit e616165a77

View File

@@ -1,183 +1,71 @@
/// <refereself.addEventListener/// <reference types="@sveltejs/kit" /> /// <reference lib="webworker" />
/// <reference types="@sveltejs/kit" />
import { build, files, version } from '$service-worker'; import { build, files, version } from '$service-worker';
// Create a unique cache name for this deployment declare const self: ServiceWorkerGlobalScope;
const CACHE = `cache-${version}`;
const CACHE = `cache-${version}`;
const ASSETS = [ const ASSETS = [
...build, // the app itself ...build,
...files // everything in `static` ...files
]; ];
self.addEventListener('install', (event) => { self.addEventListener('install', (event: ExtendableEvent) => {
console.log('[Service Worker] Install'); const addFilesToCache = async () => {
// Create a new cache and add all files to it
async function addFilesToCache() {
const cache = await caches.open(CACHE); const cache = await caches.open(CACHE);
await cache.addAll(ASSETS); await cache.addAll(ASSETS);
} };
console.log("[SW] Installing new service worker");
event.waitUntil(addFilesToCache()); event.waitUntil(addFilesToCache());
// Tell the new service worker to activate immediately
self.skipWaiting(); self.skipWaiting();
}); });
self.addEventListener('activate', (event) => { self.addEventListener('activate', (event: ExtendableEvent) => {
console.log('[Service Worker] Activate'); const deleteOldCaches = async () => {
// Remove previous cached data from disk
async function deleteOldCaches() {
for (const key of await caches.keys()) { for (const key of await caches.keys()) {
if (key !== CACHE) await caches.delete(key); if (key !== CACHE) await caches.delete(key);
console.log("[SW] Removing old service worker")
} }
} };
event.waitUntil(deleteOldCaches()); event.waitUntil(deleteOldCaches());
// Tell the active service worker to take control of the page immediately
self.clients.claim(); self.clients.claim();
}); });
self.addEventListener('fetch', (event) => { self.addEventListener('fetch', (event: FetchEvent) => {
if (event.request.method !== 'GET') return; if (event.request.method !== 'GET') return;
// --- START: MODIFICATION TO PREVENT CACHING PRIVATE ROUTES ---
const url = new URL(event.request.url); const url = new URL(event.request.url);
// If the request is for a private route, always fetch from the network. // Never cache private routes
// This ensures that server-side authentication checks are not bypassed by the cache.
if (url.pathname.startsWith('/private')) { if (url.pathname.startsWith('/private')) {
event.respondWith(fetch(event.request)); event.respondWith(fetch(event.request));
return; return;
} }
// --- END: MODIFICATION ---
async function respond() { const respond = async () => {
const url = new URL(event.request.url); const cache = await caches.open(CACHE);
const cache = await self.caches.open(CACHE);
// `build`/`prerendered` pages are cached on install.
// If the page exists in the cache, serve it directly.
if (ASSETS.includes(url.pathname)) { if (ASSETS.includes(url.pathname)) {
const cachedResponse = await cache.match(url.pathname); const cached = await cache.match(url.pathname);
if (cachedResponse) { if (cached) return cached;
return cachedResponse;
}
} }
// For everything else, try to get it from the network.
try { try {
const response = await fetch(event.request); const response = await fetch(event.request);
// If the request is for a file from the build directory, cache it.
if (response.status === 200 && build.length > 0 && url.pathname.startsWith(`/${build[0]}/`)) { if (response.status === 200 && build.length > 0 && url.pathname.startsWith(`/${build[0]}/`)) {
cache.put(event.request, response.clone()); cache.put(event.request, response.clone());
} }
return response; return response;
} catch { } catch {
// If the network is unavailable, fall back to the cache. const cached = await cache.match(event.request);
const cachedResponse = await cache.match(event.request); if (cached) return cached;
if (cachedResponse) {
return cachedResponse;
}
} }
return new Response('Not found', { status: 404 }); return new Response('Not found', { status: 404 });
} };
event.respondWith(respond());
});
, (event) => {
// Create a new cache and add all files to it
async function addFilesToCache() {
const cache = await self.caches.open(CACHE);
await cache.addAll(ASSETS);
}
event.waitUntil(addFilesToCache());
// Tell the new service worker to activate immediately
self.skipWaiting();
});="@sveltejs/kit" />
import { build, files, version } from '$service-worker';
// Create a unique cache name for this deployment
const CACHE = `cache-${version}`;
const ASSETS = [
...build, // the app itself
...files // everything in `static`
];
self.addEventListener('install', (event) => {
// Create a new cache and add all files to it
async function addFilesToCache() {
const cache = await caches.open(CACHE);
await cache.addAll(ASSETS);
}
event.waitUntil(addFilesToCache());
});
self.addEventListener('activate', (event) => {
// Remove previous cached data from disk
async function deleteOldCaches() {
for (const key of await caches.keys()) {
if (key !== CACHE) await caches.delete(key);
}
}
event.waitUntil(deleteOldCaches());
});
self.addEventListener('fetch', (event) => {
if (event.request.method !== 'GET') return;
// --- START: MODIFICATION TO PREVENT CACHING PRIVATE ROUTES ---
const url = new URL(event.request.url);
// If the request is for a private route, always fetch from the network.
// This ensures that server-side authentication checks are not bypassed by the cache.
if (url.pathname.startsWith('/private')) {
event.respondWith(fetch(event.request));
return;
}
// --- END: MODIFICATION ---
async function respond() {
const url = new URL(event.request.url);
const cache = await self.caches.open(CACHE);
// `build`/`prerendered` pages are cached on install.
// If the page exists in the cache, serve it directly.
if (ASSETS.includes(url.pathname)) {
const cachedResponse = await cache.match(url.pathname);
if (cachedResponse) {
return cachedResponse;
}
}
// For everything else, try to get it from the network.
try {
const response = await fetch(event.request);
// If the request is for a file from the build directory, cache it.
if (response.status === 200 && url.pathname.startsWith(`/${build[0]}/`)) {
cache.put(event.request, response.clone());
}
return response;
} catch (error) {
// If the network is unavailable, fall back to the cache.
const cachedResponse = await cache.match(event.request);
if (cachedResponse) {
return cachedResponse;
}
}
return new Response('Not found', { status: 404 });
}
event.respondWith(respond()); event.respondWith(respond());
}); });