aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-17 06:34:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: enable Service Worker registration in development mode

Browse Source 
Service Worker was only registered in production, but vite-plugin-pwa
has devOptions.enabled=true, so SW should work in dev too. Now we:
1. Register SW in both dev and prod modes
2. Use correct SW path for dev (/dev-sw.js?dev-sw) vs prod (/sw.js)
3. Add comprehensive debug logs for registration and activation
4. Log Service Worker state changes for debugging

Service Workers don't require PWA installation - they work in regular
browsers. This enables image caching in development mode.
This commit is contained in:
Gigi
2025-10-31 00:55:34 +01:00
parent 0b7891419b
commit 60c4ef55c0
1 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/main.tsx
View File

@@ -5,22 +5,52 @@ import './styles/tailwind.css'
import './index.css'
import 'react-loading-skeleton/dist/skeleton.css'
// Register Service Worker for PWA functionality (production only)
if ('serviceWorker' in navigator && import.meta.env.PROD) {
// Register Service Worker for PWA functionality
// Enable in both dev and prod (devOptions.enabled is true in vite.config)
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swPath = import.meta.env.PROD ? '/sw.js' : '/dev-sw.js?dev-sw'
console.log('[sw-registration] Registering Service Worker:', swPath, {
isProd: import.meta.env.PROD,
isDev: import.meta.env.DEV
})
navigator.serviceWorker
.register('/sw.js')
.register(swPath)
.then(registration => {
// Check for updates periodically
console.log('[sw-registration] ✅ Service Worker registered:', {
scope: registration.scope,
active: !!registration.active,
installing: !!registration.installing,
waiting: !!registration.waiting
})
// Wait for Service Worker to activate
if (registration.active) {
console.log('[sw-registration] Service Worker is already active')
} else if (registration.installing) {
registration.installing.addEventListener('statechange', () => {
console.log('[sw-registration] Service Worker state:', registration.installing?.state)
if (registration.installing?.state === 'activated') {
console.log('[sw-registration] ✅ Service Worker activated and ready')
}
})
}
// Check for updates periodically (production only)
if (import.meta.env.PROD) {
setInterval(() => {
registration.update()
}, 60 * 60 * 1000) // Check every hour
}
// Handle service worker updates
registration.addEventListener('updatefound', () => {
console.log('[sw-registration] Service Worker update found')
const newWorker = registration.installing
if (newWorker) {
newWorker.addEventListener('statechange', () => {
console.log('[sw-registration] New Service Worker state:', newWorker.state)
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
// New service worker available
const updateAvailable = new CustomEvent('sw-update-available')
@@ -31,9 +61,11 @@ if ('serviceWorker' in navigator && import.meta.env.PROD) {
})
})
.catch(error => {
console.error('❌ Service Worker registration failed:', error)
console.error('[sw-registration] ❌ Service Worker registration failed:', error)
})
})
} else {
console.warn('[sw-registration] ⚠️ Service Workers not supported in this browser')
}
ReactDOM.createRoot(document.getElementById('root')!).render(