De web a app: Guía completa de Progressive Web Apps
Por qué las Progressive Web Apps son clave para tu proyecto web
Desarrollar apps nativas es un lío. Mantienes códigos distintos para iOS y Android, esperas aprobaciones eternas en las tiendas y lidias con despliegues separados. Las PWAs cambian todo eso de golpe.
Con una PWA, ofreces una experiencia como de app nativa: íconos en la pantalla principal, modo pantalla completa y uso sin conexión. Y tú solo manejas un solo código. Olvídate de las tiendas de apps y las reglas por plataforma. Es tu sitio web, pero con esteroides.
El secreto está en los service workers. Son scripts JavaScript livianos que corren en segundo plano, controlan las peticiones de red, guardan datos en caché y activan el modo offline. Pura elegancia técnica.
Límites reales: qué sí y qué no hacen las PWAs
No te lances a ciegas. Las PWAs viven en un scope fijo (normalmente tu domain), exigen HTTPS y operan en un entorno aislado. No es un problema, es seguridad pura.
Lo bueno: accedes a APIs nativas como geolocalización, cámara o sensores, que antes solo tenían las apps. Las actualizaciones llegan al instante, sin esperas. Subes código nuevo y los usuarios lo ven en su próxima visita.
Cómo armar tu PWA: guía paso a paso
Transformar tu web en PWA requiere cinco piezas clave. Vamos al grano:
1. El manifest: la tarjeta de presentación de tu PWA
Es un archivo JSON que le cuenta al sistema operativo todo sobre tu app: nombre completo y corto, colores de tema y fondo, scope de URLs, página de inicio, descripción e íconos para la pantalla principal. También define orientación.
Mira un ejemplo práctico:
{
"name": "Mi App Increíble",
"short_name": "IncreibleApp",
"theme_color": "#2196F3",
"background_color": "#FFFFFF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"description": "Descripción de tu app aquí",
"orientation": "any",
"icons": [
{
"src": "/assets/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Usa "any" en orientation salvo que tengas un motivo fuerte para restringirlo. Los móviles necesitan libertad.
2. Conecta el manifest en tu HTML
Pon esto en la sección <head> de tu plantilla principal o index.html:
<link rel="manifest" href="/assets/manifest.json">
Así los navegadores saben dónde buscar la config.
3. Prepara el modo offline
Los service workers cachan lo que el usuario ve. Si intentan algo sin caché y sin red, muéstrales una página amable. Crea un offline.html que lo explique claro.
En apps de una sola página, enlázalo a tu index.html para que vuelvan a contenido guardado:
ln -s index.html offline.html
Evitas que queden varados.
4. Registra el service worker
Agrega este script antes del </body> en tu plantilla base:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker registrado'))
.catch(err => console.log('Error al registrar Service Worker'));
}
</script>
5. Crea el service worker
Aquí pasa la magia offline. Intercepta peticiones, guarda en caché y sirve lo guardado si no hay red:
const CACHE_NAME = 'v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/offline.html'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
.catch(() => caches.match('/offline.html'))
);
});
Cacha lo esencial al instalar, prioriza caché y recurre a la página offline si falla todo.
HTTPS: sin excusas
Los service workers solo funcionan con HTTPS. Es por seguridad, punto. Si no lo tienes, arréglalo ya. En NameOcean, nuestros SSL y hosting lo activan automáticamente. Fácil y rápido.
Despliegue y pruebas
Sube el manifest, service worker y HTML actualizado. Prueba así:
- Abre DevTools (F12) → pestaña Application.
- Verifica que el manifest cargue sin errores.
- Revisa el registro del service worker en su sección.
- Simula offline (DevTools → Network → Offline) y chequea.
- Instala la PWA (los navegadores suelen mostrar un botón o menú).
El beneficio real
Tus usuarios viven una experiencia nativa sin que tú manejes códigos para iOS y Android. Actualizaciones inmediatas. Control total del despliegue.
Vale cada minuto de setup.
Truco rápido para automatizar
Si te da pereza, visita PWABuilder.com. Genera mucho de esto online. A veces, las herramientas ahorran tiempo valioso.
En resumen: las PWAs ya no son un experimento. Son la forma práctica de entregar experiencias premium sin complicaciones. Enfócate en lo que importa: crear features geniales.