¿Qué son las PWA y Cómo Crear una Aplicación Web Progresiva?

Las aplicaciones web progresivas (PWA) son una de las tendencias principales en el desarrollo web. Te explicamos de qué se componen las PWA, cómo pueden reemplazar las aplicaciones web y móviles estándar, y qué compañías ya se han convencido de su alta eficacia.

¿Qué son las PWA?

PWA (Progressive Web App) es una aplicación web progresiva. La progresividad de las PWA radica en que:

• Se ven y funcionan como aplicaciones nativas, aunque están creadas con tecnologías web (HTML/CSS/JavaScript, diversos marcos de trabajo de JS, menos frecuente – Flutter).
• Combinan las mejores características (y al mismo tiempo – compensan las deficiencias) de las aplicaciones móviles y web.

¿Para qué sirven las Aplicaciones Web Progresivas?

El principal objetivo de la creación de aplicaciones progresivas es mejorar la experiencia del usuario:

• A diferencia de las aplicaciones web comunes, no es necesario abrir la dirección de la página en el navegador para ejecutar las PWA. Puedes instalarlas en la pantalla de inicio y ejecutarlas como aplicaciones móviles comunes. Y aunque debajo del capó de una PWA funciona un navegador, se parecen más a aplicaciones nativas completas.
• Las PWA ofrecen una carga más rápida y un funcionamiento más fluido que las aplicaciones web comunes.
• Las PWA dependen menos de la conexión a Internet. Gracias a los scripts Service worker, pueden funcionar en modo fuera de línea, cargando datos del caché del navegador.
• Además de la tienda de aplicaciones, las PWA se pueden instalar directamente desde el sitio.

Además, las aplicaciones web progresivas permiten reducir los costes de desarrollo y mantenimiento de las aplicaciones móviles:

• En lugar de crear aplicaciones independientes para iOS y Android, puedes crear una sola PWA con un frontend adaptable. Esta aplicación se verá y funcionará igual de bien en cualquier dispositivo (incluido el escritorio).
• La actualización del contenido y la funcionalidad de las PWA se produce automáticamente, sin necesidad de publicar actualizaciones en AppStore o Google Play.

Eficiencia de las PWA

Los estudios de Google demuestran la impresionante eficacia de las aplicaciones web progresivas. Esta es la influencia de las PWA en los principales indicadores:

• Aumento de la participación general de los usuarios – de media un 137%. En algunos casos, la popularidad de la aplicación ha aumentado un 450% astronómico.
• Aumento del número de sesiones móviles en un 80%.
• Reducción del índice de abandono en un 42,86%.
• Aumento del número de páginas visitadas en un 134%.
• Mejora de la velocidad de carga – de media hasta 2,75 segundos.

Ventajas de las PWA en Comparación con las Aplicaciones Web Comunes

Las PWA son un nuevo nivel de evolución de las aplicaciones web. Esto es lo que pueden ofrecer a los usuarios:

• Funcionamiento fuera de línea. Una parte significativa de la funcionalidad de las PWA está disponible sin conexión a Internet.
• Instalación en el dispositivo. Una vez instalada en la pantalla principal, la PWA se ejecuta en su propia ventana, como una aplicación independiente (y no como una pestaña del navegador) y obtiene acceso ampliado a los recursos del dispositivo.
• Rapidez. Las PWA ofrecen una carga más rápida y una mayor capacidad de respuesta gracias a la caché de los recursos.
• Notificaciones. Las PWA pueden enviar notificaciones a los usuarios, permitiéndoles estar al tanto de las actualizaciones y otra información importante, lo que fomenta una interacción más activa con la aplicación y mejora la experiencia del usuario.
• Actualizaciones en segundo plano. Las aplicaciones web progresivas se actualizan en segundo plano y no requieren visitar el sitio principal.

Ventajas de las PWA en Comparación con las Aplicaciones Móviles Nativas

Las aplicaciones nativas se desarrollan teniendo en cuenta las capacidades de hardware y la funcionalidad del sistema operativo de una plataforma específica, por lo que, por supuesto, ofrecen el máximo nivel de experiencia de usuario. Sin embargo, las PWA tienen algunas ventajas importantes:

