Apps web progresivas

Una app web progresiva (AWP) es una app web que usa mejoras progresivas para proporcionar a los usuarios una experiencia más confiable, utiliza capacidades nuevas para proporcionar una experiencia más integrada y se puede instalar. Además, como es una app web, puede llegar a cualquier persona, en cualquier lugar y en cualquier dispositivo, todo con una sola base de código. Una vez instalada, una AWP se verá como cualquier otra app, específicamente:

  • Tiene un ícono en la pantalla principal, el selector de aplicaciones, el panel de lanzamiento o el menú de inicio.
  • Aparece cuando buscas apps en el dispositivo.
  • Se abre en una ventana independiente, completamente separada de la interfaz de usuario de un navegador.
  • Tiene acceso a niveles más altos de integración con el SO, por ejemplo, el manejo de URLs o la personalización de la barra del título.
  • Funciona sin conexión.

La plataforma web

La Web es una plataforma increíble. Su combinación de universalidad en dispositivos y sistemas operativos, su modelo de seguridad centrado en el usuario y el hecho de que ninguna empresa controle su especificación o implementación la convierten en una plataforma potente para la entrega de software.

Combinado con la vinculación inherente de la Web, es posible realizar búsquedas en ella y compartir lo que encuentres con cualquier persona, en cualquier lugar. Cada vez que visitas un sitio web, se muestra la versión más reciente que implementó el publicador, y tu experiencia en ese sitio puede ser tan temporal o permanente como desees.

Las aplicaciones web pueden llegar a cualquier persona, en cualquier lugar y en cualquier dispositivo con una sola base de código. Para los desarrolladores, la Web también ofrece un mecanismo de implementación transparente y directo. No es necesario empaquetar, revisar contenido adicional ni retrasar las actualizaciones. Los usuarios siempre obtienen la versión más reciente cuando visitan tu app. Con nuevas capacidades y técnicas, una app web ahora puede permitirte interactuar o ver contenido, incluso sin conexión, un obstáculo imposible de superar hace unos años.

Apps específicas de la plataforma

Las apps específicas de una plataforma, tanto en dispositivos móviles como en computadoras, se conocen por ser enriquecidas y confiables. Están siempre presentes en las pantallas principales, las estaciones de carga y las barras de tareas. Funcionan independientemente de la conexión de red y se inician en su propia experiencia independiente. Pueden leer y escribir archivos del sistema de archivos local, acceder al hardware conectado a través de USB, serie o Bluetooth, y también interactuar con los datos almacenados en tus dispositivos, como contactos y eventos de calendario. En las aplicaciones específicas de la plataforma, puedes tomar fotos, reproducir canciones que aparecen en la pantalla principal o controlar la reproducción de contenido multimedia mientras estás en otra app. Estas aplicaciones se sienten como parte del dispositivo en el que se ejecutan.

Un desafío de las apps específicas de la plataforma es que no son compatibles con varias plataformas y dispositivos, por lo que no es fácil, o incluso posible, mover una app para Android a iOS o de iOS a Windows o ChromeOS sin crear una app nueva desde cero.

Lo mejor de ambos mundos

Si piensas en las apps de plataforma y las apps web en términos de capacidades y alcance, las apps de plataforma representan lo mejor de las capacidades, mientras que las apps web representan lo mejor del alcance. Las apps web progresivas se encuentran en la intersección de las capacidades de las apps de plataforma y el alcance de las apps web. Una Progressive Web App incluye funciones de ambos mundos.

Web

  • Vinculabilidad
  • Accesible de forma predeterminada
  • Ubicua
  • Fácil de implementar
  • Fácil de actualizar
  • Cualquier persona puede publicar

Apps de plataforma

  • Compatibilidad con el uso sin conexión
  • Alto rendimiento
  • Integración de dispositivos
  • Experiencia independiente
  • Ícono de instalación
  • Enriquecida y confiable

La adopción tiene sus ventajas

