// Service Worker para PWA y Notificaciones Push // Mexus App - Construction Management System const CACHE_NAME = 'mexus-app-v1'; const STATIC_CACHE = 'mexus-static-v1'; const DYNAMIC_CACHE = 'mexus-dynamic-v1'; // Recursos estáticos para cachear const STATIC_ASSETS = [ '/', '/manifest.json', '/icons/icon-192x192.png', '/icons/icon-512x512.png', '/apple-touch-icon.png', '/favicon.png', ]; // Instalación del Service Worker self.addEventListener('install', (event) => { console.log('Service Worker instalado'); event.waitUntil( caches.open(STATIC_CACHE) .then((cache) => { console.log('Cacheando recursos estáticos'); return cache.addAll(STATIC_ASSETS); }) .then(() => self.skipWaiting()) ); }); // Activación del Service Worker self.addEventListener('activate', (event) => { console.log('Service Worker activado'); event.waitUntil( Promise.all([ // Limpiar caches antiguos caches.keys().then((cacheNames) => { return Promise.all( cacheNames .filter((name) => name !== STATIC_CACHE && name !== DYNAMIC_CACHE) .map((name) => caches.delete(name)) ); }), clients.claim(), ]) ); }); // Estrategia de fetch: Network first, fallback to cache self.addEventListener('fetch', (event) => { // Skip non-GET requests if (event.request.method !== 'GET') return; // Skip API requests (siempre online para datos frescos) if (event.request.url.includes('/api/')) return; // Skip chrome-extension and other non-http(s) requests if (!event.request.url.startsWith('http')) return; event.respondWith( fetch(event.request) .then((response) => { // Clone response para guardarlo en cache const responseClone = response.clone(); // Solo cachear respuestas exitosas if (response.status === 200) { caches.open(DYNAMIC_CACHE).then((cache) => { cache.put(event.request, responseClone); }); } return response; }) .catch(() => { // Si falla la red, buscar en cache return caches.match(event.request).then((response) => { if (response) { return response; } // Si es una página, mostrar página offline if (event.request.headers.get('accept')?.includes('text/html')) { return caches.match('/'); } return new Response('Offline', { status: 503 }); }); }) ); }); // Recibir notificaciones push self.addEventListener('push', (event) => { console.log('Push recibido:', event); let data = { title: 'Mexus App', body: 'Nueva notificación', icon: '/icon-192x192.png', badge: '/badge-72x72.png', url: '/', }; try { if (event.data) { data = { ...data, ...event.data.json() }; } } catch (e) { console.error('Error parsing push data:', e); } const options = { body: data.body, icon: data.icon || '/icon-192x192.png', badge: data.badge || '/badge-72x72.png', vibrate: [100, 50, 100], data: { url: data.url || '/', dateOfArrival: Date.now(), }, actions: [ { action: 'open', title: 'Abrir', icon: '/icons/checkmark.png', }, { action: 'close', title: 'Cerrar', icon: '/icons/xmark.png', }, ], tag: data.tag || 'default', renotify: true, }; event.waitUntil( self.registration.showNotification(data.title, options) ); }); // Clic en notificación self.addEventListener('notificationclick', (event) => { console.log('Notificación clickeada:', event); event.notification.close(); if (event.action === 'close') { return; } const url = event.notification.data?.url || '/'; event.waitUntil( clients.matchAll({ type: 'window', includeUncontrolled: true }) .then((clientList) => { // Si ya hay una ventana abierta, enfocarla y navegar for (const client of clientList) { if (client.url.includes(self.location.origin) && 'focus' in client) { client.focus(); return client.navigate(url); } } // Si no hay ventana, abrir una nueva if (clients.openWindow) { return clients.openWindow(url); } }) ); }); // Cerrar notificación self.addEventListener('notificationclose', (event) => { console.log('Notificación cerrada:', event); }); // Sincronización en background (para futuras mejoras) self.addEventListener('sync', (event) => { if (event.tag === 'sync-notifications') { console.log('Sync de notificaciones'); } });