Desarrollo de aplicaciones web progresivas: Cómo cocinar PWA en 2022

Cuando se habla de desarrollo web, las Progressive Web Apps son una palabra de moda desde hace tiempo. Pero, ¿se beneficiará tu empresa de seguir el camino de las PWA? Lee cómo y cuándo debes usar y cuándo NO debes usar esta tecnología ahora y en 2022.



Introducción a las PWA

Las aplicaciones web progresivas (PWA) son una tendencia bastante reciente en el desarrollo de aplicaciones web y móviles. Acuñado por el ingeniero de Google Alex Russell en 2015, el término se refiere a las aplicaciones web que utilizan enfoques de diseño “progresivo” con el fin de comportarse y funcionar de manera similar a las aplicaciones nativas. Lo que esto significa específicamente puede no estar perfectamente claro, ya que no hay una definición precisa de lo que hace o no una aplicación web progresiva.

Sin embargo, hay algunas características definitorias que son indicativas de los patrones de diseño PWA. Estos incluyen el uso de ServiceWorkers (scripts de fondo que se ejecutan en el navegador con el fin de proporcionar características como las notificaciones push) y manifiestos de la aplicación (archivos JSON estandarizados que instruyen a la plataforma sobre cómo instalar y gestionar su aplicación). También hay varios temas de diseño comunes que a menudo se señalan como únicos para PWA.



Beneficios e inconvenientes de la PWA

Emplear la tecnología de las aplicaciones web progresivas en el desarrollo de una aplicación tiene muchos beneficios, aunque también hay algunos inconvenientes a tener en cuenta. El principal beneficio del diseño de PWA es que, en su mayoría, es independiente de la plataforma. Esto significa que una app puede desarrollarse utilizando un único código base y desplegarse en varias plataformas diferentes.

Simplificar el desarrollo de esta manera reduce el tiempo y los recursos necesarios para sacar una app al mercado. La independencia de la plataforma, combinada con el hecho de que las PWA son intrínsecamente instalables, facilita el despliegue de una aplicación en múltiples plataformas. Los usuarios pueden descargar e instalar las PWA al igual que cualquier aplicación nativa, en lugar de depender de un navegador para acceder a ellas, lo que hace que la experiencia del usuario sea fluida e intuitiva.

Las PWAs también disfrutan de los beneficios del diseño de sitios web modernos, ya que son responsivas y ligeras. Los navegadores web modernos permiten a los desarrolladores aprovechar las opciones de diseño que reaccionan a los cambios de plataformas y tamaños de pantalla para ofrecer a los usuarios una experiencia consistente. Las bases de código de estas aplicaciones modernizadas son más pequeñas y su capacidad de ejecutarse en un navegador (en lugar de como una aplicación nativa) las hace más ligeras. Una ventaja añadida de las PWA como aplicaciones web diferenciadas es que son descubribles por la indexación de los motores de búsqueda.

Sin embargo, el mayor inconveniente del diseño de las PWA es que existen algunas limitaciones en cuanto a la plataforma y el soporte de hardware. Dado que las PWA se ejecutan en un navegador, no tienen acceso directo a todas las capacidades de una plataforma a las que sí tendría acceso una app nativa construida con el SDK de una plataforma. Algunas plataformas también tienen un soporte restringido para estas apps, aunque el soporte y las capacidades están en constante evolución.



¿Por qué usar PWA?

En definitiva, utilizar el diseño PWA en una aplicación es para aquellos que quieren poner una app en manos de los usuarios de forma rápida y asequible. Este diseño es genial para las startups en fase inicial con fondos limitados que quieren sacar una app MVP al mercado lo antes posible. Pero cualquier empresa que desee aprovechar una tendencia en evolución en el desarrollo de aplicaciones modernas también verá beneficios similares de PWA.



Grandes marcas que utilizan PWA

Las PWA no están pensadas solo para pequeñas empresas y startups con poco dinero. Por el contrario, muchas corporaciones globales están viendo tremendos resultados al cambiar a una estrategia PWA en beneficio de sus usuarios. Una de las principales marcas que ha llamado la atención es Twitter, que diseñó su aplicación Twitter Lite con la PWA en mente. Tras el lanzamiento de Twitter Lite, Twitter vio un aumento del 75% en los tweets, un aumento del 65% en las páginas por sesión y una disminución del 20% en la tasa de rebote.

