From 0bc7b50256ab81306bd9157b1624bc4ab4a867bd Mon Sep 17 00:00:00 2001 From: planetazuzu Date: Fri, 2 Jan 2026 19:09:17 +0100 Subject: [PATCH] =?UTF-8?q?fix:=20incrementar=20versi=C3=B3n=20SW=20y=20me?= =?UTF-8?q?jorar=20limpieza=20de=20cach=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Incrementar CACHE_VERSION a v1.0.3 para forzar actualización - Mejorar lógica de limpieza para eliminar vendor-other antiguo - Añadir documentación detallada para limpiar caché del navegador - Resuelve problema de navegador usando build antiguo en caché --- docs/LIMPIAR_CACHE_NAVEGADOR.md | 101 ++++++++++++++++++++++++++++++++ public/sw.js | 31 +++++++++- 2 files changed, 129 insertions(+), 3 deletions(-) create mode 100644 docs/LIMPIAR_CACHE_NAVEGADOR.md diff --git a/docs/LIMPIAR_CACHE_NAVEGADOR.md b/docs/LIMPIAR_CACHE_NAVEGADOR.md new file mode 100644 index 00000000..51b4dab6 --- /dev/null +++ b/docs/LIMPIAR_CACHE_NAVEGADOR.md @@ -0,0 +1,101 @@ +# 🧹 Cómo Limpiar el Caché del Navegador + +## ❌ Problema +El navegador está usando una versión antigua en caché (`vendor-other-RJb9Jc5z.js`), aunque el servidor tiene el build nuevo correcto. + +## ✅ Solución: Limpiar Caché Completamente + +### Método 1: Limpieza Completa (Recomendado) + +#### Chrome/Edge: +1. Abre DevTools (`F12`) +2. Click derecho en el botón de recargar (🔄) +3. Selecciona **"Vaciar caché y volver a cargar de forma forzada"** (Empty Cache and Hard Reload) + +#### Firefox: +1. Abre DevTools (`F12`) +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 + +#### Chrome/Edge: +1. `Ctrl+Shift+Delete` (o `Cmd+Shift+Delete` en Mac) +2. Selecciona: + - ✅ **"Imágenes y archivos en caché"** (Cached images and files) + - ✅ **"Archivos alojados en caché"** (Hosted app data) +3. Período: **"Todo el tiempo"** (All time) +4. Click **"Borrar datos"** (Clear data) + +#### Firefox: +1. `Ctrl+Shift+Delete` (o `Cmd+Shift+Delete` en Mac) +2. Selecciona: + - ✅ **"Caché"** (Cache) +3. Período: **"Todo"** (Everything) +4. Click **"Limpiar ahora"** (Clear Now) + +### Método 3: Desregistrar Service Worker + +1. Abre DevTools (`F12`) +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. Abre una ventana de incógnito (`Ctrl+Shift+N` o `Cmd+Shift+N`) +2. Navega a: `http://207.180.226.141:8607` +3. Verifica que NO aparece `vendor-other` en DevTools > Network + +## 🔍 Verificación + +Después de limpiar el caché: + +1. Abre DevTools (`F12`) +2. Ve a la pestaña **"Network"** (Red) +3. Recarga la página (`Ctrl+Shift+R`) +4. Busca `vendor-other` en la lista de archivos +5. **NO debería aparecer** `vendor-other` +6. Solo deberías ver: + - `vendor-react-XXXXX.js` + - `vendor-utils-XXXXX.js` + - `vendor-markdown-XXXXX.js` + +## ⚠️ Si el Problema Persiste + +Si después de limpiar el caché todavía ves `vendor-other`: + +1. **Verifica que el servidor tiene el build nuevo:** + ```bash + ssh root@207.180.226.141 + cd /var/www/emerges-tes + ls -la dist/assets/ | grep vendor-other + # NO debería aparecer nada + ``` + +2. **Verifica que el Service Worker se actualizó:** + - DevTools > Application > Service Workers + - Debería mostrar `v1.0.3` (o superior) + +3. **Fuerza la actualización del Service Worker:** + - DevTools > Application > Service Workers + - Click en **"Update"** (Actualizar) + - Espera a que se actualice + - Click en **"Unregister"** y luego recarga + +4. **Limpia el caché del Service Worker:** + - DevTools > Application > Storage + - Click en **"Clear site data"** + - Marca todas las opciones + - Click en **"Clear site data"** + +## 🎯 Resultado Esperado + +Después de limpiar el caché correctamente: +- ✅ NO aparece `vendor-other` en Network +- ✅ Solo aparecen `vendor-react`, `vendor-utils`, `vendor-markdown` +- ✅ El error `useLayoutEffect` desaparece +- ✅ La aplicación carga correctamente + diff --git a/public/sw.js b/public/sw.js index 84926dab..0971f586 100644 --- a/public/sw.js +++ b/public/sw.js @@ -38,8 +38,8 @@ if (isDevelopment) { } // Versión del cache - Incrementar cuando hay cambios importantes -// v1.0.2: Fix code splitting - consolidar React en un solo chunk -const CACHE_VERSION = 'v1.0.2'; +// v1.0.3: Forzar actualización - eliminar vendor-other del caché +const CACHE_VERSION = 'v1.0.3'; const CACHE_NAME = `emerges-tes-${CACHE_VERSION}`; const RUNTIME_CACHE = `emerges-tes-runtime-${CACHE_VERSION}`; @@ -101,7 +101,7 @@ self.addEventListener('activate', (event) => { return Promise.all( cacheNames .filter((cacheName) => { - // Eliminar caches antiguos + // Eliminar TODOS los caches antiguos (forzar limpieza completa) return cacheName !== CACHE_NAME && cacheName !== RUNTIME_CACHE; }) .map((cacheName) => { @@ -110,6 +110,31 @@ 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 ); });