init_richi/schichtplanung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Implement Network-First SW strategy, no-cache headers in Nginx for index.html/sw.js, and auto 401 token cleanup to fix post-redeploy stale cache issues

Browse Source
This commit is contained in:
Richard
2026-07-31 11:23:49 +02:00
parent 2403f1313f
commit ac71b38823
7 changed files with 83 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dist/assets/index-DKRQSjit.js → frontend/dist/assets/index-DXooeo1R.js
Vendored
+9 -9
View File
File diff suppressed because one or more lines are too long
frontend/dist/index.html
Vendored
+4 -2
View File
@@ -12,7 +12,7 @@
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/arooshbd2024/aCAPTCHA@main/api/captcha-v1.1.js" defer></script> <script src="https://cdn.jsdelivr.net/gh/arooshbd2024/aCAPTCHA@main/api/captcha-v1.1.js" defer></script>
<title>Schichtplaner — Veranstaltungsschichtpläne</title> <title>Schichtplaner — Veranstaltungsschichtpläne</title>
<script type="module" crossorigin src="/assets/index-DKRQSjit.js"></script> <script type="module" crossorigin src="/assets/index-DXooeo1R.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-jfrwfPo3.css"> <link rel="stylesheet" crossorigin href="/assets/index-jfrwfPo3.css">
</head> </head>
<body class="bg-paper text-main font-sans antialiased min-h-screen"> <body class="bg-paper text-main font-sans antialiased min-h-screen">
@@ -20,7 +20,9 @@
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').catch(err => console.log('SW reg error:', err)); navigator.serviceWorker.register('/sw.js').then(reg => {
reg.update();
}).catch(err => console.log('SW reg error:', err));
}); });
} }
</script> </script>
frontend/dist/sw.js
Vendored
+19 -22
View File
@@ -1,16 +1,6 @@
const CACHE_NAME = 'schichtplaner-v1'; const CACHE_NAME = 'schichtplaner-v2';
const ASSETS_TO_CACHE = [
'/',
'/index.html',
'/manifest.json'
];
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(ASSETS_TO_CACHE);
})
);
self.skipWaiting(); self.skipWaiting();
}); });
@@ -18,28 +8,35 @@ self.addEventListener('activate', (event) => {
event.waitUntil( event.waitUntil(
caches.keys().then((keys) => { caches.keys().then((keys) => {
return Promise.all( return Promise.all(
keys.map((key) => { keys.map((key) => caches.delete(key))
if (key !== CACHE_NAME) {
return caches.delete(key);
}
})
); );
}) }).then(() => self.clients.claim())
); );
self.clients.claim();
}); });
// Network-First Strategy for fresh deployments
self.addEventListener('fetch', (event) => { self.addEventListener('fetch', (event) => {
if (event.request.method !== 'GET' || event.request.url.includes('/api/')) { if (event.request.method !== 'GET' || event.request.url.includes('/api/')) {
return; return;
} }
event.respondWith( event.respondWith(
caches.match(event.request).then((cachedResponse) => { fetch(event.request)
if (cachedResponse) { .then((networkResponse) => {
return cachedResponse; if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
const responseToCache = networkResponse.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(event.request, responseToCache);
});
} }
return fetch(event.request).catch(() => { return networkResponse;
})
.catch(() => {
return caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) return cachedResponse;
if (event.request.mode === 'navigate') {
return caches.match('/index.html'); return caches.match('/index.html');
}
}); });
}) })
); );
frontend/index.html
+3 -1
View File
@@ -19,7 +19,9 @@
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').catch(err => console.log('SW reg error:', err)); navigator.serviceWorker.register('/sw.js').then(reg => {
reg.update();
}).catch(err => console.log('SW reg error:', err));
}); });
} }
</script> </script>
frontend/nginx.conf
+18
View File
@@ -9,8 +9,22 @@ server {
gzip on; gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# Prevent caching of index.html and sw.js so redeploys fetch new assets immediately
location ~* (index\.html|sw\.js|manifest\.json)$ {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
}
# Cache immutable static assets with hash (js, css, images) for performance
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
expires 1y;
add_header Cache-Control "public, max-age=31536000, immutable";
}
location / { location / {
try_files $uri $uri/ /index.html; try_files $uri $uri/ /index.html;
add_header Cache-Control "no-cache, no-store, must-revalidate";
} }
location /api/ { location /api/ {
@@ -31,5 +45,9 @@ server {
location /static/ { location /static/ {
proxy_pass http://backend:8000/static/; proxy_pass http://backend:8000/static/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
} }
} }
frontend/public/sw.js
+19 -22
View File
@@ -1,16 +1,6 @@
const CACHE_NAME = 'schichtplaner-v1'; const CACHE_NAME = 'schichtplaner-v2';
const ASSETS_TO_CACHE = [
'/',
'/index.html',
'/manifest.json'
];
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(ASSETS_TO_CACHE);
})
);
self.skipWaiting(); self.skipWaiting();
}); });
@@ -18,28 +8,35 @@ self.addEventListener('activate', (event) => {
event.waitUntil( event.waitUntil(
caches.keys().then((keys) => { caches.keys().then((keys) => {
return Promise.all( return Promise.all(
keys.map((key) => { keys.map((key) => caches.delete(key))
if (key !== CACHE_NAME) {
return caches.delete(key);
}
})
); );
}) }).then(() => self.clients.claim())
); );
self.clients.claim();
}); });
// Network-First Strategy for fresh deployments
self.addEventListener('fetch', (event) => { self.addEventListener('fetch', (event) => {
if (event.request.method !== 'GET' || event.request.url.includes('/api/')) { if (event.request.method !== 'GET' || event.request.url.includes('/api/')) {
return; return;
} }
event.respondWith( event.respondWith(
caches.match(event.request).then((cachedResponse) => { fetch(event.request)
if (cachedResponse) { .then((networkResponse) => {
return cachedResponse; if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
const responseToCache = networkResponse.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(event.request, responseToCache);
});
} }
return fetch(event.request).catch(() => { return networkResponse;
})
.catch(() => {
return caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) return cachedResponse;
if (event.request.mode === 'navigate') {
return caches.match('/index.html'); return caches.match('/index.html');
}
}); });
}) })
); );
frontend/src/api/client.js
+3
View File
@@ -30,6 +30,9 @@ export const apiFetch = async (endpoint, options = {}) => {
} }
if (!response.ok) { if (!response.ok) {
if (response.status === 401) {
setAuthToken(null);
}
let errorMsg = 'Ein Fehler ist aufgetreten.'; let errorMsg = 'Ein Fehler ist aufgetreten.';
if (data) { if (data) {
if (typeof data.error === 'string') errorMsg = data.error; if (typeof data.error === 'string') errorMsg = data.error;