Forbes y Pinterest también diseñaron PWAs para sus negocios, con Forbes viendo un aumento del 43% en las sesiones y un aumento del 100% en el compromiso. La PWA de Pinterest aportó un 44% de aumento en los ingresos por publicidad impulsada por los usuarios. Estos son sólo algunos ejemplos de empresas que adoptan el diseño PWA en sus apps entre otras marcas reconocidas como Uber y AliExpress que han hecho lo mismo.



PWA comparado con otras tecnologías

Las PWA se comparan más fácilmente con las aplicaciones nativas o con las aplicaciones web, existiendo en algún lugar entre ambas. Pero hay una larga lista de tecnologías específicas que se sitúan en el espectro entre las web y las nativas que también pueden establecer comparaciones con las PWA.



PWA VS NATIVE APPS

Comparar las PWA directamente con la definición general de apps nativas desvela algunas diferencias. A saber, las PWA se construyen con bases de código más ligeras y sencillas (sólo requieren lenguajes web en lugar de frameworks SDK específicos de la plataforma).



PWA VS CROSS-PLATFORM APPS

Cuando se compara con tecnologías más híbridas como React Native, PhoneGap o Flutter, hay ciertos detalles a destacar para las apps multiplataforma. Por ejemplo, React Native está hecho para construir apps nativas multiplataforma y lo consigue con un único código base, sin embargo, suele requerir un conjunto de habilidades más amplio por parte de tu equipo de desarrollo ya que tienen que lidiar con varios controles nativos y plugins que están escritos en diferentes lenguajes como Java u Objective-C (depende de la plataforma).

Las aplicaciones de PhoneGap son algo similar también. Se trata simplemente de aplicaciones web envueltas en un contenedor nativo, que tiene acceso a varias APIs de la plataforma a través de un conjunto de plugins nativos. A pesar de la enorme lista de plugins disponibles, es posible que necesites algo personalizado y tendrás que implementarlo por tu cuenta, de nuevo con la ayuda de desarrolladores de Android e iOS.

Las PWA son mucho más sencillas en este sentido y suelen estar construidas solo en JavaScript, utilizando frameworks modernos como React, Angular y Vue.

En resumen, las PWAs se parecen más a las apps híbridas construidas con otras tecnologías multiplataforma. Lo más probable es que las PWAs sean más baratas en términos de desarrollo y soporte futuro, ya que podría necesitar un equipo más pequeño sin ninguna habilidad específica o única. La desventaja de las PWAs es que están limitadas por las capacidades del navegador y pueden tener un pobre soporte de algunas características principales requeridas para su aplicación.



PWA VS WEB APPS

Cuando se comparan con las aplicaciones web puras, las PWA muestran varias ventajas. Esto se debe a que las aplicaciones web están estrictamente limitadas por las capacidades del navegador. Eso también significa que las aplicaciones web no ofrecen el tipo de instalabilidad que hace que una PWA sea tan conveniente para los usuarios. Aunque pueden ofrecer beneficios similares, como el diseño responsivo y ligero que se ve en muchas aplicaciones de una sola página (SPA), el diferenciador clave es el enfoque estandarizado de una PWA para simular la experiencia nativa.

La PWA también puede compararse con marcos de aplicaciones como Electron y Flutter. Electron es estrictamente un marco de aplicaciones web con desventajas en el tamaño de la aplicación y la seguridad que lo hacen generalmente inadecuado para el desarrollo de PWA. Pero Flutter es más similar a PWA. Tanto PWA como Flutter hacen hincapié en el desarrollo en una única base de código con funcionalidad nativa multiplataforma. Sin embargo, Flutter sólo utiliza el nuevo lenguaje web Dart mientras que una PWA puede ser escrita en cualquier lenguaje, con muchos lenguajes más antiguos que ofrecen más soporte.



Soporte-de-la-pwa-de-las-plataformas-mayores

