Las Aplicaciones Web Progresivas (PWA) son un tipo de aplicaciones web basadas en una tecnología novedosa de alta calidad de experiencia de usuario que permiten ser instaladas y utilizadas como una aplicación nativa. Con el fin de integrar estas características para su uso en aplicaciones web de negocio SAP, se ha desarrollado una pequeña aplicación SAPUI5 progresiva de muestra para probar su utilidad, pero primero…

¿Cómo funciona una Aplicación Web Progresiva?

Las PWA necesitan ser rápidas en la carga de la aplicación y dar una experiencia de usuario estable y constante todas las veces que se use. Para ello, se utilizan los Service Workers, que se encargan de cargar de forma asíncrona los recursos necesarios para la aplicación.

Por otro lado, deben de estar pensadas con la mentalidad “offline-first” (Sin conexión primero), y deben de dar alguna clase de experiencia o feedback sin conexión al usuario que las use.

Por último, son instalables en el dispositivo del usuario, ya sea en escritorio o en móvil, y tienen que comportarse como una aplicación nativa lo haría.

 Icono de la aplicación en el escritorio

Para que el navegador las reconozca como PWA, las aplicaciones deben de contar con un archivo manifest.json, lo que para el caso de nuestras aplicaciones SAPUI5 no es un problema porque basta con añadir las líneas requeridas al archivo con el que cuentan las aplicaciones UI5 desde la versión 1.30

Aplicaciones SAP UI5 Progresivas

Las aplicaciones SAPUI5 progresivas, también son instalables en el cliente (navegador), pero se conectan a SAP, que actúa en el papel de base de datos desde la que se consultan y tratan los datos continuamente y necesita de conexión constante para ello. Utilizarlas junto a la PWA, permite que acepten pequeñas caídas de la red, permitiendo al usuario seguir usando la aplicación con normalidad, sincronizando los datos una vez se recupere la conexión. También pueden ser usado para aplicaciones de uso constante de consulta de datos que, agilizaran su uso con la cualidad de instalarse en cualquier dispositivo que tenga acceso a la base de datos.

Aplicación Scrum de Oreka

De cara a mostrar la funcionalidad de una aplicación PWA SAPUI5, se ha desarrollado un piloto de aplicación. Barajando las posibilidades y teniendo en cuenta lo anteriormente descrito, nos hemos decantado por una aplicación que ofrecerá a nuestros equipos una forma más flexible de organizarse siguiendo la metodología SCRUM.

Aplicación en el navegador
app scrum 2
Aplicación ejecutándose instalada

Este piloto se trata de una aplicación que permite a los usuarios crear tareas, darles un valor, un responsable y un color de cliente, y moverlas entre los diferentes estados que pueden tener. Permite ocultar columnas individuales y un backlog, para proyectos que aún están por planificar. En cuanto a características PWA, destacamos los siguientes aspectos:

  • Para lidiar con la precarga de los archivos de la aplicación, se ha utilizado Grunt, una potente herramienta que permite la creación de un archivo que precarga los archivos para poder usarse sin conexión. Para poder utilizar Grunt es necesario tener instalado Node.js, pues se utiliza su gestor de paquetes, npm, para instalar Grunt. Una vez hecho esto, habrá que crear un archivo Gruntfile, para que se encargue de crear el Component-preload.js, el archivo que contendrá los componentes de la aplicación. Más información sobre Grunt y Node.js.
  • Para la lógica del Service Worker, se ha usado Workbox, que simplifica la creación de los cachés de recursos.

Hay que cumplir ciertos requerimientos mínimos para que los navegadores las clasifiquen como PWA. Éstos requerimientos se pueden consultar en la lista de Google sobre PWA pero los mínimos y principales son:

  • El sitio web utiliza el protocolo HTTPS
  • Las páginas son responsivas en tablets y dispositivos moviles
  • Todas las URLs de la app cargan offline
  • Proveer de metadatos necesarios para la instalación de la app
  • Primera carga rápida hasta en 3G
  • Multinavegador
  • Las transiciones entre páginas no se bloquean
  • Cada página tiene una URL

Sin lugar a dudas las PWA son una alternativa a tener en cuenta a la hora de desarrollar aplicaciones de negocio SAP multiplataforma. En futuras publicaciones os enseñaremos más detalles sobre este tipo de aplicaciones y su uso en combinación con SAPUI5.