fix: Service Worker más agresivo y guía de limpieza definitiva
PROBLEMA: - Navegador sigue usando vendor-utils-ClLzZSLi.js (antiguo) - Caché muy persistente SOLUCIÓN: - Service Worker ahora fuerza recarga de páginas al actualizar - Guía de limpieza definitiva con 3 métodos - Script automático mejorado (incluye IndexedDB) - Instrucciones paso a paso más detalladas RESULTADO: ✅ Service Worker más agresivo en limpiar cachés ✅ Múltiples métodos de limpieza ✅ Verificación completa post-limpieza
This commit is contained in:
parent
b4781617e9
commit
64d0151cda
204
docs/LIMPIAR_CACHE_DEFINITIVO.md
Normal file
204
docs/LIMPIAR_CACHE_DEFINITIVO.md
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
# 🚨 LIMPIEZA DEFINITIVA DE CACHÉ - Error useLayoutEffect
|
||||
|
||||
## ❌ Problema Persistente
|
||||
|
||||
El navegador sigue usando `vendor-utils-ClLzZSLi.js` (hash antiguo) aunque el servidor tiene `1-vendor-utils-aDTNHcbX.js` (hash nuevo).
|
||||
|
||||
## ✅ Solución DEFINITIVA (3 métodos)
|
||||
|
||||
### Método 1: Script Automático (RECOMENDADO)
|
||||
|
||||
1. **Abrir:** `http://207.180.226.141:8607`
|
||||
2. **Abrir DevTools (F12) > Console**
|
||||
3. **Pegar y ejecutar:**
|
||||
|
||||
```javascript
|
||||
(async () => {
|
||||
console.log('🧹 LIMPIEZA DEFINITIVA DE CACHÉ...');
|
||||
|
||||
try {
|
||||
// 1. Desregistrar TODOS los Service Workers
|
||||
const registrations = await navigator.serviceWorker.getRegistrations();
|
||||
console.log(`📋 Encontrados ${registrations.length} Service Worker(s)`);
|
||||
|
||||
for (let registration of registrations) {
|
||||
const unregistered = await registration.unregister();
|
||||
console.log('✅ Service Worker desregistrado:', registration.scope);
|
||||
}
|
||||
|
||||
// 2. Eliminar TODOS los cachés
|
||||
const cacheNames = await caches.keys();
|
||||
console.log(`📋 Encontrados ${cacheNames.length} caché(s)`);
|
||||
|
||||
for (let name of cacheNames) {
|
||||
const deleted = await caches.delete(name);
|
||||
console.log('✅ Caché eliminado:', name, deleted ? '✓' : '✗');
|
||||
}
|
||||
|
||||
// 3. Limpiar TODOS los storages
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
console.log('✅ localStorage y sessionStorage limpiados');
|
||||
|
||||
// 4. Limpiar IndexedDB (si existe)
|
||||
if ('indexedDB' in window) {
|
||||
try {
|
||||
const databases = await indexedDB.databases();
|
||||
for (let db of databases) {
|
||||
indexedDB.deleteDatabase(db.name);
|
||||
console.log('✅ IndexedDB eliminado:', db.name);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('⚠️ No se pudo limpiar IndexedDB:', e);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('✅ LIMPIEZA COMPLETA');
|
||||
console.log('🔄 Recargando página en 2 segundos...');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = window.location.href.split('?')[0] + '?nocache=' + Date.now();
|
||||
}, 2000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Error durante la limpieza:', error);
|
||||
alert('Error durante la limpieza. Por favor, limpia manualmente.');
|
||||
}
|
||||
})();
|
||||
```
|
||||
|
||||
4. **Presionar Enter** y esperar
|
||||
|
||||
### Método 2: Limpieza Manual Completa
|
||||
|
||||
1. **DevTools (F12) > Application**
|
||||
|
||||
2. **Service Workers:**
|
||||
- Click en "Unregister" para cada uno
|
||||
- Marcar "Bypass for network" si está disponible
|
||||
|
||||
3. **Cache Storage:**
|
||||
- Click derecho en cada caché → "Delete"
|
||||
- O seleccionar todos → "Delete All"
|
||||
|
||||
4. **Storage:**
|
||||
- Click en "Clear site data"
|
||||
- Marcar TODAS las opciones:
|
||||
- ✅ Cookies and other site data
|
||||
- ✅ Cached images and files
|
||||
- ✅ Offline website data
|
||||
- Click en "Clear site data"
|
||||
|
||||
5. **Cerrar DevTools**
|
||||
|
||||
6. **Recargar con caché limpio:**
|
||||
- `Ctrl+Shift+Delete` → Seleccionar "Cached images and files" → "Clear data"
|
||||
- O `Ctrl+Shift+R` (Windows/Linux) / `Cmd+Shift+R` (Mac)
|
||||
|
||||
### Método 3: Modo Incógnito + Hard Reload
|
||||
|
||||
1. **Abrir ventana incógnita:**
|
||||
- `Ctrl+Shift+N` (Windows/Linux)
|
||||
- `Cmd+Shift+N` (Mac)
|
||||
|
||||
2. **Abrir DevTools (F12) > Network**
|
||||
|
||||
3. **Ir a:** `http://207.180.226.141:8607`
|
||||
|
||||
4. **Verificar en Network:**
|
||||
- Debe aparecer: `1-vendor-utils-aDTNHcbX.js` (nuevo)
|
||||
- NO debe aparecer: `vendor-utils-ClLzZSLi.js` (antiguo)
|
||||
|
||||
## 🔍 Verificación Post-Limpieza
|
||||
|
||||
### 1. Verificar Chunks en Network
|
||||
|
||||
**DevTools > Network > Recargar página:**
|
||||
|
||||
✅ **DEBE aparecer:**
|
||||
- `0-vendor-react-*.js` (nuevo, con prefijo 0-)
|
||||
- `1-vendor-utils-*.js` (nuevo, con prefijo 1-)
|
||||
- `2-vendor-markdown-*.js` (nuevo, con prefijo 2-)
|
||||
|
||||
❌ **NO debe aparecer:**
|
||||
- `vendor-utils-ClLzZSLi.js` (antiguo, sin prefijo)
|
||||
- `vendor-other-*.js` (nunca debe aparecer)
|
||||
|
||||
### 2. Verificar Console
|
||||
|
||||
**DevTools > Console:**
|
||||
|
||||
✅ **NO debe aparecer:**
|
||||
```
|
||||
TypeError: Cannot read properties of undefined (reading 'useLayoutEffect')
|
||||
```
|
||||
|
||||
✅ **Puede aparecer (no crítico):**
|
||||
- Errores de extensiones del navegador (Apollo DevTools, etc.)
|
||||
- Warnings de CORS de extensiones
|
||||
|
||||
### 3. Verificar Service Worker
|
||||
|
||||
**DevTools > Application > Service Workers:**
|
||||
|
||||
✅ **DEBE mostrar:**
|
||||
- Versión: `v1.0.4` o superior
|
||||
- Estado: "activated and is running"
|
||||
|
||||
❌ **NO debe mostrar:**
|
||||
- Versiones antiguas (`v1.0.2`, `v1.0.3` sin actualizar)
|
||||
|
||||
## ⚠️ Si el Problema Persiste
|
||||
|
||||
### Verificar Servidor
|
||||
|
||||
```bash
|
||||
ssh root@207.180.226.141
|
||||
cd /var/www/emerges-tes
|
||||
ls -la dist/assets/ | grep vendor
|
||||
```
|
||||
|
||||
**DEBE mostrar:**
|
||||
- `0-vendor-react-*.js`
|
||||
- `1-vendor-utils-*.js`
|
||||
- `2-vendor-markdown-*.js`
|
||||
|
||||
### Rebuild en Servidor
|
||||
|
||||
Si el servidor no tiene el build nuevo:
|
||||
|
||||
```bash
|
||||
cd /var/www/emerges-tes
|
||||
git pull origin main
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Verificar Service Worker en Servidor
|
||||
|
||||
```bash
|
||||
cat dist/sw.js | grep CACHE_VERSION
|
||||
```
|
||||
|
||||
**DEBE mostrar:**
|
||||
```
|
||||
const CACHE_VERSION = 'v1.0.4';
|
||||
```
|
||||
|
||||
## 📝 Notas Importantes
|
||||
|
||||
1. **El build nuevo está CORRECTO** en el servidor
|
||||
2. **El problema es CACHÉ DEL NAVEGADOR**
|
||||
3. **Los errores de extensiones** (Apollo DevTools, etc.) no son críticos
|
||||
4. **Después de limpiar el caché**, el error debería desaparecer completamente
|
||||
|
||||
## 🎯 Resultado Esperado
|
||||
|
||||
Después de limpiar el caché:
|
||||
|
||||
✅ Aplicación carga correctamente
|
||||
✅ `1-vendor-utils-*.js` se carga (nuevo)
|
||||
✅ NO aparece `vendor-utils-ClLzZSLi.js` (antiguo)
|
||||
✅ NO hay errores `useLayoutEffect`
|
||||
✅ Service Worker en versión `v1.0.4`
|
||||
|
||||
Loading…
Reference in a new issue