Una de las cosas más importantes a evaluar sobre PWA es qué tipo de soporte proporcionan las principales plataformas. Mientras que PWA generalmente permite el desarrollo de aplicaciones que son perfectamente capaces de funcionar en cualquier plataforma, hay algunas limitaciones en lo que exactamente las diferentes plataformas soportarán.

Datos de caniuse.com, licencia CC-BY 4.0 



SOPORTE DE PWA EN IOS

Para los dispositivos iOS, el soporte de PWA es algo limitado. Aunque el término “aplicación web progresiva” fue acuñado recientemente por Google, los orígenes de la PWA se remontan al primer iPhone. Antes de que Apple proporcionara un SDK para los dispositivos iOS, las únicas aplicaciones disponibles en el iPhone eran aplicaciones web. Esta es una decisión en la que el propio Steve Jobs insistió mucho.

Por supuesto, a medida que los desarrolladores pedían un flujo de trabajo más consistente Apple acabó lanzando su SDK junto con la App Store. Esta evolución fue acompañada de las notoriamente estrictas regulaciones de Apple para los desarrolladores en torno a la experiencia del usuario y la seguridad de las aplicaciones disponibles en la App Store. Estas regulaciones, lamentablemente, restringieron severamente la capacidad de los desarrolladores para ofrecer PWAs para iOS.

A partir de iOS 11.3, sin embargo, las PWA son compatibles con la plataforma de Apple. Sin embargo, todavía deben estar envueltas en código nativo y distribuidas a través de la tienda de aplicaciones. Esto limita algunos de los beneficios de las PWAs como una base de código simplificada y una fácil instalación.



SOPORTE DE PWA EN ANDROID

Android tiene un soporte PWA mucho más completo. Esto es principalmente gracias al enfoque de código abierto de Android, que da a los desarrolladores la libertad y la flexibilidad para escribir y distribuir aplicaciones como quieran. Android también proporciona a las PWAs acceso a algunas funcionalidades de la plataforma nativa, como las notificaciones push, lo que permite a los desarrolladores ofrecer una experiencia nativa más fluida dentro de sus aplicaciones.



Soporte para PWAs de navegadores

Aunque la mayoría de los navegadores populares soportan PWAs ahora, no hay una compatibilidad del 100%.

Los navegadores que decidieron NO soportar las PWAs son:

  • Firefox de escritorio
  • Explorador de Internet
  • Navegador móvil de Facebook

También hay una advertencia con Safari. Aunque proporciona un soporte básico para las PWA, no se incluyen todas las características. Safari no es compatible con las notificaciones push, por lo que el usuario deberá instalar la app manualmente para añadirla a la pantalla de inicio.

Además, en 2020 el WebKit, el motor de Safari anunció que no van a soportar muchas de las APIs que dan acceso a la funcionalidad nativa. Ejemplos de esas funcionalidades no soportadas son Web Bluetooth, Web MIDI API, Magnetometer API, Web NFC API entre otras. Dicen que es por motivos de privacidad, pero esto dificulta la evolución de las PWAs en iOS.



El estado actual de las PWA en 2021

Las aplicaciones web progresivas son, por naturaleza, una tendencia en evolución. Como tal, los nuevos desarrollos y el soporte añadido por las principales plataformas contribuyen constantemente al crecimiento de las PWA. Aunque la imprecisa definición de PWA dificulta el seguimiento de una cuota de mercado exacta, las estimaciones basadas en Estadísticas web de Chrome sitúan el número actual de cargas de páginas tipo PWA en torno al 19%.

Una encuesta realizada a los responsables del comercio electrónico reveló que el 9% de las empresas de comercio electrónico tenía previsto invertir en aplicaciones web progresivas (PWA) en 2021. Además, el 8% de las empresas de comercio electrónico informaron que ya lo están haciendo, y el 28% de las empresas no tenían planes de invertir en PWA en 2021. 

La investigación sugiere que el valor financiero del mercado de las aplicaciones web progresivas alcanzará un valor de 10.770 millones de dólares en 2027, lo que representa un crecimiento anual de más del 30% de aquí a ese momento. 