Hulu, un servicio de transmisión de video en EE.UU., creó una versión de app web progresiva de su experiencia para reemplazar sus apps para computadoras de escritorio, que tenían opiniones y un uso deficientes. Como se compartió en Google I/O 2019, un desarrollador podría investigar e implementar esta experiencia desde su aplicación web existente en dos semanas.

En cinco meses, el 96% de los usuarios de su app heredada adoptó la AWP, con un aumento del 27% en las visitas recurrentes y un aumento del 5.5% en la participación. Debido a que se encuentra en el selector y en las barras de tareas, es más fácil regresar a las AWP que si solo estuvieran en una pestaña.

JD.ID, una plataforma de comercio electrónico de Indonesia que ofrece servicios de entrega para muchos productos, quería expandir su presencia en línea enfocándose en el rendimiento y una experiencia sólida independiente de la red para su AWP. Con esta experiencia mejorada, aumentaron su porcentaje de conversiones general en dispositivos móviles en un 53%, en un 200% para los usuarios que instalaron la aplicación y en un 26% para los usuarios activos por día.

Clipchamp es un editor de video en línea integrado en el navegador y de escritorio que permite a cualquier persona contar historias que vale la pena compartir en video. Observaron una retención de usuarios un 9% más alta con su AWP en comparación con los usuarios de su aplicación estándar para computadoras de escritorio y vieron que las instalaciones de la AWP aumentaron a una tasa del 97% cada mes en los primeros cinco meses de lanzamiento.

Gravit Designer de Corel Corporation es una herramienta de diseño vectorial potente de clase de escritorio que ofrece contenido a decenas de miles de usuarios activos a diario que demandan software de ilustración vectorial rico, asequible y accesible. Desde que agregaron una AWP como opción de instalación para los usuarios, observaron que los usuarios de AWP son un 24% más activos, que la AWP representa un 31% más de usuarios recurrentes y que los usuarios de AWP tienen 2.5 veces más probabilidades de comprar Gravit Designer PRO, en comparación con sus otras plataformas y opciones de instalación.

El cambio de juego de las transmisiones

Un excelente ejemplo del poder de las apps web progresivas es la industria de las plataformas de transmisión, incluidos los juegos en la nube y la computación remota. Desde 2021, la mayoría de los proveedores de juegos en la nube lanzaron apps web progresivas, que te permiten jugar juegos de consola desde cualquier dispositivo y solo con un navegador o una instalación de PWA: iPhone, Android, iPad, laptops, Macs o PCs. Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now y BlueStacks X ofrecen soluciones de juegos en la nube a través del navegador como AWP. Todos proporcionan una gran experiencia con un rendimiento cercano al nativo en todas las plataformas gracias a tecnologías web, como WebRTC, WebAssembly y las APIs de GamePad.

Desafíos

Ahora que abordamos las ventajas de usar la plataforma web para publicar AWP, también es importante que conozcas los desafíos que podrías enfrentar.

Compatibilidad entre navegadores

Apple es una empresa fundamental para el mundo multidispositivo, ya que es propietaria de iOS, iPadOS, macOS y Safari. Si bien Apple nunca usó el término AWP en público, desde 2018, admite las tecnologías para que una AWP se pueda instalar y usar sin conexión en Safari para iPhones y iPads.

Sin embargo, la implementación de Apple de las especificaciones de la AWP no tiene muchas funciones que poseen otros navegadores, en particular los navegadores con la tecnología del motor Chromium.

En el medio, también tenemos Firefox y su motor Gecko con implementaciones que incluyen más especificaciones de AWP en Android y menos capacidades de instalación en computadoras de escritorio.

Entre las limitaciones, se incluyen la falta de notificaciones push, las APIs de integración (como Web Bluetooth o WebNFC) y las técnicas de promoción de la instalación que ayuden a los usuarios a saber que pueden instalar el sitio web actual para obtener una experiencia en la app. Además, hay varios errores con las funciones implementadas.

Al igual que con todo el desarrollo web, probar la experiencia en todas las plataformas es obligatorio cuando se lanza la PWA y cuando se lanza una versión nueva y principal del navegador o el SO. Siempre debes proporcionar soluciones de resguardo o experiencias alternativas cuando una función no esté disponible.

