fix: SW-Version dynamisch per Build-Time, sofort Reload bei neuem Deploy
This commit is contained in:
@@ -8,6 +8,8 @@ COPY frontend/ ./
|
|||||||
# Dieser Wert wird von vite.config.js als __BUILD_TIME__ ins Bundle gebacken
|
# Dieser Wert wird von vite.config.js als __BUILD_TIME__ ins Bundle gebacken
|
||||||
# UND vom Backend als /api/build-time ausgeliefert → exakt derselbe Wert
|
# UND vom Backend als /api/build-time ausgeliefert → exakt derselbe Wert
|
||||||
RUN date -u +"%s" > ./version.txt
|
RUN date -u +"%s" > ./version.txt
|
||||||
|
# Build-Version in sw.js einsetzen damit der Browser bei jedem Deploy einen neuen SW erkennt
|
||||||
|
RUN BUILD_V=$(cat ./version.txt) && sed -i "s/__BUILD_VERSION__/${BUILD_V}/g" ./public/sw.js
|
||||||
RUN npm run build
|
RUN npm run build
|
||||||
|
|
||||||
# ── Stage 2: Express liefert API + React in einem Container ──────────────────
|
# ── Stage 2: Express liefert API + React in einem Container ──────────────────
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
// Service Worker v4 – garantiert frische index.html, Auto-Reload bei neuem Build
|
// Service Worker – Version wird zur Build-Zeit injiziert via Dockerfile
|
||||||
const VERSION = 'v5';
|
// Dadurch erkennt der Browser bei jedem Deploy einen neuen SW → Cache-Purge
|
||||||
|
const VERSION = '__BUILD_VERSION__'; // wird im Dockerfile ersetzt
|
||||||
const CACHE_NAME = 'dickendock-' + VERSION;
|
const CACHE_NAME = 'dickendock-' + VERSION;
|
||||||
|
|
||||||
self.addEventListener('install', () => {
|
self.addEventListener('install', () => {
|
||||||
@@ -8,9 +9,9 @@ self.addEventListener('install', () => {
|
|||||||
|
|
||||||
self.addEventListener('activate', e => {
|
self.addEventListener('activate', e => {
|
||||||
e.waitUntil((async () => {
|
e.waitUntil((async () => {
|
||||||
// alte Caches löschen
|
// alle alten Caches löschen
|
||||||
const keys = await caches.keys();
|
const keys = await caches.keys();
|
||||||
await Promise.all(keys.map(k => caches.delete(k)));
|
await Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)));
|
||||||
await self.clients.claim();
|
await self.clients.claim();
|
||||||
// allen offenen Clients sagen: neue Version aktiv → reload
|
// allen offenen Clients sagen: neue Version aktiv → reload
|
||||||
const clients = await self.clients.matchAll({ type: 'window' });
|
const clients = await self.clients.matchAll({ type: 'window' });
|
||||||
@@ -21,8 +22,7 @@ self.addEventListener('activate', e => {
|
|||||||
self.addEventListener('fetch', e => {
|
self.addEventListener('fetch', e => {
|
||||||
const url = new URL(e.request.url);
|
const url = new URL(e.request.url);
|
||||||
|
|
||||||
// Cross-Origin-Requests (externe Bilder, Fonts usw.) NICHT abfangen
|
// Cross-Origin-Requests nicht abfangen
|
||||||
// → Browser verarbeitet sie normal, kein CORS-Problem in der PWA
|
|
||||||
if (url.origin !== self.location.origin) return;
|
if (url.origin !== self.location.origin) return;
|
||||||
|
|
||||||
// API immer direkt ans Netz
|
// API immer direkt ans Netz
|
||||||
@@ -31,6 +31,12 @@ self.addEventListener('fetch', e => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// sw.js selbst nie cachen
|
||||||
|
if (url.pathname === '/sw.js') {
|
||||||
|
e.respondWith(fetch(e.request, { cache: 'no-store' }));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// HTML-Navigation: IMMER frisch vom Netzwerk
|
// HTML-Navigation: IMMER frisch vom Netzwerk
|
||||||
if (e.request.mode === 'navigate') {
|
if (e.request.mode === 'navigate') {
|
||||||
e.respondWith(
|
e.respondWith(
|
||||||
|
|||||||
@@ -56,13 +56,18 @@ window.__safeReloadIfNewBuild = function () {
|
|||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Beim Start prüfen (kein sofortiger Reload – Seite lädt gerade erst)
|
// Beim Start prüfen – nach 3s sofort reloaden wenn neue Version (App hat Zeit zu rendern)
|
||||||
checkBuild();
|
checkBuild().then(() => {
|
||||||
|
if (window.__newBuildAvailable && !isUserTyping() && !hasUnsavedInput()) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!isUserTyping() && !hasUnsavedInput()) window.location.reload();
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
});
|
||||||
// Im Hintergrund alle 60s
|
// Im Hintergrund alle 60s
|
||||||
setInterval(() => checkBuild(), 60_000);
|
setInterval(() => checkBuild(), 60_000);
|
||||||
|
|
||||||
// App kommt in den Vordergrund → prüfen und bei Bedarf sofort laden
|
// App kommt in den Vordergrund → prüfen und bei Bedarf sofort laden
|
||||||
// (PWA vom Homescreen öffnen / aus dem Hintergrund holen)
|
|
||||||
document.addEventListener('visibilitychange', () => {
|
document.addEventListener('visibilitychange', () => {
|
||||||
if (document.visibilityState === 'visible') {
|
if (document.visibilityState === 'visible') {
|
||||||
checkBuild({ reloadNow: true });
|
checkBuild({ reloadNow: true });
|
||||||
@@ -72,7 +77,11 @@ document.addEventListener('visibilitychange', () => {
|
|||||||
// ── Service Worker ────────────────────────────────────────────────────────────
|
// ── Service Worker ────────────────────────────────────────────────────────────
|
||||||
if ('serviceWorker' in navigator) {
|
if ('serviceWorker' in navigator) {
|
||||||
navigator.serviceWorker.addEventListener('message', (e) => {
|
navigator.serviceWorker.addEventListener('message', (e) => {
|
||||||
if (e.data?.type === 'SW_ACTIVATED') window.__newBuildAvailable = true;
|
// SW hat neue Version aktiviert → sofort reloaden
|
||||||
|
if (e.data?.type === 'SW_ACTIVATED') {
|
||||||
|
window.__newBuildAvailable = true;
|
||||||
|
if (!isUserTyping() && !hasUnsavedInput()) window.location.reload();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
navigator.serviceWorker.register('/sw.js').then(reg => {
|
navigator.serviceWorker.register('/sw.js').then(reg => {
|
||||||
|
|||||||
Reference in New Issue
Block a user