Solución: Service Worker en Desarrollo

Problema

El Service Worker estaba interceptando peticiones de Vite en desarrollo, causando:

Errores de fetch para main.tsx y otros módulos
Fallos en WebSocket de HMR (Hot Module Replacement)
Conflictos entre cache del SW y servidor de desarrollo

Solución Implementada

1. Service Worker no se registra en desarrollo

Archivos modificados:

src/main.tsx - Detecta desarrollo y no registra SW
src/hooks/useServiceWorker.ts - Detecta desarrollo y no registra SW

Lógica:

const isDevelopment = import.meta.env.DEV || 
  window.location.hostname === 'localhost' || 
  window.location.hostname === '127.0.0.1';

2. Service Worker ignora peticiones de Vite

Archivo modificado:

public/sw.js - Ignora peticiones de Vite en localhost

Peticiones ignoradas:

/src/* - Módulos fuente
/@* - Vite HMR
*.tsx, *.ts - Archivos TypeScript
WebSocket (ws:, wss:)
Peticiones con timestamps de Vite

Limpiar Service Worker Existente

Si ya tienes un SW registrado, necesitas desregistrarlo:

Opción 1: Desde DevTools

Abre DevTools (F12)
Ve a Application → Service Workers
Click en Unregister para cada SW registrado
Recarga la página

Opción 2: Desde Consola

// Ejecutar en consola del navegador
navigator.serviceWorker.getRegistrations().then(registrations => {
  registrations.forEach(registration => {
    registration.unregister();
    console.log('SW unregistered');
  });
});

Opción 3: Limpiar Cache

DevTools → Application → Clear storage
Marcar "Cache storage" y "Service Workers"
Click en "Clear site data"

Verificación

Después de limpiar el SW:

Recarga la página (Ctrl+Shift+R o Cmd+Shift+R)
Verifica en DevTools:
- Application → Service Workers → No debe haber SW activo
- Console → No debe haber errores de SW
Verifica HMR:
- Hacer un cambio en un archivo
- Debe recargar automáticamente sin errores

Comportamiento

En Desarrollo (localhost)

✅ SW NO se registra
✅ Vite maneja todas las peticiones directamente
✅ HMR funciona correctamente
✅ Sin conflictos de cache

En Producción

✅ SW SÍ se registra
✅ Funcionalidad PWA completa
✅ Cache para funcionamiento offline
✅ Actualizaciones automáticas

Notas

El SW seguirá funcionando en producción
Los cambios son compatibles con el código existente
No se requiere configuración adicional
El SW se desregistra automáticamente en desarrollo

Estado: ✅ Solucionado - SW no interfiere en desarrollo

2.6 KiB Raw Blame History