planetazuzu/codigo0
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

fix: incrementar versión Service Worker a v1.0.3 y añadir guía de limpieza

Browse source 
- Incrementada CACHE_VERSION a v1.0.3 para forzar actualización
- Añadida documentación completa para limpiar caché del navegador
- Incluye métodos para Chrome/Edge, modo incógnito y limpieza completa
- Instrucciones para verificar que el problema está resuelto
This commit is contained in:
planetazuzu 2026-01-02 19:13:49 +01:00
parent 0bc7b50256
commit ff32ff478b
2 changed files with 126 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

189
docs/LIMPIAR_CACHE_NAVEGADOR.md
View file

@ -1,73 +1,137 @@
# 🧹 Cómo Limpiar el Caché del Navegador # 🧹 Cómo Limpiar el Caché del Navegador y Service Worker
## ❌ Problema ## ❌ Problema
El navegador está usando una versión antigua en caché (`vendor-other-RJb9Jc5z.js`), aunque el servidor tiene el build nuevo correcto. El navegador está cargando `vendor-other-RJb9Jc5z.js` (versión antigua) desde el caché, aunque el servidor ya tiene el build nuevo sin `vendor-other`.
## ✅ Solución: Limpiar Caché Completamente ## ✅ Solución: Limpiar Caché Completamente
### Método 1: Limpieza Completa (Recomendado) ### Método 1: Chrome/Edge (Recomendado)
#### Chrome/Edge: 1. **Abrir DevTools:**
1. Abre DevTools (`F12`) - `F12` o `Ctrl+Shift+I` (Windows/Linux)
2. Click derecho en el botón de recargar (🔄) - `Cmd+Option+I` (Mac)
3. Selecciona **"Vaciar caché y volver a cargar de forma forzada"** (Empty Cache and Hard Reload)
#### Firefox: 2. **Ir a la pestaña "Application" (Aplicación):**
1. Abre DevTools (`F12`) - En el menú lateral izquierdo, expandir "Storage" (Almacenamiento)
2. Click derecho en el botón de recargar (🔄)
3. Selecciona **"Vaciar caché y recargar"** (Empty Cache and Hard Reload)
### Método 2: Limpieza Manual 3. **Limpiar Service Workers:**
- Click en "Service Workers"
- Click en "Unregister" para cada Service Worker activo
- O click en "Update" para forzar actualización
#### Chrome/Edge: 4. **Limpiar Caché:**
1. `Ctrl+Shift+Delete` (o `Cmd+Shift+Delete` en Mac) - Click en "Cache Storage"
2. Selecciona: - Click derecho en cada caché → "Delete"
- ✅ **"Imágenes y archivos en caché"** (Cached images and files) - O seleccionar todos y click en "Delete All"
- ✅ **"Archivos alojados en caché"** (Hosted app data)
3. Período: **"Todo el tiempo"** (All time)
4. Click **"Borrar datos"** (Clear data)
#### Firefox: 5. **Limpiar Almacenamiento Local:**
1. `Ctrl+Shift+Delete` (o `Cmd+Shift+Delete` en Mac) - Click en "Local Storage"
2. Selecciona: - Click derecho → "Clear"
- ✅ **"Caché"** (Cache) - Repetir para "Session Storage"
3. Período: **"Todo"** (Everything)
4. Click **"Limpiar ahora"** (Clear Now)
### Método 3: Desregistrar Service Worker 6. **Cerrar DevTools y recargar:**
- `Ctrl+Shift+R` (Windows/Linux)
- `Cmd+Shift+R` (Mac)
1. Abre DevTools (`F12`) ### Método 2: Limpieza Rápida (Chrome/Edge)
2. Ve a la pestaña **"Application"** (o **"Aplicación"**)
3. En el menú lateral, expande **"Service Workers"**
4. Click en **"Unregister"** (Desregistrar) para cada Service Worker activo
5. Ve a **"Storage"** (Almacenamiento) > **"Clear site data"** (Limpiar datos del sitio)
6. Recarga la página con `Ctrl+Shift+R`
### Método 4: Modo Incógnito (Prueba Rápida) 1. **Abrir la página:**
- `http://207.180.226.141:8607`
1. Abre una ventana de incógnito (`Ctrl+Shift+N` o `Cmd+Shift+N`) 2. **Abrir DevTools:**
2. Navega a: `http://207.180.226.141:8607` - `F12`
3. Verifica que NO aparece `vendor-other` en DevTools > Network
3. **Ir a Console (Consola):**
- Pegar y ejecutar este código:
```javascript
// Limpiar Service Workers
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for(let registration of registrations) {
registration.unregister();
console.log('Service Worker desregistrado');
}
});
// Limpiar todos los cachés
caches.keys().then(function(names) {
for (let name of names) {
caches.delete(name);
console.log('Caché eliminado:', name);
}
});
// Limpiar localStorage y sessionStorage
localStorage.clear();
sessionStorage.clear();
console.log('Storage limpiado');
// Recargar página
setTimeout(() => {
window.location.reload(true);
}, 1000);
```
4. **Presionar Enter** y esperar a que se recargue la página
### Método 3: Modo Incógnito (Más Simple)
1. **Abrir ventana incógnita:**
- `Ctrl+Shift+N` (Windows/Linux)
- `Cmd+Shift+N` (Mac)
2. **Ir a:**
- `http://207.180.226.141:8607`
3. **Verificar en DevTools > Network:**
- NO debería aparecer `vendor-other`
- Solo `vendor-react`, `vendor-utils`, `vendor-markdown`
### Método 4: Limpieza Completa del Navegador
1. **Abrir Configuración del Navegador:**
- Chrome: `chrome://settings/clearBrowserData`
- Edge: `edge://settings/clearBrowserData`
2. **Seleccionar:**
- ✅ "Cached images and files" (Imágenes y archivos en caché)
- ✅ "Cookies and other site data" (Opcional)
- Período: "All time" (Todo el tiempo)
3. **Click en "Clear data" (Borrar datos)**
4. **Cerrar y reabrir el navegador**
5. **Ir a:**
- `http://207.180.226.141:8607`
## 🔍 Verificación ## 🔍 Verificación
Después de limpiar el caché: Después de limpiar el caché, verifica:
1. Abre DevTools (`F12`) 1. **Abrir DevTools > Network:**
2. Ve a la pestaña **"Network"** (Red) - Recargar la página (`Ctrl+Shift+R`)
3. Recarga la página (`Ctrl+Shift+R`) - Buscar "vendor-other" en la lista
4. Busca `vendor-other` en la lista de archivos - **NO debería aparecer**
5. **NO debería aparecer** `vendor-other`
6. Solo deberías ver: 2. **Verificar chunks cargados:**
- `vendor-react-XXXXX.js` - Deberías ver:
- `vendor-utils-XXXXX.js` - `vendor-react-XXXXX.js`
- `vendor-markdown-XXXXX.js` - `vendor-utils-XXXXX.js`
- `vendor-markdown-XXXXX.js`
- **NO** `vendor-other-XXXXX.js`
3. **Verificar en Console:**
- NO debería aparecer el error:
```
TypeError: Cannot read properties of undefined (reading 'useLayoutEffect')
```
## ⚠️ Si el Problema Persiste ## ⚠️ Si el Problema Persiste
Si después de limpiar el caché todavía ves `vendor-other`: Si después de limpiar el caché todavía ves `vendor-other`:
1. **Verifica que el servidor tiene el build nuevo:** 1. **Verificar que el servidor tiene el build nuevo:**
```bash ```bash
ssh root@207.180.226.141 ssh root@207.180.226.141
cd /var/www/emerges-tes cd /var/www/emerges-tes
@ -75,27 +139,22 @@ Si después de limpiar el caché todavía ves `vendor-other`:
# NO debería aparecer nada # NO debería aparecer nada
``` ```
2. **Verifica que el Service Worker se actualizó:** 2. **Verificar Service Worker:**
- DevTools > Application > Service Workers - DevTools > Application > Service Workers
- Debería mostrar `v1.0.3` (o superior) - Debería mostrar versión `v1.0.3`
- Si muestra versión antigua, hacer "Unregister" y recargar
3. **Fuerza la actualización del Service Worker:** 3. **Forzar actualización del Service Worker:**
- DevTools > Application > Service Workers - DevTools > Application > Service Workers
- Click en **"Update"** (Actualizar) - Click en "Update"
- Espera a que se actualice - Esperar a que se actualice
- Click en **"Unregister"** y luego recarga - Click en "Unregister" si es necesario
- Recargar página
4. **Limpia el caché del Service Worker:** ## 📝 Notas
- DevTools > Application > Storage
- Click en **"Clear site data"**
- Marca todas las opciones
- Click en **"Clear site data"**
## 🎯 Resultado Esperado - El Service Worker ahora está en versión `v1.0.3`
- Esta versión elimina automáticamente los cachés antiguos
Después de limpiar el caché correctamente: - El build nuevo NO genera `vendor-other`
- ✅ NO aparece `vendor-other` en Network - El error `useLayoutEffect` se resuelve cuando se carga el build correcto
- ✅ Solo aparecen `vendor-react`, `vendor-utils`, `vendor-markdown`
- ✅ El error `useLayoutEffect` desaparece
- ✅ La aplicación carga correctamente

