¿Quieres una app que se instale en el celular, funcione sin conexión y no tenga que pasar por la revisión de las tiendas? Eso es una PWA (Progressive Web App). Y con la inteligencia artificial, crear una es más fácil que nunca. En esta guía te explico qué es una PWA, por qué es una gran opción para empezar y cómo crear una app web con IA y publicarla gratis, paso a paso.
Qué es una PWA
Una aplicación web progresiva es una página web que se comporta como una app: se puede añadir a la pantalla de inicio con su propio icono, se abre a pantalla completa sin la barra del navegador, puede funcionar sin internet y cargar muy rápido. Por dentro sigue siendo HTML, CSS y JavaScript, con dos archivos extra que la convierten en «instalable»:
- manifest.json: describe la app (nombre, icono, colores, cómo se abre).
- service worker: un script que guarda archivos en caché para que la app funcione sin conexión.
Ventajas y limitaciones de una PWA
| Ventajas | Limitaciones |
|---|---|
| Funciona en Android, iPhone y computadora con el mismo código | En iPhone algunas funciones están más limitadas |
| No necesita aprobación de tiendas | No aparece en Google Play salvo que la empaquetes |
| Actualizaciones instantáneas para todos los usuarios | Acceso limitado a algunas funciones del teléfono |
| Publicación gratuita | Los usuarios deben saber cómo instalarla |
| Se encuentra en Google como cualquier web | Requiere HTTPS |
Ideas de PWA que puedes crear con IA
- Calculadora de precios o cotizador para tu negocio.
- Lista de tareas o de compras familiar.
- Rastreador de gastos o de hábitos.
- Menú digital de un restaurante con código QR.
- Juego de preguntas para tu clase o tu canal.
- Catálogo de productos con botón de pedido por WhatsApp.
- Temporizador o cronómetro para entrenamientos.
Cómo crear una PWA con IA paso a paso
Paso 1: Crea la app con ChatGPT o Claude
Empieza por la app en sí, sin pensar todavía en la parte de PWA. Usa un prompt detallado:
Crea una app web en un solo archivo HTML con CSS y JavaScript integrados para registrar entrenamientos: ejercicio, series, repeticiones y peso. Debe mostrar el historial por fecha, el récord de cada ejercicio y guardar todo en localStorage. Diseño oscuro, botones grandes para usar en el gimnasio con una mano, textos en español.
Prueba la app en tu navegador y pide mejoras hasta que funcione como quieres. Tienes el proceso detallado en cómo crear una app con ChatGPT y cómo crear una app con Claude.
Paso 2: Pide los archivos de PWA
Convierte esta app en una PWA instalable. Crea el archivo manifest.json con nombre, nombre corto, colores e iconos; un service worker que guarde en caché todos los archivos para que funcione sin conexión; y añade al HTML el código para registrar el service worker y el enlace al manifest. Indícame la estructura de carpetas final.
Paso 3: Crea los iconos
Necesitas al menos dos iconos PNG: de 192 × 192 y de 512 × 512 píxeles. Puedes diseñarlos en Canva o generarlos con IA. Guárdalos en una carpeta icons con los nombres que indica el manifest.
Paso 4: Organiza la carpeta del proyecto
mi-app/
├── index.html
├── manifest.json
├── sw.js
└── icons/
├── icon-192.png
└── icon-512.png
Paso 5: Publícala con HTTPS
Una PWA solo funciona en conexiones seguras. Opciones gratuitas:
- Netlify Drop: arrastra la carpeta y obtén una dirección con HTTPS al instante.
- GitHub Pages: sube los archivos a un repositorio y actívalo en la configuración.
- Cloudflare Pages u otros servicios de alojamiento estático.
- Tu hosting: sube la carpeta a
tudominio.com/appcon el SSL activado.
Paso 6: Instálala y pruébala
Abre la dirección en Chrome desde Android: aparecerá la opción Instalar app o Añadir a pantalla de inicio. En iPhone, abre la web en Safari, toca Compartir y luego Añadir a pantalla de inicio. Activa el modo avión y comprueba que sigue funcionando.
Paso 7: Revisa la calidad con Lighthouse
En Chrome de escritorio, abre las herramientas de desarrollo (F12), pestaña Lighthouse, y analiza la página. Te dirá si la PWA es instalable y qué mejorar en rendimiento y accesibilidad. Copia los avisos y pídele a la IA que los corrija.
Cómo publicar tu PWA en Google Play
Si quieres que tu PWA aparezca en Google Play, puedes empaquetarla con PWABuilder, una herramienta gratuita de Microsoft que genera el paquete para Android a partir de tu URL. Después lo subes a Play Console como cualquier app. Necesitarás verificar la propiedad de tu dominio con un archivo especial que PWABuilder te indica. El resto del proceso es igual que el que explico en cómo publicar una app en Google Play.
Cómo funciona el service worker (explicado fácil)
El service worker es la pieza que más confunde, así que vale la pena entenderlo. Imagina que es un pequeño asistente que vive entre tu app y el internet. La primera vez que alguien abre la app, el asistente guarda una copia de los archivos (HTML, CSS, JavaScript, iconos) en el teléfono. Las siguientes veces, cuando la app pide esos archivos, el asistente los entrega desde la copia guardada, sin esperar a internet. Por eso la app abre al instante y funciona en modo avión.
Hay varias estrategias de caché que puedes pedirle a la IA según tu app:
- Primero caché: usa siempre la copia guardada y actualiza en segundo plano. Ideal para apps que cambian poco, como calculadoras o juegos.
- Primero red: intenta descargar la versión nueva y, si no hay conexión, usa la guardada. Ideal para contenido que cambia a menudo, como un menú o un catálogo.
- Mixta: archivos de la app desde la caché y datos desde la red.
Cómo actualizar tu PWA sin que los usuarios vean la versión vieja
Cuando cambies la app, cambia también el nombre de la versión de la caché en el service worker (por ejemplo, de v1 a v2). Así el navegador sabrá que hay archivos nuevos. Pídele a la IA que añada un aviso tipo «Hay una nueva versión disponible, toca para actualizar».
Errores comunes al crear una PWA
- Publicar sin HTTPS: la opción de instalar no aparecerá.
- Rutas incorrectas en el manifest: los iconos no cargan y la app no es instalable. Revisa que los nombres de archivo coincidan exactamente.
- Olvidar actualizar la versión de la caché: los usuarios siguen viendo la versión antigua.
- Guardar datos importantes solo en localStorage: si el usuario borra los datos del navegador, los pierde. Añade una opción de exportar e importar.
- No probar en iPhone: el comportamiento puede variar; prueba en los dos sistemas.
PWA, app nativa o app no-code: cuál elegir
| Opción | Velocidad para crearla | Tiendas | Mejor para |
|---|---|---|---|
| PWA con IA | Horas | Opcional (empaquetada) | Herramientas, utilidades, prototipos |
| App no-code (AppCreator24, Adalo) | Horas o días | Sí | Apps de contenido y negocios |
| App nativa programada | Semanas o meses | Sí | Apps complejas o de alto rendimiento |
Para muchas ideas, una PWA es el punto de partida perfecto: la creas en una tarde, la compartes con un enlace y compruebas si a la gente le resulta útil. Si funciona, ya habrá tiempo de llevarla a las tiendas o de rehacerla con otra herramienta.
Cómo conseguir que la gente instale tu PWA
- Añade un botón visible de «Instalar app» que use el aviso de instalación del navegador.
- Muestra instrucciones breves para iPhone, donde la instalación es manual desde Safari.
- Comparte el enlace con un código QR en tu negocio, tus redes o tus videos.
- Explica el beneficio: «funciona sin internet», «abre en un segundo».
Preguntas frecuentes
¿Una PWA es una app de verdad?
Para el usuario sí: se instala, tiene icono y funciona a pantalla completa. Técnicamente es una web con superpoderes.
¿Las PWA funcionan en iPhone?
Sí, se instalan desde Safari, aunque Apple limita algunas funciones en comparación con Android.
¿Puedo poner anuncios en una PWA?
Sí, como en cualquier web, por ejemplo con AdSense, cumpliendo sus políticas.
Soy Estutos y hasta luego.