El soporte actual para las PWA es bastante bueno aunque existen algunas limitaciones. Todas las plataformas principales, incluyendo iOS, Mac, Android y PC, ofrecen ahora algún nivel de soporte para PWA. Android proporciona el mejor soporte, siendo iOS y Mac los más limitados. El estricto control de Apple sobre las aplicaciones disponibles en su plataforma es el mayor obstáculo para la adopción de PWA en iOS.

Los desarrolladores y propietarios de proyectos que consideren la posibilidad de utilizar PWA en sus propias aplicaciones deben tener en cuenta estas limitaciones. El mercado de las PWA está creciendo constantemente, junto con el soporte de la plataforma, por lo que los primeros en adoptarlas pueden encontrarse por delante de sus competidores. Pero es difícil saber exactamente cuánto tiempo podría durar este crecimiento.

Interesantemente, a principios de este año, Instagram Lite fue reconstruido de PWA a una aplicación nativa de Android. La razón de este cambio de vuelta no está clara, pero hay algunas especulaciones de que Facebook hizo esto para probar su framework interno Bloks.



¿Qué esperar de las PWAs en 2022?El lado positivo es que hay algunas mejoras significativas en el mercado de las PWA. Un desarrollo positivo reciente para las PWAs es una asociación entre Microsoft y Google. Microsoft
anunció recientemente que PWABuilder utilizará la tecnología Bubblewrap de Google. PWABuilder es la herramienta de desarrollo de Microsoft que facilita la escritura de PWAs y Bubblewrap ayuda a los desarrolladores a empaquetar sus aplicaciones para su distribución en la tienda de aplicaciones Google Play.

 

Este anuncio se produjo junto con la introducción de la compatibilidad con nuevas funciones, como los accesos directos nativos a las aplicaciones y las funciones avanzadas de Android, ahora disponibles a través de PWABuilder. Los esfuerzos de colaboración de gigantes tecnológicos como Google y Microsoft son extremadamente prometedores para el futuro de la adopción de PWA.



¿Debes usar las PWA en 2022 y más allá?

La respuesta es SÍ, si tu estrategia de producto requiere una rápida entrada en el mercado y la cobertura de múltiples plataformas con un único código base. Las aplicaciones web progresivas permiten a las empresas de nueva creación desarrollar y distribuir de forma rápida y sencilla una aplicación web progresiva y beneficiarse del mínimo tiempo y dinero necesarios para desplegar la aplicación en caso de recursos limitados. Alentar a los usuarios de la primera vez a volver a visitar la aplicación y conseguir que se comprometan con la ayuda de las notificaciones push y los banners in-app hacen de las PWAs la poderosa herramienta para la implementación de la estrategia de marketing.

Las grandes empresas también pueden beneficiarse de proporcionar valor a sus usuarios con acceso limitado a plataformas de alto rendimiento o que prefieren una experiencia más ágil y ligera. La PWA puede ser una opción para el desarrollo de un software empresarial ligado a una única plataforma seleccionada para beneficiarse de las importantes características nativas soportadas exactamente por esta plataforma.

Otros casos de uso frecuentes para PWA son cuando tu aplicación requiere soporte de modo offline, o necesitas que tu aplicación web heredada, por ejemplo, hecha con React, se rehaga en PWA con el mínimo tiempo en comparación con la construcción de una nueva app desde cero, por ejemplo, en Flutter for Web.



Cuando no debes usar PWA

Si bien existen algunos inconvenientes de las PWA, estos son mínimos y en su mayoría son superados por sus beneficios. La mayor restricción para las PWAs es su limitado soporte en iOS, que obviamente comprende una porción significativa de la cuota de mercado de aplicaciones móviles. Sin embargo, hay cierto apoyo, y la postura cambiante de Apple sobre las PWA en el pasado demuestra que están dispuestos a evolucionar con ellas.

Otra limitación que puede impedirte usar PWA es que tu app no puede ser publicada en la AppStore, sin embargo es fácil listarla en Google Play y ya es posible hacerla vivir en la Microsoft Store.

En MobiDev, comenzamos un proyecto desde la etapa de análisis de negocio para identificar los requisitos clave del producto y ayudar a un propietario de negocio a entender qué requisitos pueden proporcionar el mayor valor para el negocio y qué pila de tecnología se ajusta a los objetivos del proyecto.



