Aplicación web progresiva

Una aplicación web progresiva ( PWA ), o aplicación web progresiva , es un tipo de aplicación web que se puede instalar en un dispositivo como una aplicación independiente . ^{[ 1 ]} Las PWA se instalan utilizando la caché sin conexión del navegador web del dispositivo . ^{[ 2 ]}

Las PWA se introdujeron en 2016 como una alternativa a las aplicaciones nativas (específicas para cada dispositivo), con la ventaja de que no requieren empaquetado ni distribución por separado para diferentes plataformas. Se pueden usar en una variedad de sistemas, incluyendo dispositivos de escritorio y móviles . Publicar la aplicación en sistemas de distribución digital, como la App Store de Apple , Google Play o la Microsoft Store en Windows, es opcional. ^{[ 2 ]}

Debido a que una PWA se entrega en forma de página web o sitio web construido con tecnologías web comunes como HTML , CSS , JavaScript y WebAssembly , ^{[ 3 ]} puede funcionar en cualquier plataforma con un navegador compatible con PWA. A partir de 2025, las funciones de PWA son compatibles en diversos grados con Google Chrome , Apple Safari , Brave , Firefox para Android , Microsoft Edge , ^{[ 4 ] [ 5 ]} y Firefox para Windows. ^{[ 6 ]}

En la Conferencia Mundial de Desarrolladores de Apple de 2007, Steve Jobs anunció que el iPhone "ejecutaría aplicaciones creadas con los estándares de Internet Web 2.0". ^{[ 7 ]} No se requería un kit de desarrollo de software (SDK), y las aplicaciones se integrarían completamente en el dispositivo a través del motor del navegador Safari . ^{[ 8 ]} Este modelo se cambió posteriormente a la App Store , como una forma de apaciguar a los desarrolladores frustrados. ^{[ 9 ]} En octubre de 2007, Jobs anunció que se lanzaría un SDK al año siguiente. ^{[ 8 ]} Como resultado, aunque Apple continuó dando soporte a las aplicaciones web, la gran mayoría de las aplicaciones de iOS se trasladaron a la App Store.

A principios de la década de 2010, las páginas web dinámicas permitieron utilizar tecnologías web para crear aplicaciones web interactivas . El diseño web adaptable y la flexibilidad en el tamaño de la pantalla que ofrece han hecho que el desarrollo de PWA sea más accesible. Las continuas mejoras en HTML, CSS y JavaScript permitieron que las aplicaciones web incorporaran mayores niveles de interactividad, haciendo posibles experiencias similares a las nativas en un sitio web. ^{[ 10 ]}

En 2013, Mozilla lanzó Firefox OS . Su objetivo era ser un sistema operativo de código abierto para ejecutar aplicaciones web como aplicaciones nativas en dispositivos móviles. Firefox OS se basaba en el motor de renderizado Gecko con una interfaz de usuario llamada Gaia, escrita en HTML5. El desarrollo de Firefox OS finalizó en 2016, ^{[ 11 ]} y el proyecto se abandonó por completo en 2017, ^{[ 12 ]} aunque una bifurcación de Firefox OS se utilizó como base para KaiOS , una plataforma para teléfonos básicos . ^{[ 13 ]}

En 2015, la diseñadora Frances Berriman y el ingeniero de Google Chrome Alex Russell acuñaron el término "aplicaciones web progresivas" ^{[ 14 ]} para describir aplicaciones que aprovechan las nuevas características compatibles con los navegadores modernos, incluidos los service workers y los manifiestos de aplicaciones web , que permiten a los usuarios actualizar aplicaciones web a aplicaciones web progresivas en su sistema operativo nativo (SO). Google luego hizo esfuerzos significativos para promover el desarrollo de PWA para Android. ^{[ 15 ] [ 16 ]} Firefox introdujo soporte para service workers en 2016, y Microsoft Edge y Apple Safari siguieron en 2018, ^{[ 17 ] [ 15 ]} haciendo que los service workers estuvieran disponibles en todos los sistemas principales.

Para 2019, las PWA eran compatibles con las versiones de escritorio de algunos navegadores, incluidos Microsoft Edge ^{[ 18 ]} (en Windows ) y Google Chrome ^{[ 19 ]} (en Windows, macOS , ChromeOS y Linux ).

En diciembre de 2020, Firefox para escritorio abandonó la implementación de PWA (específicamente, eliminó la configuración prototipo de " navegador específico del sitio " que había estado disponible como una función experimental). Un arquitecto de Firefox señaló: "La señal que esperamos estar enviando es que el soporte para PWA no llegará a Firefox para escritorio en un futuro cercano". ^{[ 20 ]} Mozilla admite PWA en Android y planea seguir admitiéndolo. ^{[ 21 ]} La versión 143.0 de Firefox, lanzada en septiembre de 2025, agregó soporte para PWA en Windows. ^{[ 6 ]}

