Convertir tu web en una PWA instalable y con modo sin conexión

Prompt

Actúa como desarrollador web especializado en Progressive Web Apps, service workers y estrategias de caché.

Contexto:
- Web o aplicación: {{web}}
- Stack y alojamiento: {{stack}}
- Nivel de funcionamiento sin conexión: {{nivel_offline}}
- Prioridades: {{prioridades}}

Si la web tiene zonas privadas, datos personales o contenido que cambia con frecuencia, pregúntame cómo se gestionan antes de definir qué se guarda en caché.

Entregables:
1. El archivo de manifest de la aplicación web: nombre, nombre corto, colores, display, start_url, scope e iconos (192 y 512 px, y versión maskable), con las etiquetas que hay que añadir al HTML.
2. El service worker con una estrategia por tipo de recurso explicada en una tabla: precaché del esqueleto de la aplicación, stale-while-revalidate para CSS, JS e imágenes, network-first con tiempo límite para el HTML, y solo red para la API autenticada.
3. La página sin conexión y cómo se sirve cuando falla la red.
4. Versionado de cachés, limpieza de las antiguas en el evento activate y un flujo de actualización que avise al usuario de que hay una versión nueva en lugar de recargar por sorpresa.
5. El código de registro del service worker y la alternativa con Workbox si encaja mejor con {{stack}}.
6. Limitaciones conocidas en iOS y Safari que debo comprobar, indicando que conviene verificarlas en la documentación actual.
7. Cómo probarlo: panel Application de las DevTools, simulación sin conexión, auditoría de instalabilidad y casos de prueba concretos.

Restricciones:
- La web debe servirse por HTTPS; recuérdalo si el alojamiento no lo garantiza.
- No guardes en caché respuestas con datos personales ni de sesión.
- No añadas notificaciones push ni sincronización en segundo plano salvo que lo pida en las prioridades.
- Marca con [COMPLETAR] colores, nombres e iconos que no te haya dado.

Formato: tabla de estrategias, un bloque de código por archivo con su ruta y una lista de pruebas.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

const VERSION = 'v1';
const SHELL = `shell-${VERSION}`;
const PAGINAS = `paginas-${VERSION}`;
const RECURSOS = `recursos-${VERSION}`;
const PRECACHE = ['/', '/offline/', '/manifest.webmanifest']; // [COMPLETAR: CSS/JS con hash de Astro]

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(SHELL).then((cache) => cache.addAll(PRECACHE)));
});

self.addEventListener('activate', (event) => {
  const actuales = [SHELL, PAGINAS, RECURSOS];
  event.waitUntil(caches.keys().then((claves) =>
    Promise.all(claves.filter((c) => !actuales.includes(c)).map((c) => caches.delete(c)))));
});

const guardar = (nombre, request, res) => {
  if (res.ok) { const copia = res.clone(); caches.open(nombre).then((c) => c.put(request, copia)); }
  return res;
};

self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.method !== 'GET' || new URL(request.url).origin !== location.origin) return;
  if (request.mode === 'navigate') {
    event.respondWith(fetch(request).then((res) => guardar(PAGINAS, request, res))
      .catch(async () => (await caches.match(request)) ?? caches.match('/offline/')));
    return;
  }
  event.respondWith(caches.match(request).then((enCache) => {
    const red = fetch(request).then((res) => guardar(RECURSOS, request, res)).catch(() => enCache);
    return enCache ?? red;
  }));
});

Datos clave

Categoría

Programación y desarrollo · Crear páginas web

Tipo de resultado

Código

Nivel

Intermedio

Pensado para

ChatGPT, Claude, Gemini y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Web o aplicación, Stack y alojamiento, Funcionamiento sin conexión y Prioridades

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes