PWA: Fundamentos de Progressive Web App, Service Worker y Manifiesto

Qué es Progressive Web App

Progressive Web App (PWA) es un enfoque de desarrollo de aplicaciones web que combina las mejores cualidades de la web y las aplicaciones nativas. El término fue acuñado por Francesco Berriman en 2015, y Google promueve activamente PWA como reemplazo de las aplicaciones móviles simples. La idea principal: un sitio web mejora progresivamente según las capacidades del navegador y el dispositivo. Si el navegador soporta Service Worker — se habilita el modo sin conexión. Si soporta el manifiesto — aparece un botón "Instalar". Si la API de notificaciones está disponible — la aplicación puede enviar mensajes push. Un usuario en un dispositivo débil con conexión lenta obtiene la versión básica del sitio, mientras que en un smartphone moderno obtiene una aplicación completa con un icono en el escritorio.

Las PWA no necesitan instalarse a través de una tienda de aplicaciones. Un enlace es suficiente. Esto resuelve el principal problema de las aplicaciones móviles: la alta barrera de entrada. El usuario no va a Google Play o App Store, no espera una descarga de 100 MB, no concede una docena de permisos. Simplemente abre el sitio y el navegador ofrece instalar la aplicación. Si el usuario rechaza — sigue usando el sitio. Y si acepta — el icono aparece en la pantalla de inicio y la aplicación se abre como una nativa: sin barra de direcciones del navegador, con modo de pantalla completa e inicio rápido.

Técnicamente, una PWA debe cumplir tres criterios: funcionar sobre HTTPS (conexión segura), tener un Service Worker (script de procesamiento en segundo plano) e incluir un manifiesto (Web App Manifest). Estos tres componentes convierten un sitio web normal en una aplicación instalable.

Service Worker: El Corazón de PWA

Service Worker es un script JavaScript que el navegador ejecuta en un hilo separado, independiente de la página web. No tiene acceso al DOM, no puede interactuar directamente con la interfaz, pero puede interceptar y modificar solicitudes de red, gestionar el caché, manejar notificaciones push y realizar sincronización en segundo plano. Service Worker actúa como un servidor proxy entre el navegador y la red: cada solicitud de la página pasa a través del Service Worker, que decide — servir datos desde el caché, solicitar al servidor o hacer ambas cosas.

Service Worker tiene su propio ciclo de vida, no vinculado a la página abierta. Se instala, activa y ejecuta en segundo plano incluso después de cerrar todas las pestañas del sitio. Esto permite que las PWA reciban notificaciones push y actualicen el caché en segundo plano, sin intervención del usuario.

Ciclo de Vida de Service Worker

Service Worker pasa por cuatro etapas: registro, instalación, activación e inactividad/terminación.

Registro. El navegador recibe un enlace al archivo JS de Service Worker y comienza la descarga. El registro se realiza desde JavaScript normal en la página:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW registered:', registration.scope);
    })
    .catch(error => {
      console.log('SW registration failed:', error);
    });
}

Instalación. Después de una descarga exitosa, el navegador dispara el evento install. En esta etapa, es común almacenar en caché los recursos clave (estructura HTML, CSS, imágenes principales) para que la aplicación pueda funcionar sin conexión. Si la instalación tiene éxito, el Service Worker pasa a la siguiente etapa. Si el script lanza un error — la instalación se cancela y el Service Worker antiguo continúa funcionando.

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('pwa-cache-v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/app.js',
        '/images/logo.png'
      ]);
    })
  );
});

Activación. Cuando todas las pestañas del sitio están cerradas, el Service Worker antiguo termina y el nuevo se activa. El evento activate se utiliza para limpiar cachés antiguos y migrar datos:

self.addEventListener('activate', event => {
  const cacheWhitelist = ['pwa-cache-v2'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Inactividad. Un Service Worker activado intercepta solicitudes y maneja eventos. Puede ser detenido por el navegador para ahorrar recursos y reiniciarse en la siguiente solicitud. Service Worker está basado en eventos: vive solo mientras procesa eventos.

Estrategias de Almacenamiento en Caché

Service Worker soporta varias estrategias de almacenamiento en caché. La elección depende del tipo de recurso y los requisitos de actualización de datos.

Cache First (Primero Caché). Se verifica el caché primero. Si el recurso se encuentra — se devuelve desde el caché. Si no — la solicitud va al servidor, la respuesta se guarda en el caché. Esta estrategia es adecuada para recursos estáticos: imágenes, fuentes, CSS, JS. Proporciona máxima velocidad y funcionalidad completa sin conexión.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request).then(fetchResponse => {
        return caches.open('pwa-cache-v1').then(cache => {
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        });
      });
    })
  );
});

Network First (Primero Red). La solicitud va primero al servidor. Si el servidor responde — los datos se devuelven al usuario y se guardan en el caché. Si el servidor no está disponible — se entrega la copia almacenada en caché. Esta estrategia es adecuada para solicitudes de API, noticias, contenido que debe estar actualizado pero también puede funcionar sin conexión.

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).then(response => {
      return caches.open('pwa-dynamic-v1').then(cache => {
        cache.put(event.request, response.clone());
        return response;
      });
    }).catch(() => {
      return caches.match(event.request);
    })
  );
});

Stale While Revalidate (Obsoleto con Actualización). La respuesta se devuelve inmediatamente desde el caché, mientras se envía una solicitud en segundo plano al servidor para actualizar el caché. El usuario ve el contenido al instante, y la siguiente solicitud obtendrá datos actualizados. Ideal para contenido que cambia pero donde no es crítico si el usuario ve una versión de unos minutos de antigüedad.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      const fetchPromise = fetch(event.request).then(response => {
        return caches.open('pwa-dynamic-v1').then(cache => {
          cache.put(event.request, response.clone());
          return response;
        });
      });
      return cached || fetchPromise;
    })
  );
});