• Ausencia de costes de desarrollo y mantenimiento de versiones para una plataforma específica.
• Tamaño reducido de las aplicaciones.
• Multiplataforma: las PWA pueden funcionar en cualquier dispositivo con un navegador instalado.
• Todas las actualizaciones se realizan en el lado del servidor: los usuarios no tienen que instalar nada manualmente.
• Mejora de la cobertura de la audiencia objetivo mediante el SEO. Las aplicaciones web progresivas se pueden promocionar como un sitio web normal, atrayendo tráfico orgánico.

Componentes Principales de las PWA

Todavía no existen normas oficiales para las PWA (aunque existe una forma de comprobar la progresividad de una aplicación, por ejemplo, mediante Lighthouse). Existen conceptos generalmente aceptados sobre cómo debe funcionar una aplicación para ser considerada progresiva, y desde este punto de vista, toda PWA debe incluir los componentes y conceptos que se enumeran a continuación.

Lighthouse comprueba la aplicación en cuanto a velocidad, accesibilidad, SEO, mejores prácticas y progresividad.

Service Worker

Service Worker es un script que el navegador ejecuta en segundo plano, independientemente de la página web. Permite que las aplicaciones web realicen operaciones fuera de línea, envíen notificaciones push y sincronicen datos en segundo plano. Por ejemplo, puedes utilizar Service Worker para almacenar en caché los recursos estáticos del sitio, de modo que el sitio esté disponible en modo fuera de línea:

1. Registrar Service Worker en el archivo JS principal del sitio:

if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
});
}

2. En el archivo sw.js, definir la caché para los recursos estáticos (imágenes, CSS y scripts JS):

const CACHE_NAME = 'static-cache';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll([
        '/logo.png',
        '/main.css',
        '/app.js'
      ]))
  ); 
});

Ahora, cuando se pierde la conexión a Internet, el navegador cargará estos archivos estáticos desde la caché, y no desde el servidor. Este es, por supuesto, el ejemplo más sencillo de cómo funciona Service Worker. Puede hacer mucho más: gestionar las notificaciones push, la sincronización en segundo plano, interceptar las peticiones de red, etc. Pero su principal tarea es proporcionar acceso fuera de línea a las aplicaciones web: con su ayuda, el almacenamiento en caché de todos los scripts y estilos externos se puede realizar de tal manera que la funcionalidad básica esté disponible sin conexión a la red. En el tutorial paso a paso sobre el desarrollo de una PWA básica se muestra un ejemplo de cómo implementar este almacenamiento en caché.

Protocolo HTTPS

El protocolo HTTPS es obligatorio para utilizar los service worker y obtener acceso a los sensores del dispositivo. Sin HTTPS, la aplicación no se puede instalar en la pantalla.

Archivo Web App Manifest

Web App Manifest es un archivo JSON que indica al navegador y al sistema operativo cómo debe mostrarse y ejecutarse la aplicación web en un dispositivo móvil al instalarla en la pantalla principal. En él se configura el icono, el nombre, los colores del tema y el comportamiento. El manifiesto puede tener la extensión .json o .webmanifest, ambos contienen los mismos metadatos y no hay mucha diferencia entre ellos, aunque W3C recomienda utilizar la extensión .webmanifest:

