{"id":18094,"date":"2021-03-04T09:45:43","date_gmt":"2021-03-04T07:45:43","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=18094"},"modified":"2024-04-08T11:10:20","modified_gmt":"2024-04-08T09:10:20","slug":"como-crear-una-aplicacion-web-progresiva-pwa-con-liferay","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/como-crear-una-aplicacion-web-progresiva-pwa-con-liferay\/","title":{"rendered":"C\u00f3mo crear una aplicaci\u00f3n web progresiva (PWA) con Liferay"},"content":{"rendered":"

El uso de las tecnolog\u00edas m\u00f3viles ha crecido exponencialmente<\/strong> a lo largo de los \u00faltimos a\u00f1os, lo que ha provocado que cualquier empresa que quiera estar presente en este tipo de entornos digitales (ya sea con su web corporativa p\u00fablica o con la prestaci\u00f3n de cualquier servicio online) se vea en la necesidad de invertir en la transformaci\u00f3n de sus sistemas<\/strong>.<\/p>\n

Para la mayor\u00eda de empresas<\/strong> esta incorporaci\u00f3n en el mundo m\u00f3vil ha podido llevarse a cabo mediante una adaptaci\u00f3n de sus p\u00e1ginas y aplicaciones web<\/strong> bas\u00e1ndose en el uso del dise\u00f1o responsive<\/strong>, que permite aplicar distintos estilos a una misma p\u00e1gina en funci\u00f3n de las caracter\u00edsticas de la ventana en la que se est\u00e1 mostrando.<\/p>\n

Esta soluci\u00f3n es algo sencillo de llevar a cabo<\/strong> y est\u00e1 desvinculada casi por completo del sistema operativo<\/strong> (entorno de escritorio, navegador en un dispositivo m\u00f3vil Android o iPhone, etc.) sobre el que se ejecutar\u00e1 la aplicaci\u00f3n, ya que siempre lo har\u00e1 desde un entorno web mediante el uso de un navegador.<\/p>\n

Sin embargo, otras aplicaciones requieren una interacci\u00f3n mayor<\/strong> con el usuario o con el propio sistema, lo que genera la necesidad del desarrollo de aplicaciones espec\u00edficas para dispositivos m\u00f3viles.<\/p>\n

El problema de las aplicaciones nativas tradicionales<\/strong> es que requieren de una alta cantidad de recursos<\/strong> para su creaci\u00f3n, ya que obliga a llevar a cabo un desarrollo y mantenimiento independiente<\/strong> para cada una de las plataformas en las que se quiera estar presente (dispositivos iPhone o iPad, dispositivos Android, navegadores web, etc.)<\/p>\n

Cuando es necesario disponer de una aplicaci\u00f3n m\u00f3vil<\/strong>, pero evitando todos los costes de desarrollo<\/strong> derivados de la creaci\u00f3n de aplicaciones m\u00f3viles nativas deberemos tener muy cuenta el concepto de Aplicaci\u00f3n web progresiva<\/strong> o PWA.<\/strong><\/p>\n

\u00bfQu\u00e9 es una aplicaci\u00f3n web progresiva?<\/h2>\n

Las aplicaciones web progresivas<\/strong> son un concepto intermedio situado entre una aplicaci\u00f3n web y una aplicaci\u00f3n nativa tradicional<\/strong>.<\/p>\n

Estas aplicaciones se desarrollan y ejecutan como una aplicaci\u00f3n web normal<\/strong> y corriente, pero con el aspecto y posibilidades de interacci\u00f3n<\/strong> propios de las aplicaciones m\u00f3viles desarrolladas de forma nativa<\/strong>.<\/p>\n

Algunas de las caracter\u00edsticas m\u00e1s atractivas de las PWA son la posibilidad de acceder a las mismas desde un icono en el men\u00fa de cualquier dispositivo m\u00f3vil<\/strong>, el env\u00edo de notificaciones<\/strong> al propio dispositivo del usuario o la posibilidad del uso sin conexi\u00f3n<\/strong> a internet de la propia aplicaci\u00f3n.<\/p>\n

Adem\u00e1s, desde recientes actualizaciones de Windows<\/strong>, pueden registrarse como aplicaciones de escritorio<\/strong>, al igual que las descargadas desde el propio Marketplace de Microsoft.<\/p>\n

Liferay como PWA<\/h2>\n

Liferay<\/strong> es en la actualidad una de las herramientas m\u00e1s utilizadas para crear portales<\/strong> <\/a>web de todo tipo (webs corporativas, intranets, portales de servicios de administraci\u00f3n p\u00fablica, etc.)<\/p>\n

Liferay portal<\/strong><\/a> es una herramienta muy potente pero cuya ejecuci\u00f3n se basa en entorno web cl\u00e1sico<\/strong> que debe llevarse a cabo mediante un cliente web como pueden ser Google Chrome o Mozilla Firefox.<\/p>\n

Sin embargo, existe la posibilidad de generar una aplicaci\u00f3n web progresiva en un portal basado en Liferay siguiendo una serie de sencillos pasos que deberemos aplicar sobre nuestro tema de apariencia.<\/p>\n

Modificaciones visuales: el fichero manifest<\/h3>\n

En primer lugar, haremos que nuestro portal basado en Liferay sea visualmente atractivo desde un entorno m\u00f3vil<\/p>\n

Adaptaci\u00f3n responsive de la aplicaci\u00f3n<\/h3>\n

El primer paso ser\u00e1 adaptar el tema de apariencia de nuestro portal<\/strong> basado en Liferay para que se visualice correctamente en cualquier dispositivo<\/strong>.<\/p>\n

Para ello utilizaremos el dise\u00f1o responsive y la metodolog\u00eda mobile-first que prioriza el dise\u00f1o optimizado para dispositivos m\u00f3viles. Al estar Bootstrap incluido por defecto dentro de Liferay, utilizaremos el grid nativo y las distintas caracter\u00edsticas del framework<\/strong> para facilitar esta adaptaci\u00f3n a dispositivos m\u00f3viles.<\/p>\n

\"pwa\"

Dise\u00f1o del portal en desktop<\/em><\/p><\/div>\n

Mediante la utilizaci\u00f3n de las utilidades de Bootstrap minimizamos la cantidad de c\u00f3digo CSS<\/strong> a incluir en el tema para la adaptaci\u00f3n del contenido a dispositivos m\u00f3viles.<\/p>\n

\"pwa

Dise\u00f1o del portal en m\u00f3vil<\/em><\/p><\/div>\n

Generaci\u00f3n del fichero Manifest de la aplicaci\u00f3n<\/h3>\n

El fichero central que da vida a las PWA es el fichero Manifest<\/strong><\/em>, que contendr\u00e1 los metadatos propios de la aplicaci\u00f3n.<\/p>\n

Algunos de los datos definidos en este fichero son el nombre<\/strong>, la descripci\u00f3n<\/strong>, la url de inicio de la aplicaci\u00f3n<\/strong> o el icono con el que se crear\u00e1 el acceso a la misma en los dispositivos m\u00f3viles o entornos Windows.<\/p>\n

Crearemos este fichero en la ruta del tema src > templates > manifest.json<\/strong> e incluiremos los siguientes datos:<\/p>\n