Guía de PWA (Progressive Web Apps): Haciendo que las Apps Web Funcionen como Apps Móviles

¿Qué es una PWA?

PWA (Progressive Web Apps) son aplicaciones web construidas con tecnologías web que proporcionan una experiencia de app móvil nativa.

Las PWA usan tecnologías web modernas como Service Worker, Web App Manifest y HTTPS. Funcionan en cualquier navegador y no requieren app store.

Características clave: Funcionalidad offline, Agregar a pantalla de inicio, notificaciones push, sincronización en segundo plano, modo pantalla completa.

Ventajas: Un solo código base (web + móvil), no requiere aprobación de app store, actualizaciones instantáneas, menor costo de desarrollo, SEO friendly.

Web App Manifest

El archivo manifest.json define los metadatos de la PWA: name, short_name, start_url, display, background_color, theme_color, icons.

Ejemplo de manifest: { "name": "Utilgo", "short_name": "Utilgo", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4a90d9", "icons": [{"src": "/icon-192.png", "sizes": "192x192"}] }.

display: standalone permite que la app funcione sin UI del navegador (barra de direcciones, navegación). Las opciones fullscreen y minimal-ui también están disponibles.

Iconos: Se requieren al menos iconos PNG de 192x192 y 512x512 píxeles. El soporte de iconos maskable crea iconos adaptativos.

Vincule el manifest en <head> con <link rel="manifest" href="/manifest.json">. El navegador lee el manifest para habilitar las características de PWA.

Service Worker

Service Worker es un archivo JavaScript que se ejecuta entre el navegador y la red. Funciona en segundo plano y proporciona acceso offline, caché y notificaciones push.

Registro: Service Worker se registra con navigator.serviceWorker.register('/sw.js'). Debe ejecutarse en HTTPS o localhost.

Estrategias de caché: Cache First (primero cache, luego red), Network First (primero red, luego cache), Stale While Revalidate (servir desde cache, actualizar en segundo plano).

Cache API: Los assets estáticos se cachean con caches.open('v1').then(cache => cache.addAll(['/index.html', '/style.css', '/app.js'])).

Fallback offline: Muestre una página personalizada cuando esté offline. self.addEventListener('fetch', (e) => { e.respondWith(caches.match(e.request).then(r => r || fetch(e.request))); });

Requisitos de PWA y Lighthouse

HTTPS: Las PWA deben ejecutarse en HTTPS (excepto localhost). Se requiere certificado SSL.

Diseño responsive: Como la PWA se ejecuta en dispositivos móviles, el diseño responsive es obligatorio. Agregue meta tag viewport.

Carga rápida: La carga inicial debe ser inferior a 3 segundos. Acelere con code splitting, lazy loading y caché.

Auditoría PWA de Lighthouse: Ejecute la auditoría PWA en la pestaña Lighthouse de Chrome DevTools. Verifica todos los criterios de PWA (instalable, funciona offline, carga rápida).

Instalabilidad: El navegador muestra automáticamente el botón 'Agregar a pantalla de inicio' cuando se cumplen las condiciones de manifest y Service Worker.

PWA vs App Nativa

Ventajas de PWA: Un solo código base, actualizaciones instantáneas, no requiere app store, SEO friendly, menor costo, tamaño pequeño.

Ventajas de app nativa: Acceso completo al hardware (cámara, Bluetooth, NFC), mejor rendimiento, visibilidad en app store, confiabilidad de notificaciones push.

Criterios de selección: PWA si el presupuesto es limitado y se necesita lanzamiento rápido. App nativa si se necesita acceso completo al hardware y máximo rendimiento.

Enfoque híbrido: Comience con PWA, cambie a app nativa cuando la base de usuarios crezca. O convierta PWA a app nativa con Capacitor/Ionic.

Ejemplos de PWA y Herramientas

Ejemplos exitosos de PWA: Twitter Lite (65% menos datos), Pinterest (44% más engagement de usuarios), Starbucks (pedidos offline).

Herramientas de desarrollo: Workbox (librería de Service Worker de Google), PWA Builder (Microsoft), Lighthouse (auditoría), Chrome DevTools (debugging).

Soporte de frameworks: Next.js (next-pwa), Nuxt.js (@nuxtjs/pwa), React (Create React App PWA template), Vue (Vue CLI PWA plugin).

Pruebas: Verifique Service Worker, Cache y Manifest en la pestaña Application de Chrome DevTools. Mida el puntaje de PWA con Lighthouse.