{
  "name": "Ejemplo de aplicación web progresiva",
  "short_name": "MyPWA",
  "description": "Aplicación web progresiva que sirve para demostrar el concepto de PWA.",
  "icons": [
    {
      "src": "icons/icon-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#B12A34",
  "background_color": "#B12A34"
}

El manifiesto debe estar vinculado al archivo de índice:

<link rel="manifest" href="/manifest.webmanifest">

Al instalar en la pantalla principal, el icono, el nombre, los colores y las demás configuraciones se definirán a partir del manifiesto:

• name: Nombre completo de la aplicación web.
• short_name: Nombre abreviado que se mostrará en la pantalla de inicio del dispositivo.
• description: Descripción del propósito de la aplicación.
• icons: Información sobre los iconos de la aplicación: URL de las fuentes, tamaños y tipos. De las varias opciones de iconos se elegirá la más adecuada para las especificaciones del dispositivo del usuario.
• start_url: Archivo de índice que se ejecuta al iniciar la aplicación.
• display: Opción de visualización de la aplicación: puede ser a pantalla completa, independiente, mínima o una ventana normal del navegador.
• theme_color: Color principal de la interfaz de usuario, utilizado por el sistema operativo.
• background_color: Color de fondo, utilizado durante la instalación y en la pantalla de bienvenida.

Organización del almacenamiento en caché

En el archivo sw.js (Service Worker), define una lista de recursos para almacenar en caché y agrega los controladores de eventos install, activate y fetch:

const CACHE_NAME = 'my-pwa-cache';
const CACHE_FILES = [
  '/',
  '/index.html',
  '/style.css',
  '/script.js',
  '/icon.png'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(CACHE_FILES);
    })
  );
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheName !== CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Ahora tu aplicación funcionará sin conexión y se cargará más rápido gracias al almacenamiento en caché de recursos.

Notificaciones push y Notifications API

Las notificaciones (Notifications y push) juegan un papel importante en las PWA, ya que:

• Proporcionan una participación más profunda: permiten interactuar con los usuarios incluso cuando la PWA está cerrada.
• Ofrecen la posibilidad de enviar notificaciones oportunas sobre nuevo contenido, promociones, mensajes personales y otros eventos relevantes. Esto anima a los usuarios a volver a la PWA con más frecuencia.
• Las notificaciones se pueden almacenar localmente y luego mostrar al usuario desde la base de datos según una programación o cuando se produzcan ciertos eventos, si no está conectado a Internet y no puede recibir una notificación push.

Diseño adaptable

El diseño adaptable es aún más importante para las PWA que para las aplicaciones web comunes, ya que lleva la ilusión de la natividad a la perfección:

• Adapta la interfaz a cualquier tamaño de pantalla, eliminando los elementos pequeños.
• Optimiza el rendimiento para dispositivos con recursos limitados: reduce el número de animaciones, utiliza gráficos más simples.

Además, al igual que en el caso de las aplicaciones web comunes, la adaptabilidad del frontend influye mucho en los indicadores de SEO.

Carga progresiva

La carga progresiva de los recursos mejora significativamente el rendimiento y crea la sensación de que la aplicación funciona a una velocidad fulgurante. Los principales principios de la optimización de la carga son:

• Debes mostrar al usuario el contenido principal de la página sin esperar a que se carguen todos los recursos (elementos pequeños de la estructura, scripts, imágenes).
• Es mejor dividir los archivos bundle voluminosos en módulos y cargarlos según sea necesario.
• Los JS y CSS bloquean el renderizado de la página hasta que se cargan completamente. Puedes añadir el atributo defer a JS o media a CSS para retrasar su carga. Además, puedes cargar los módulos JS dinámicamente bajo demanda.
• Las imágenes, especialmente las pesadas y numerosas, deben cargarse después del renderizado de la estructura principal, por ejemplo, a través de JS. Al principio de la carga, es mejor utilizar marcadores de posición en lugar de imágenes.
• Puedes implementar una carga perezosa de las imágenes sólo cuando aparezcan en el área visible, utilizando el atributo loading=”lazy” para la etiqueta img o IntersectionObserver en JS.

Ejemplos de las Mejores Aplicaciones Web Progresivas

Los expertos de Adobe han publicado una selección de las mejores PWA de 2023. Entre los líderes se encuentran:

