fix(sw): disable Service Worker in dev and register non-module SW only in production to avoid stale cached HTML causing mismatched content

This commit is contained in:
Gigi
2025-10-22 14:01:53 +02:00
parent d067193f21
commit 5a0dd49e4e

View File

@@ -5,38 +5,45 @@ import './styles/tailwind.css'
import './index.css'
import 'react-loading-skeleton/dist/skeleton.css'
// Register Service Worker for PWA functionality
// Service Worker behavior
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/sw.js', { type: 'module' })
.then(registration => {
// Check for updates periodically
setInterval(() => {
registration.update()
}, 60 * 60 * 1000) // Check every hour
// Handle service worker updates
registration.addEventListener('updatefound', () => {
const newWorker = registration.installing
if (newWorker) {
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
// New service worker available
// Optionally show a toast notification
const updateAvailable = new CustomEvent('sw-update-available')
window.dispatchEvent(updateAvailable)
}
})
}
// In dev, make sure no stale SW controls the page
if (import.meta.env.DEV) {
navigator.serviceWorker.getRegistrations().then(regs => {
regs.forEach(reg => reg.unregister())
})
}
// Register SW only in production builds
if (import.meta.env.PROD) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/sw.js') // classic SW; built asset is not a module
.then(registration => {
// Check for updates periodically
setInterval(() => {
registration.update()
}, 60 * 60 * 1000) // Check every hour
// Handle service worker updates
registration.addEventListener('updatefound', () => {
const newWorker = registration.installing
if (newWorker) {
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
// New service worker available
const updateAvailable = new CustomEvent('sw-update-available')
window.dispatchEvent(updateAvailable)
}
})
}
})
})
})
.catch(error => {
console.error('❌ Service Worker registration failed:', error)
})
})
.catch(error => {
console.error('❌ Service Worker registration failed:', error)
})
})
}
}
ReactDOM.createRoot(document.getElementById('root')!).render(