spinner

Desde que Google introdujo las Progressive Web Apps o PWA, las Aplicaciones Progresivas se han convertido en una de las tecnologías emergentes de más rápida implantación de los últimos tiempos. De hecho, empresas como Twitter, Tinder o Forbes son claros ejemplos del gran éxito que ha tenido esta tecnología.

En este post me gustaría explicar cuáles son las ventajas de las PWA, por qué están en auge actualmente y cómo se usan en proyectos de BBVA Next Technologies. ¡Espero que os resulte útil!

Vale pero, antes de nada, ¿qué son las PWA?

Las PWA dan un giro a la web tradicional combinando lo mejor de la Web y lo mejor de las apps. Cumplen una serie de características:
1. Rápidas: Responden rápidamente a las interacciones de los usuarios con animaciones suaves.
2. Progresivas: Permiten al usuario usar cualquier navegador y dispositivo (tablet, escritorio, móvil)
3. Offline: Funcionan sin conexión o con redes de mala calidad.
4. Apps like: Parecen apps por sus interacciones, sus navegaciones y su carga instantánea.
5. Instalables: Los usuarios «conservan» las apps que les resultan más útiles en su pantalla principal
6. Vinculables: Se pueden compartir fácilmente vía URL

A largo plazo, una adopción más amplia de las técnicas PWA significa que, un día, las aplicaciones de smartphones podrían realmente realizarse en web: no se necesitarán SDK para teléfonos o nuevas herramientas de desarrollo y lenguajes, sino será un mundo en el que se puede usar la tecnología web para crear aplicaciones que sean iguales a sus equivalentes nativos.

Algunas técnicas para usar PWA que hacen tu app más interactiva

  • Mejorando el UX con skeletons

Los skeletons son una técnica muy usada hoy en día por la mayoría de los grandes. Facebook, Twitter, Linkedin, Slack, usan esta técnica para hacer que sus aplicaciones den la sensación de que cargan más rápido.

  • Notificando el estado de la red

Otra técnica recomendada por Google en su cookbook es el manejo de errores de red. Notificar al usuario y auto recargar cuando recuperamos la conexión las secciones que no se hubieran podido cargar es clave para dar una buena experiencia.

  • Definiendo un manifiesto

Definir un fichero de manifiesto permite que la web móvil pueda añadirse al escritorio como si de una app se tratara. También hace que se pueda customizar el color de la barra de Chrome, mejorando la experiencia y haciendo que la web parezca más un app.

El caso de la web móvil de BBVA

BBVA se suma a esta lista y cuenta con una web para el móvil que es idéntica a su aplicación nativa. De hecho, su app nativa tiene embebida la web dentro y gran parte de sus funcionalidades son web. En el desarrollo de esta web móvil participamos alrededor de 60 compañeros de BBVA Next Technologies (tanto en el desarrollo de funcionalidades como en integración y despliegue), un equipo que trabaja siempre con la máxima de continuar integrando nuevas funcionalidades en la app para hacerla cada día más innovadora.

En BBVA Next Technologies buscamos constantemente nuevas técnicas para mejorar el rendimiento de la web. Para ello, estamos siempre en un continuo refactor para adoptar todas estas features. Además, para garantizar que siempre cumplimos la calidad, el equipo incluye tests de performance y accesibilidad en todos los desarrollos.

Precisamente, lo que ha hecho que la app de BBVA disponga con mucha rapidez de funcionalidades para los clientes es esta apuesta por el desarrollo web, puesto que con un mismo desarrollo consigue disponibilizar cada funcionalidad en todas las plataformas. Esta rapidez de adaptación y la innovación continua son algunas de las razones que hacen que este año la app de BBVA haya repetido como la mejor del mundo, según la consultora Forrester.

BBVA ha sido capaz de mejorar la carga de sus páginas y ha logrado que su web móvil sea más interactiva aplicando una serie de novedosas técnicas muy comunes en todas las PWA.

¿Cuáles son estas novedades técnicas?

Aplicando lazy-loading

La técnica de lazy-loading consiste en “descargar solo lo que necesitas cuando lo necesitas”. Básicamente la solución que han adoptado consiste en dividir la aplicación en diferentes “secciones” pero con un menú de navegación común. Para conseguirlo, la app de BBVA que está desarrollada en Ember.js ha utilizado un addon llamado “ember-engines” que permite implementar “code-splitting”, una separación de los bundles js, basado en las rutas de la app. Además de separar en distintos bundles la app, la web móvil ha eliminado algunas librerías (por ejemplo librerías de gráficos o las literales traducidos de distintos idiomas) del bundle principal reduciendo así el tamaño y mejorando los tiempos de carga.

Cacheando recursos con Service Workers para cargar más rápido y funcionar offline

La web móvil utiliza Service Workers para precachear todos los recursos y bundles de las rutas que los usuarios visitan habitualmente. Para ello, BBVA está usando la librería Workbox que provee una forma muy fácil de implementar la lógica de las estrategias de cacheo del Service Worker. Por supuesto, también utilizan optimizaciones comunes como es la minificación de código con UglifyJS.

Algunas conclusiones

Es cierto que las aplicaciones web progresivas aún no se usan tanto como las aplicaciones nativas, pero las tendencias indican que en 2019 serán la clave del éxito de un sitio web.

Interfaz app BBVA/Fuente: BBVA

Casi a diario hay nuevas noticias sobre las PWA, una de las últimas es que Google Photos está disponible como PWA. Las empresas deberían observarlas de cerca, ¿os animáis a usar las PWA?

Interfaz BBVA

Ejemplo (datos no reales) de la interfaz de la app de BBVA/Fuente: BBVA

 

Imagen: BBVA.com

Las opiniones vertidas por el autor son enteramente suyas y no siempre representan la opinión de BBVA Next Technologies.

¿Quieres saber que más cosas hacemos en BBVA Next Technologies?

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, brindarle una grata experiencia y mostrar a los usuarios publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando por este sitio web, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información accediendo a nuestra política de cookies aquí.