Las aplicaciones web progresivas están diseñadas para funcionar en cualquier navegador que cumpla con los estándares web adecuados . Al igual que con otras soluciones multiplataforma, el objetivo es ayudar a los desarrolladores a crear aplicaciones multiplataforma con mayor facilidad que con las aplicaciones nativas. ^{[ 15 ]} Las aplicaciones web progresivas emplean la estrategia de desarrollo web de mejora progresiva .

Algunas aplicaciones web progresivas utilizan un enfoque arquitectónico denominado Modelo de Envoltura de Aplicación. ^{[ 25 ]} En este modelo, los service workers almacenan la Interfaz de Usuario Básica o " envoltura " de la aplicación web de diseño web responsivo en la caché sin conexión del navegador . Este modelo permite que las PWA mantengan un uso similar al nativo con o sin conectividad web. Esto puede mejorar el tiempo de carga, al proporcionar un marco estático inicial , un diseño o arquitectura en el que el contenido se puede cargar de forma progresiva y dinámica. ^{[ 26 ]}

Los criterios técnicos básicos para que un sitio sea considerado una aplicación web progresiva y, por lo tanto, capaz de ser instalada por navegadores fueron descritos por Russell en 2016 ^{[ 27 ]} y actualizados desde entonces: ^{[ 28 ] [ 29 ]}

• Proviene de un origen seguro. Se sirve a través de TLS y no contiene contenido mixto activo. Las aplicaciones web progresivas deben servirse mediante HTTPS para garantizar la privacidad del usuario, la seguridad y la autenticidad del contenido.
• Registra un service worker con un controlador de obtención. Las aplicaciones web progresivas deben usar service workers para crear cachés de contenido programables. A diferencia de la caché web HTTP regular , que almacena el contenido después del primer uso y luego se basa en varias heurísticas para adivinar cuándo el contenido ya no es necesario, las cachés programables pueden precargar explícitamente el contenido antes de que se use por primera vez, descartándolo explícitamente cuando ya no es necesario. ^{[ 30 ]} Este requisito ayuda a que las páginas sean accesibles sin conexión o en redes de baja calidad.
• Referencia a un manifiesto de aplicación web . El manifiesto debe contener al menos las cinco propiedades clave: nameo short_name, start_url, y display(con un valor de standalone, fullscreeno minimal-ui), y (con versiones de 192 px y 512 px). La información contenida en el manifiesto hace que las PWA sean fácilmente compartibles a través de una URL, detectables por los motores de búsqueda y facilita los procedimientos de instalación complejos (pero las PWA aún pueden aparecer en una tienda de aplicacionesicons de terceros ). ^{[ 31 ]} Además, las PWA admiten interacciones y navegación al estilo de las aplicaciones nativas, incluyendo ser añadidas a la pantalla de inicio , mostrar pantallas de bienvenida , etc.

Existen muchas tecnologías comúnmente utilizadas para crear aplicaciones web progresivas. Una aplicación web se considera una PWA si cumple con los criterios de instalación, es decir, puede funcionar sin conexión y agregarse a la pantalla de inicio del dispositivo. Para cumplir con esta definición, todas las PWA requieren como mínimo un manifiesto y un service worker. ^{[ 32 ] [ 33 ] [ 34 ]} Se pueden utilizar otras tecnologías para almacenar datos, comunicarse con servidores o ejecutar código.

El manifiesto de la aplicación web ^{[ 35 ]} es una especificación del Consorcio World Wide Web (W3C) que define un manifiesto basado en JSON (generalmente etiquetado como manifest.json) ^{[ 31 ]} para proporcionar a los desarrolladores un lugar centralizado para colocar metadatos asociados con una aplicación web, que incluyen:

• El nombre de la aplicación web
• Enlaces a los iconos o imágenes de la aplicación web
• La URL preferida para iniciar o abrir la aplicación web
• Los datos de configuración de la aplicación web
• Orientación predeterminada de la aplicación web
• La opción para configurar el modo de visualización, por ejemplo, pantalla completa.

Estos metadatos son cruciales para que una aplicación se agregue a la pantalla de inicio o aparezca en la lista junto con las aplicaciones nativas.

iOS Safari implementa parcialmente los manifiestos, mientras que la mayor parte de los metadatos de las PWA se pueden definir mediante extensiones específicas de Apple para las etiquetas meta. Estas etiquetas permiten a los desarrolladores habilitar la visualización a pantalla completa, definir iconos y pantallas de inicio, y especificar un nombre para la aplicación. ^{[ 36 ] [ 37 ]}

