Instala PWAs en tu escritorio con Chrome

¿Qué es una Progressive Web App?

Una Progressive Web App (PWA) es una aplicación web que ofrece una experiencia parecida a la de una app móvil. Definición rápida: una PWA combina páginas web, características del navegador y archivos locales para comportarse como una aplicación instalada.

Características principales:

• Funcionan en cualquier navegador moderno y para cualquier usuario, independientemente del navegador predeterminado.
• Son responsivas: se adaptan a pantallas de distinto tamaño.
• Se comportan como apps nativas: icono en el inicio, navegación por toques/clics y sin necesidad de repetir URLs.
• Pueden funcionar en línea, fuera de línea y con conectividad limitada gracias al almacenamiento en caché.

Importante: un servicio clave detrás de las PWAs son los service workers. Definición rápida: un service worker es un archivo JavaScript que actúa entre la red y la app para controlar peticiones, cachear respuestas y permitir el modo fuera de línea.

Por qué deberías usar PWAs

• Velocidad: se cargan desde la caché primero y solicitan la red después, por eso parecen instantáneas. En una navegación normal el dispositivo pide la conexión antes de renderizar, lo que deja pantallas en blanco durante la espera —cerca de la mitad de las personas abandona después de unos tres segundos.
• Tamaño reducido: ocupan mucho menos espacio que las apps nativas. Por ejemplo, la PWA de Starbucks ocupa aproximadamente el 0,4% del tamaño de su app nativa.
• Fiabilidad: los service workers permiten servir contenido almacenado cuando la red falla.
• Experiencia nativa: icono en el escritorio/Inicio, ventana propia, notificaciones, integración con la barra de tareas.

Nota: la experiencia exacta depende de cómo el desarrollador haya implementado la PWA (por ejemplo, manejo de notificaciones, sincronización en segundo plano, estrategias de caché).

Cómo instalar una PWA en tu escritorio (Chrome 70+)

Paso a paso rápido:

1. Abre el sitio web que ofrece PWA (ej.: Twitter, Pinterest, Trivago, Uber, Starbucks). Algunos sirven desde la versión móvil del sitio.
2. Haz clic en el menú (icono de tres puntos) en la esquina superior derecha del navegador.

3. Selecciona “Instalar [App Name]” cuando aparezca la opción.
4. Confirma en el diálogo de permiso haciendo clic en “Instalar”.
5. Abre la app desde el escritorio o desde la lista de aplicaciones (en Windows 10 aparecerá en el menú Inicio y en la barra de tareas).

6. Para desinstalar, abre la app, haz clic en los tres puntos en la parte superior y elige “Desinstalar [app name]”.

Consejo rápido: si no ves la opción de instalar, comprueba la versión móvil del sitio o revisa si ese dominio realmente expone un manifiesto y un service worker.

Criterios de aceptación para una buena PWA

• Tiene un manifiesto web válido (manifest.json) con nombre, iconos y orientación.
• Registra un service worker que cachee recursos críticos y sirve una versión funcional en modo fuera de línea.
• Soporta navegación por URL y enlaces internos sin romper el estado de la app.
• Ofrece experiencia coherente en distintas resoluciones (responsividad).
• Implementa burbujas o notificaciones con permiso y pruebas de usabilidad.

Limitaciones y casos en los que una PWA no es la mejor opción

• Funciones muy específicas del sistema operativo: acceso completo a sensores complejos o APIs propietarias puede requerir una app nativa.
• Integraciones profundas con hardware (por ejemplo, APIs específicas de fabricante) pueden no estar disponibles.
• Distribución controlada por tiendas: si necesitas estar exclusivamente en App Store, la PWA no reemplaza un lanzamiento nativo para esa plataforma.

Contraejemplo: si tu producto depende de una integración a nivel kernel o hardware (control total de Bluetooth de baja energía con comportamientos específicos), una app nativa puede ser necesaria.

Alternativas y cuándo elegir cada una

• PWA: elegir cuando buscas rapidez de desarrollo, menor peso, presencia multiplataforma y buen soporte fuera de línea.
• App nativa: elegir cuando requieres APIs de plataforma avanzadas, rendimiento extremo o distribución específica por tiendas.
• Web responsiva clásica: elegir si no necesitas modo fuera de línea ni instalación, pero quieres máxima compatibilidad y SEO.

Mini-metodología para decidir: 1) Lista las funciones obligatorias; 2) Marca las que requieren APIs nativas; 3) Si menos del 30% dependen de APIs nativas, la PWA suele ser la mejor opción rápida y coste-efectiva.

Seguridad y privacidad (notas de cumplimiento GDPR)

• Los service workers y la caché almacenan recursos localmente. Diseña políticas claras sobre qué datos se guardan offline.
• Solicita permisos explícitos para notificaciones y usa una política de retención de datos transparente.
• Para usuarios en la UE, trata los datos personales siguiendo principios de minimización: guarda solo lo necesario y ofrece opciones de eliminación.
• Implementa HTTPS obligatorio: los service workers sólo se registran en entornos seguros.

Importante: no guardes datos sensibles sin cifrado y sin el consentimiento claro del usuario.

Checklist por rol

Desarrollador:

• Manifest.json presente y válido.
• Service worker registrado y probado en condiciones offline.
• Iconos adecuados para distintos tamaños.
• HTTPS en todo el sitio.

Product Manager:

• Caso de uso claro para instalación.
• Métricas definidas (engagement, retención, tiempo de carga).
• Plan de soporte y marketing para la PWA.

Usuario final:

• Confirma permisos (notificaciones, ubicación si procede).
• Prueba la app en condiciones de baja conectividad.
• Verifica presencia en el escritorio/menú Inicio tras la instalación.

Pruebas y criterios de aceptación (casos básicos)

• Carga inicial: la PWA muestra contenido principal en menos de X segundos en condiciones normales (establecer X según SLA del producto).
• Offline: la pantalla principal funciona cuando no hay red y muestra contenido cacheado.
• Instalación/desinstalación: la app se instala desde Chrome y aparece en el menú de aplicaciones; se desinstala sin dejar entradas huérfanas.

Resumen

Las PWAs combinan lo mejor de la web y las apps nativas: instalación sencilla, cargas rápidas desde caché, funcionamiento offline y menor tamaño. Chrome 70 facilita su instalación en el escritorio con un solo clic. Evalúa requisitos técnicos y de privacidad antes de elegir una PWA, y usa las listas de verificación para validar la calidad.

Image credit: Barra de direcciones del sitio web / campo de URL