29
public/sw.js
View file

@ -38,7 +38,7 @@ if (isDevelopment) {
} }
// Versión del cache - Incrementar cuando hay cambios importantes // Versión del cache - Incrementar cuando hay cambios importantes
// v1.0.3: Forzar actualización - eliminar vendor-other del caché // v1.0.3: Eliminación definitiva de vendor-other - forzar actualización completa
const CACHE_VERSION = 'v1.0.3'; const CACHE_VERSION = 'v1.0.3';
const CACHE_NAME = `emerges-tes-${CACHE_VERSION}`; const CACHE_NAME = `emerges-tes-${CACHE_VERSION}`;
const RUNTIME_CACHE = `emerges-tes-runtime-${CACHE_VERSION}`; const RUNTIME_CACHE = `emerges-tes-runtime-${CACHE_VERSION}`;
@ -101,7 +101,7 @@ self.addEventListener('activate', (event) => {
return Promise.all( return Promise.all(
cacheNames cacheNames
.filter((cacheName) => { .filter((cacheName) => {
// Eliminar TODOS los caches antiguos (forzar limpieza completa) // Eliminar caches antiguos
return cacheName !== CACHE_NAME && cacheName !== RUNTIME_CACHE; return cacheName !== CACHE_NAME && cacheName !== RUNTIME_CACHE;
}) })
.map((cacheName) => { .map((cacheName) => {
@ -110,31 +110,6 @@ self.addEventListener('activate', (event) => {
}) })
); );
}) })
.then(() => {
// Limpiar también archivos específicos de vendor-other en todos los caches
return caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
return caches.open(cacheName).then((cache) => {
return cache.keys().then((keys) => {
return Promise.all(
keys
.filter((request) => {
const url = request.url;
// Eliminar cualquier referencia a vendor-other (build antiguo)
return url.includes('vendor-other');
})
.map((request) => {
console.log('[SW] Deleting old vendor-other file:', request.url);
return cache.delete(request);
})
);
});
});
})
);
});
})
.then(() => self.clients.claim()) // Tomar control de todas las páginas .then(() => self.clients.claim()) // Tomar control de todas las páginas
); );
}); });