¿Qué es una PWA?

Una PWA (Progressive Web App) es una aplicación web que usa un conjunto de tecnologías modernas para comportarse como una aplicación nativa de móvil o escritorio. Es accesible desde el navegador como cualquier web, pero puede instalarse en el dispositivo, funcionar sin conexión y recibir notificaciones push.

¿Para qué se utiliza?

Las PWA se usan para:

• Ofrecer experiencia de app sin pasar por las tiendas de aplicaciones (App Store, Google Play).
• Permitir que la aplicación funcione sin conexión o con conexión intermitente.
• Enviar notificaciones push a los usuarios, igual que una app nativa.
• Reducir costes frente a desarrollar apps nativas para iOS y Android por separado.
• Mejorar el rendimiento con estrategias de caché avanzadas mediante Service Workers.

¿Cómo funciona?

Imagina una PWA como un camaleón entre web y app. Vista desde fuera parece una página web, pero por dentro tiene las habilidades de una app: se instala en la pantalla de inicio, carga sin internet y se actualiza en segundo plano. La magia la hacen tres piezas: el manifest (identidad), el Service Worker (cerebro en segundo plano) y HTTPS (seguridad obligatoria).

Ejemplo: Web App Manifest

// public/manifest.json
{
  "name": "Mi App",
  "short_name": "MiApp",
  "description": "Una PWA de ejemplo",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#282828",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Ejemplo: Service Worker básico con caché offline

// service-worker.js
const CACHE_NAME = 'mi-app-v1';
const RECURSOS = ['/', '/styles/global.css', '/scripts/app.js'];

// Instalación: guarda los recursos en caché
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(RECURSOS))
  );
});

// Fetch: sirve desde caché si no hay red
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((respuestaCacheada) => {
      return respuestaCacheada || fetch(event.request);
    })
  );
});

---

Las PWA han reducido la brecha entre web y apps nativas. Empresas como Twitter, Starbucks o Spotify usan PWA para ofrecer experiencias rápidas e instalables con una sola base de código.

---

---