Correcciones varias. Actualizacion de estilos. Mejoras para PWA

sw.js

@@ -1,6 +1,54 @@
-self.addEventListener('install', (e) => {
-  e.waitUntil(caches.open('v1').then(cache => cache.addAll(['index.html'])));
+const CACHE_NAME = 'v1_cache_mi_pwa';
+// Lista de archivos que quieres que funcionen sin internet
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/plugins/regions.min.js',
+  '/wavesurfer.min.js'
+];
+
+// 1. Evento Install: Guarda los archivos en la caché al instalar la PWA
+self.addEventListener('install', e => {
+  e.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        return cache.addAll(urlsToCache);
+      })
+      .then(() => self.skipWaiting()) // Fuerza la activación inmediata
+  );
 });
+
+// 2. Evento Activate: Limpia cachés antiguas para que siempre tengas la última versión
+self.addEventListener('activate', e => {
+  const cacheWhitelist = [CACHE_NAME];
+  e.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+// 3. Evento Fetch: Intercepta las peticiones y sirve desde la caché si existe
+self.addEventListener('fetch', e => {
+  e.respondWith(
+    caches.match(e.request)
+      .then(res => {
+        if (res) {
+          // Si el archivo está en caché, lo devuelve sin ir a internet
+          return res;
+        }
+        // Si no está, lo busca en la red
+        return fetch(e.request);
+      })
+  );
+});
+
 self.addEventListener('fetch', (e) => {
   e.respondWith(caches.match(e.request).then(res => res || fetch(e.request)));
 });