Reconocimiento de AWP

Como desarrollador de AWP, es probable que te encuentres con un problema de conocimiento, tanto en el lado de la empresa como en el de los usuarios. Algunos propietarios de empresas no conocerán las AWP o tendrán ideas erróneas sobre el poder y los desafíos de las apps web progresivas.

Cuando publicas una AWP, tu siguiente desafío es asegurarte de que los usuarios comprendan que el sitio web se puede instalar, lo que lleva a una experiencia de app instalada.

El desafío de la instalación es más significativo en algunas plataformas, como iOS y iPadOS, y, a veces, los diseñadores de UX incluyen pantallas que le explican al usuario cómo instalar la app.

Compatibilidad

Debes recordar que una app web progresiva es solo una app web, por lo que el contenido y los servicios se ejecutan de acuerdo con las especificaciones y los protocolos estándar. Por lo tanto, técnicamente una AWP se ejecuta en todos los lugares en los que se ejecute la web; no necesitas que la plataforma sea compatible con ninguna "especificación de AWP".

Sin embargo, cuando hablamos de AWP y compatibilidad, por lo general, pensamos en las capacidades para traspasar los límites del navegador y de los contextos solo en línea: instalación de íconos y soporte sin conexión.

Además de la compatibilidad con la plataforma web clásica, verifiquemos la compatibilidad con la funcionalidad básica de la app, como la instalación de íconos y las capacidades sin conexión.

    97 %

    Navegadores compatibles con el uso sin conexión

    88 %

    Los usuarios web pueden instalar una AWP

Datos de StatCounter y Can I Use.

Computadoras de escritorio y laptops

En un mundo de dispositivos de varios factores, es difícil saber qué es un dispositivo de escritorio. Sin embargo, al menos desde el punto de vista del sistema operativo, estos navegadores y tiendas son compatibles con la instalación de AWP y las funciones sin conexión:

Windows 10 y 11
Google Chrome (a partir de la versión 73), Microsoft Edge (a partir de la versión 79), Microsoft Store
ChromeOS
Navegador Chrome integrado (a partir de la versión 72) y Play Store (a partir de la versión 85)
macOS, Linux y Windows 7 y 8.x
Google Chrome (a partir de la versión 73), Microsoft Edge

En el siguiente video, el usuario instala una AWP desde el navegador en una computadora de escritorio y, luego, accede a ella como cualquier otra app con su ventana independiente.

Dispositivos móviles

En el caso de los teléfonos celulares y las tablets, una app web progresiva se puede instalar con capacidades sin conexión mediante los siguientes navegadores y tiendas de aplicaciones:

iOS y iPadOS
Navegadores de terceros (desde iOS/iPadOS 16.4), Safari (desde iOS 11.3), AppStore (desde iOS/iPadOS 14 con algunas limitaciones), configuración móvil para la distribución empresarial.
Android
Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, navegador Huawei, Baidu, UCWeb, Play Store (a partir de la versión 72 con Google Chrome instalado o navegadores compatibles con TWA), Galaxy Store, iframe de Play administrado para distribución empresarial

En el siguiente video, el usuario instala una AWP desde el navegador en un dispositivo móvil con el diálogo del navegador y también con el menú Agregar a la pantalla principal.

Otros dispositivos

Algunos otros dispositivos pequeños admiten AWP, como consolas de juegos (Xbox con Microsoft Store) o dispositivos XR (Microsoft Hololens, planes para Oculus de Facebook). Sin embargo, el resto de los dispositivos con un navegador no suelen aceptar las AWP, incluidos los siguientes:

  • Consolas de juegos
  • Smart TVs
  • Relojes inteligentes
  • Autos

Tu AWP siempre funcionará en el navegador de todos los dispositivos con sus limitaciones específicas. Esta capacidad de funcionar en muchos dispositivos te permite crear recorridos multidispositivos, en los que el usuario puede iniciar una tarea en un dispositivo y completarla en otro, con datos sincronizados entre ellos, con la misma app implementada.

Recursos