Desarrollo de aplicaciones web progresivas en MobiDev

El equipo de ingeniería web de MobiDev ha adquirido una importante experiencia en el desarrollo de aplicaciones web, incluidas las aplicaciones web progresivas, y estamos deseando compartir las mejores prácticas que seguimos:



8 RECOMENDACIONES PARA EL DESARROLLO DE PWA

  • La PWA debe sentirse como una app nativa: es una buena práctica mostrar pantallas de bienvenida durante el inicio de la aplicación, la app debe tener un conjunto de iconos de diferentes tamaños que se utilizarán en la pantalla de inicio como el logotipo de la app y un tema correctamente configurado.
  • Algunos navegadores todavía no tienen soporte completo de manifest.json, por lo que hay que recurrir a las metaetiquetas, por ejemplo, para especificar el tema o los colores de los mosaicos en Safari o Microsoft Edge.
  • Asegúrate siempre de promover la instalación de la app. La instalación de la app o la funcionalidad de “añadir a la pantalla de inicio” junto con las notificaciones push son las características asesinas que mejoran drásticamente la tasa de conversión y el reenganche de los usuarios.
  • Si tu app necesita el soporte del modo offline o simplemente quieres utilizar estrategias de caché mejoradas para reducir el tráfico de red y disminuir el tiempo de carga de la página – te recomendaríamos que echaras un vistazo al conjunto oficial de librerías de Google, que está específicamente diseñado para resolver estos problemas y facilitar el desarrollo de la PWA.
  • Cuando la nueva versión de la app PWA sale a la luz debemos avisar al usuario de las actualizaciones disponibles. Podemos conseguirlo mostrando banners o notificaciones personalizadas dentro de la aplicación, que inciten al usuario a actualizar la aplicación. Ten en cuenta que el ServiceWorker no se actualizará automáticamente hasta que se cierren todas las ventanas o pestañas de la aplicación que estén utilizando la versión anterior. Si no mostramos el banner, el usuario podría no enterarse de las actualizaciones hasta pasado un tiempo.
  • Se trata de una actualización de la aplicación.
  • Como decíamos, es posible que algunos usuarios no actualicen la aplicación de inmediato y estén usando las versiones antiguas. En este caso, es absolutamente crucial contar con APIs compatibles con versiones anteriores en el servidor.
  • Asegúrate de probar a fondo el código, especialmente la lógica de inicialización de la app. En caso de que la aplicación se bloquee durante su inicialización y aún no haya establecido una suscripción para las actualizaciones entrantes de ServiceWorker, el dispositivo del usuario podría quedarse con una versión de la aplicación con errores hasta que se reinstale manualmente. Se recomienda crear siempre algunos fallbacks para anular automáticamente el registro del ServiceWorker activo en caso de errores de aplicación no manejados – en este caso podrás entregar rápidamente las correcciones al usuario final.
  • Las PWAs deben ser rápidas. Puedes probar y depurar el rendimiento utilizando Lighthouse y otras Chrome DevTools.
    Por supuesto, estamos siguiendo el resto de las mejores prácticas aplicables a un desarrollo de una app web normal:
  • Crear aplicaciones web responsivas y adaptativas que funcionen correctamente en todas las plataformas sin importar si es móvil, tableta o escritorio.
  • Sigue el estilo de código establecido en el equipo, o establécelo tú mismo configurando el git hook pre-commit que invocará linters y formateadores de código.
  • Escriba código estrictamente tipado si es posible (por ejemplo, utilizando TypeScript).
  • Diseñar aplicaciones basadas en componentes. Desacoplar la interfaz de usuario y la lógica de negocio. Crear componentes sencillos y reutilizables que sean fáciles de componer en una UI compleja
  • Asimismo, crear un código estrictamente tipográfico si es posible, por ejemplo, con TypeScript.
  • ¡Y por supuesto realizar revisiones de código y ayudarse mutuamente!
 
Categorías : # webdev

Deja una respuesta

Tu dirección de correo electrónico no será publicada.