• Starbucks. El menú y la realización de pedidos están disponibles fuera de línea, el pago se realiza cuando se conecta.
• Uber. Los desarrolladores de Uber han rediseñado completamente su sitio web para que sea progresivo. Como resultado, la PWA tiene un tamaño insignificante (en comparación con la aplicación móvil), puede funcionar en dispositivos antiguos con un rendimiento modesto y una velocidad de conexión baja.
• Twitter Lite. Antes de desarrollar la PWA, Twitter era conocido por su pesadez y su baja velocidad de carga. Twitter Lite aumentó instantáneamente los indicadores de la plataforma: el número de tweets en un 75%, las visitas en un 65%.
• Pinterest. Inicialmente, la plataforma era incómoda de ver en los teléfonos inteligentes y no se caracterizaba por su alta velocidad. El éxito actual de Pinterest se debe en gran medida a que los desarrolladores convirtieron el servicio a tiempo en PWA.
• Tinder. Inicialmente, el servicio de citas solo estaba disponible como aplicación móvil. Sin embargo, la PWA resultó más cómoda para la mayoría de los usuarios: empezaron a escribir más mensajes y se dedicaron a editar sus perfiles con más frecuencia. Como resultado, la base de usuarios del servicio superó rápidamente los 75 millones de personas.
• Trivago. En 2017, el popular servicio de búsqueda de hoteles lanzó la PWA, y los resultados superaron las expectativas más optimistas: la participación aumentó un 150%, y la tasa de conversión alcanzó el 97%.
• Telegram. El Telegram móvil original no se caracterizaba por la tecnología de vanguardia. La creación de la PWA lo cambió todo: la aplicación adquirió una funcionalidad fuera de línea, comenzó a funcionar en conexiones de baja velocidad, y el número de usuarios rápidamente alcanzó los 800 millones de personas.
• Spotify. La plataforma musical lanzó la PWA en 2019 y de inmediato apreció los resultados: el número de transiciones a las cuentas de pago aumentó hasta un 46%, y en 2021 alcanzó el 58,4%. Antes de la PWA, esta cifra no superaba el 26,6%. En 2022, Netflix lanzó una serie sobre la historia de la creación de Spotify: ¿sería la compañía capaz de alcanzar tanta popularidad si no hubiera empezado a atraer a nuevos usuarios con la ayuda de las PWA?
• BMW. Incluso una marca tan reconocible como esta pudo beneficiarse del lanzamiento de la PWA: junto con la multiplicación por cuatro de la velocidad, se produjo una multiplicación por cuatro del número de transiciones desde la página principal a la sección de ventas, la visita al sitio desde los ordenadores de sobremesa aumentó un 49%, y el número de visitas desde dispositivos móviles aumentó un 50%.
• Facebook. Más del 81,8% de los usuarios acceden a esta red social solo desde dispositivos móviles. Por lo tanto, ya en 2019 la empresa proporcionó a sus usuarios, junto con la aplicación móvil, una alternativa cómoda: la PWA, lo que provocó un aumento significativo del rendimiento también para los visitantes de la plataforma desde los ordenadores de sobremesa.
• Forbes. Antes de 2016, el sitio web de la famosa revista era conocido por su interfaz incómoda y su velocidad de carga insoportable. En 2017, los desarrolladores rediseñaron completamente el sitio web de acuerdo con los principales conceptos de las PWA, y desde entonces se carga en 0,8 segundos en los ordenadores de sobremesa y en 2,5 segundos en los teléfonos inteligentes, y Forbes se ha convertido en uno de los medios digitales más importantes.
• Google Maps. Los desarrolladores de Google han creado una versión del servicio que puede funcionar de forma eficaz en dispositivos móviles de baja potencia con baja velocidad de conexión. En cuanto a la funcionalidad, la PWA es inferior a la aplicación móvil, pero todas las funciones principales de Maps (rutas, información sobre empresas, etc.) están disponibles en ella.

Conclusión

Las PWA ofrecen la mejor experiencia de usuario, gracias a la combinación de las capacidades y la funcionalidad de las aplicaciones web con la comodidad y la velocidad de las aplicaciones móviles nativas:

• Aumentan significativamente la participación de los usuarios gracias a la rápida carga de contenido y la facilidad de uso.
• Permiten ahorrar considerablemente en desarrollo y mantenimiento, ya que una sola PWA funciona en muchas plataformas.
• Ayudan a atraer tráfico cualificado, aumentar la conversión y la fidelización de los usuarios.

En general, si aún no has pensado en desarrollar una PWA, ¡es el momento de empezar!