fix(pwa): retirar service worker cache-first (servía código obsoleto y rompía POSTs)

El sw.js experimental (mayo) tenía tres problemas graves:
1. Estrategia cache-first para TODO: una vez cacheada una página o asset, el
   navegador servía la versión vieja indefinidamente, incluso tras deploys
   ("los cambios no se ven"). También cacheaba HTML con tokens CSRF caducados.
2. cache.put() sobre peticiones POST (no soportado, TypeError) → interceptaba
   y podía romper peticiones Livewire de forma intermitente.
3. Su precache incluía /css/app.css y /js/app.js, inexistentes con Vite →
   "Failed to execute 'addAll' on 'Cache': Request failed" en cada instalación.

Se sustituye por un SW de auto-limpieza (kill switch): al actualizarse en el
navegador borra todos los caches, se desregistra y recarga las pestañas.
Los layouts siguen registrándolo para que los clientes con la PWA vieja se
limpien solos; más adelante podrá retirarse el registro por completo.

Suite 94 passing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-07 21:42:27 +02:00
co-authored by Claude Fable 5
parent 29ee49984e
commit f3367ee1ea
3 changed files with 34 additions and 187 deletions
+27 -176
View File
@@ -1,182 +1,33 @@
const CACHE_NAME = 'avante-cache-v2';
const DATA_CACHE_NAME = 'avante-data-cache-v1';
// ============================================================================
// Service Worker de AUTO-LIMPIEZA (kill switch)
// ----------------------------------------------------------------------------
// El SW anterior (PWA experimental) usaba estrategia cache-first para todo:
// - servía HTML/JS obsoletos tras cada deploy ("los cambios no se ven"),
// - intentaba cache.put() sobre POSTs (TypeError) rompiendo peticiones Livewire,
// - su precache incluía /css/app.css y /js/app.js, que no existen con Vite,
// haciendo fallar la instalación (Failed to execute 'addAll' on 'Cache').
//
// Este SW sustituye al anterior en cuanto el navegador lo actualiza:
// borra TODOS los caches, se desregistra y recarga las pestañas abiertas.
// Mantener este fichero publicado un tiempo para que todos los clientes
// que tengan la PWA vieja instalada se limpien solos.
// ============================================================================
// Files to cache for offline functionality
const FILES_TO_CACHE = [
'/',
'/dashboard',
'/reports/dashboard',
'/client',
'/client/projects',
'/manifest.json',
'/css/app.css',
'/js/app.js',
'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css',
'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js',
'https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css',
'https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js',
'https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap',
'/icons/icon-72x72.png',
'/icons/icon-96x96.png',
'/icons/icon-128x128.png',
'/icons/icon-144x144.png',
'/icons/icon-152x152.png',
'/icons/icon-192x192.png',
'/icons/icon-384x384.png',
'/icons/icon-512x512.png'
];
// Install the service worker and cache the app shell
self.addEventListener('install', (event) => {
console.log('[ServiceWorker] Install');
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(FILES_TO_CACHE);
})
);
self.addEventListener('install', () => {
self.skipWaiting();
});
// Activate the service worker and clean up old caches
self.addEventListener('activate', (event) => {
console.log('[ServiceWorker] Activate');
event.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(
keyList.map((key) => {
if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
})
);
})
);
self.clients.claim();
event.waitUntil((async () => {
// 1) Borrar todos los caches que dejó la versión anterior
const keys = await caches.keys();
await Promise.all(keys.map((key) => caches.delete(key)));
// 2) Desregistrarse
await self.registration.unregister();
// 3) Recargar las pestañas controladas para que salgan del SW
const clients = await self.clients.matchAll({ type: 'window' });
clients.forEach((client) => client.navigate(client.url));
})());
});
// Fetch strategy: Network first, falling back to cache
self.addEventListener('fetch', (event) => {
// Handle API requests differently - cache first, then network
if (event.request.url.includes('/api/') || event.request.url.includes('/offline/')) {
event.respondWith(
caches.open(DATA_CACHE_NAME)
.then((cache) => {
return fetch(event.request)
.then((response) => {
// Clone the response to put in cache and return original
if (response.status === 200) {
cache.put(event.request.url, response.clone());
}
return response;
})
.catch(() => {
// If network fails, try to get from cache
return caches.match(event.request);
})
})
);
return;
}
// For everything else, use cache first with network fallback
event.respondWith(
caches.match(event.request)
.then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
// If not in cache, fetch from network and cache it
return caches.open(CACHE_NAME)
.then((cache) => {
return fetch(event.request)
.then((networkResponse) => {
// Don't cache non-successful responses
if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
cache.put(event.request, networkResponse.clone());
}
return networkResponse;
});
});
})
.catch(() => {
// If both cache and network fail, show offline fallback
if (event.request.mode === 'navigate') {
return caches.match('/');
}
})
);
});
// Handle background sync for offline actions
self.addEventListener('sync', (event) => {
console.log('[ServiceWorker] Background syncing', event.tag);
if (event.tag === 'offline-sync') {
event.waitUntil(syncOfflineActions());
}
});
// Handle push notifications
self.addEventListener('push', (event) => {
console.log('[ServiceWorker] Push received');
const options = {
body: event.data ? event.data.text() : 'Tienes una nueva notificación',
icon: '/icons/icon-192x192.png',
badge: '/icons/icon-72x72.png',
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
primaryKey: 1
}
};
event.waitUntil(
self.registration.showNotification('Avante', options)
);
});
self.addEventListener('notificationclick', (event) => {
console.log('[ServiceWorker] Notification click: ', event.notification);
event.notification.close();
// Determine what to open based on notification data
const urlToOpen = '/client'; // Default to client portal
event.waitUntil(
clients.matchAll({
type: 'window',
includeUncontrolled: true
}).then((clientList) => {
for (const client of clientList) {
if (client.url === urlToOpen && 'focus' in client) {
return client.focus();
}
}
if (clients.openWindow) {
return clients.openWindow(urlToOpen);
}
})
);
});
// Helper function to sync offline actions
async function syncOfflineActions() {
console.log('[ServiceWorker] Syncing offline actions');
// This would typically make a request to your backend to sync pending actions
// For now, we'll just log it
try {
const response = await fetch('/offline/sync', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
});
return response.json();
} catch (error) {
console.error('[ServiceWorker] Sync failed:', error);
throw error;
}
}
+4 -5
View File
@@ -50,13 +50,12 @@
@stack('scripts')
@livewireScripts
{{-- PWA retirada: el sw.js antiguo (cache-first) servía versiones obsoletas
tras cada deploy y rompía POSTs. El sw.js actual es de auto-limpieza:
se registra una última vez para borrar caches y desregistrarse. --}}
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
console.log('ServiceWorker registration failed: ', err);
});
navigator.serviceWorker.register('/sw.js');
}
</script>
</body>
+3 -6
View File
@@ -109,14 +109,11 @@
@stack('scripts')
@livewireScripts
<script>
{{-- PWA retirada: sw.js ahora es de auto-limpieza (borra caches y se desregistra) --}}
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
console.log('ServiceWorker registration failed: ', err);
});
navigator.serviceWorker.register('/sw.js');
}
// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
const menuBtn = document.querySelector('[data-dropdown-toggle]');