Web App Manifest: Cómo se Ve la Aplicación en el Dispositivo

El manifiesto es un archivo JSON, generalmente manifest.json, enlazado mediante una etiqueta <link> en el head de la página HTML. Le indica al navegador cómo debe mostrarse la aplicación al instalarse en un dispositivo: nombre, iconos de diferentes tamaños, color de fondo, color de tema, orientación y modo de visualización (navegador, UI mínima, pantalla completa).

{
  "name": "PWA Demo App",
  "short_name": "PWA Demo",
  "description": "Aplicación PWA de demostración",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3f51b5",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

El parámetro display determina cómo se verá la aplicación después de la instalación. standalone oculta la barra de direcciones del navegador y el panel de navegación — la aplicación se ve nativa. fullscreen utiliza toda la pantalla sin elementos del navegador. minimal-ui deja elementos mínimos del navegador (botones de retroceso y actualización).

Los iconos deben prepararse en al menos dos tamaños: 192x192 y 512x512 píxeles. El formato PNG con soporte para el parámetro purpose (por ejemplo, maskable) permite al navegador adaptar el icono a la forma del dispositivo — en Android, el icono puede recortarse a un cuadrado redondeado. Después de conectar el manifiesto, Chrome en Android comienza a mostrar el banner "Añadir a la pantalla de inicio" cuando se cumplen las condiciones: HTTPS, Service Worker registrado, manifiesto válido y al menos dos visitas con un intervalo de 5 minutos.

Notificaciones Push en PWA

PWA puede enviar notificaciones push como una aplicación nativa. Se utilizan dos API: Push API (envío desde el servidor) y Notification API (visualización en el dispositivo). Service Worker recibe el evento push incluso si la aplicación no está abierta, y puede mostrar una notificación con título, texto e icono.

Para recibir notificaciones push, el usuario debe conceder permiso:

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('Push allowed');
  }
});

Service Worker se suscribe al evento push y muestra la notificación:

self.addEventListener('push', event => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    actions: [
      { action: 'open', title: 'Abrir' },
      { action: 'close', title: 'Cerrar' }
    ]
  });
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  if (event.action === 'open') {
    clients.openWindow('/');
  }
});

Para enviar push desde el servidor, se utiliza el protocolo Web Push (VAPID). El servidor cifra el mensaje y lo envía a través del servicio push del navegador (Firebase Cloud Messaging para Chrome, Mozilla Autopush para Firefox). La suscripción del usuario (objeto PushSubscription) debe guardarse en el servidor durante el registro.

Rendimiento y Lighthouse

Las PWA deben ser rápidas. Google Lighthouse es una herramienta de auditoría que verifica PWA según una lista de verificación: registro de Service Worker, respuesta 200 con acceso sin conexión, manifiesto válido, HTTPS, tamaños correctos de iconos, carga rápida en redes lentas. La puntuación mínima de aprobación para PWA es 80 sobre 100 en la escala de Lighthouse. Las aplicaciones con una puntuación inferior a 80 no reciben el banner de instalación de Chrome.

Métricas clave de rendimiento para PWA — First Contentful Paint (FCP) por debajo de 1.8 segundos, Largest Contentful Paint (LCP) por debajo de 2.5 segundos, Time to Interactive (TTI) por debajo de 3.5 segundos. Service Worker puede mejorar significativamente FCP y LCP si almacena en caché el HTML y CSS críticos durante la instalación. La estrategia Cache First para activos estáticos y Stale While Revalidate para API ofrece la mejor experiencia de usuario.

Acceso Sin Conexión y Sincronización en Segundo Plano

Una de las principales capacidades de PWA es trabajar sin internet. Service Worker intercepta solicitudes y sirve versiones almacenadas en caché de las páginas. Si el usuario intenta abrir una página que no está en el caché, se puede mostrar una página de respaldo personalizada:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    }).catch(() => {
      return caches.match('/offline.html');
    })
  );
});

La Sincronización en Segundo Plano (Background Sync) permite diferir el envío de datos al servidor si el dispositivo está sin conexión. Service Worker guarda la solicitud y la envía automáticamente cuando se restablece la conexión:

self.addEventListener('sync', event => {
  if (event.tag === 'sync-messages') {
    event.waitUntil(sendMessages());
  }
});

function sendMessages() {
  return caches.open('pwa-pending-v1').then(cache => {
    return cache.keys().then(requests => {
      return Promise.all(requests.map(request => {
        return fetch(request).then(() => cache.delete(request));
      }));
    });
  });
}

Herramientas de Desarrollo PWA

Chrome DevTools proporciona el panel Application, donde puedes depurar Service Worker (registro, estado, caché, push), verificar el manifiesto, limpiar el caché y crear notificaciones push personalizadas para pruebas. La pestaña Network con emulación de modo sin conexión ayuda a probar el comportamiento del caché. Lighthouse en el panel Audits proporciona una auditoría PWA completa con recomendaciones.

Workbox es una biblioteca de Google que simplifica la creación de Service Worker. En lugar de escribir manualmente estrategias de almacenamiento en caché, Workbox ofrece módulos listos para usar:

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new StaleWhileRevalidate()
);

Workbox se integra con empaquetadores (Webpack, Vite) y genera automáticamente un manifiesto de precaché. PWA Builder (pwabuilder.com) de Microsoft genera todos los archivos PWA en línea: Service Worker, manifiesto, iconos, plantilla HTML.