Un service worker es un web worker que implementa un proxy de red programable capaz de responder a las solicitudes web/HTTP del documento principal. Puede comprobar la disponibilidad de un servidor remoto, almacenar en caché el contenido cuando este esté disponible y servirlo posteriormente al documento. Los service workers, al igual que otros web workers, funcionan de forma independiente del contexto del documento principal. Pueden gestionar notificaciones push y sincronizar datos en segundo plano, almacenar en caché o recuperar solicitudes de recursos, interceptar solicitudes de red y recibir actualizaciones centralizadas independientemente del documento que las registró, incluso cuando este no esté cargado. ^{[ 38 ]}

Los service workers pasan por un ciclo de vida de tres pasos: Registro, Instalación y Activación. El Registro implica indicar al navegador la ubicación del service worker para su instalación. La Instalación se produce cuando no hay ningún service worker instalado en el navegador para la aplicación web, o si hay una actualización del service worker. La Activación se produce cuando todas las páginas de la PWA están cerradas, de modo que no haya conflictos entre la versión anterior y la actualizada. El ciclo de vida también ayuda a mantener la coherencia al cambiar entre versiones de un service worker, ya que solo un service worker puede estar activo para un dominio. ^{[ 38 ]}

WebAssembly permite ejecutar código precompilado en un navegador web a una velocidad casi nativa. ^{[ 39 ]} De este modo, se pueden añadir bibliotecas escritas en lenguajes como C a las aplicaciones web. Anunciado en 2015 y lanzado por primera vez en marzo de 2017, WebAssembly se convirtió en una recomendación del W3C el 5 de diciembre de 2019 ^{[ 40 ] [ 41 ]} y recibió el premio Programming Languages ​​Software Award de ACM SIGPLAN en 2021. ^{[ 42 ]}

Los contextos de ejecución de las aplicaciones web progresivas se descargan siempre que sea posible, por lo que estas aplicaciones necesitan almacenar la mayor parte de su estado interno a largo plazo (datos de usuario, recursos de la aplicación cargados dinámicamente) de una de las siguientes maneras:

Almacenamiento web

El almacenamiento web es una API estándar de WHATWG que permite el almacenamiento de clave-valor en navegadores modernos. La API consta de dos objetos: sessionStorage(que permite el almacenamiento solo durante la sesión, que se borra al finalizar la sesión del navegador) y localStorage(que permite el almacenamiento que persiste entre sesiones). ^{[ 43 ]}

API de base de datos indexada

La API de base de datos indexada es una API de base de datos estándar del W3C disponible en todos los navegadores principales. La API es compatible con los navegadores modernos y permite almacenar objetos JSON y cualquier estructura representable como una cadena. ^{[ 44 ]} La API de base de datos indexada se puede utilizar con una biblioteca envolvente que proporciona construcciones adicionales a su alrededor.

En 2017, Twitter lanzó Twitter Lite, una alternativa PWA a las aplicaciones nativas oficiales de Android e iOS . Según Twitter, Twitter Lite consumía solo entre el 1 % y el 3 % del tamaño de las aplicaciones nativas. ^{[ 45 ]} Starbucks ofrece una PWA que es un 99,84 % más pequeña que su aplicación equivalente para iOS. Tras implementar su PWA, Starbucks duplicó el número de pedidos en línea, con usuarios de escritorio realizando pedidos a un ritmo similar al de los usuarios de la aplicación móvil. ^{[ 46 ]}

Un estudio de 2018 publicado por Forbes reveló que los usuarios de la PWA de Pinterest pasaron un 40 % más de tiempo en el sitio en comparación con el sitio web móvil anterior. Los ingresos publicitarios también aumentaron un 44 %, y las interacciones principales un 60 %. ^{[ 47 ]} Flipkart observó que el 60 % de los clientes que habían desinstalado su aplicación nativa volvieron a usar la PWA de Flipkart. Lancôme experimentó una disminución del 84 % en el tiempo hasta que la página se vuelve interactiva, lo que resultó en un aumento del 17 % en las conversiones y un aumento del 53 % en las sesiones móviles en iOS con su PWA. ^{[ 48 ]}

Dado que una PWA no requiere empaquetado ni distribución por separado para diferentes plataformas y está disponible para los usuarios a través de la web, no es necesario que los desarrolladores la publiquen en sistemas de distribución digital como la App Store de Apple , Google Play , Microsoft Store o Samsung Galaxy Store . Las principales tiendas de aplicaciones admiten la publicación de PWA en distintos grados. ^{[ 2 ]} Google Play, Microsoft Store, ^{[ 49 ]} y Samsung Galaxy Store admiten PWA, pero la App Store de Apple no. Microsoft Store publica automáticamente algunas PWA que cumplen los requisitos (incluso sin solicitudes de los autores de la aplicación) después de descubrirlas mediante la indexación de Bing . ^{[ 50 ]}

• Google Lighthouse , una herramienta de auditoría de código abierto para PWA desarrollada por Google.

• Índice de estándares del Grupo de Trabajo de Aplicaciones Web