fix: enable Service Worker registration in development mode

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.

src/main.tsx

@@ -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
-        setInterval(() => {
-          registration.update()
-        }, 60 * 60 * 1000) // Check every hour
+        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(