{"id":10240,"date":"2020-08-04T08:00:31","date_gmt":"2020-08-04T06:00:31","guid":{"rendered":"http:\/\/192.168.20.3\/?p=10240"},"modified":"2024-12-11T15:10:22","modified_gmt":"2024-12-11T14:10:22","slug":"sapui5-pwa-progressive-web-applications","status":"publish","type":"post","link":"https:\/\/orekait.com\/es\/sapui5-pwa-progressive-web-applications\/","title":{"rendered":"SAPUI5 &#038; PWA<br><span class=\"font-300\">Progressive Web Applications<\/span>"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_row admin_label=&#8221;Imagen principal&#8221; _builder_version=&#8221;4.16&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_image src=&#8221;https:\/\/orekait.com\/wp-content\/uploads\/2020\/08\/SAP-UI5-PWA.png&#8221; alt=&#8221;cloud-public&#8221; title_text=&#8221;SAP-UI5-PWA&#8221; admin_label=&#8221;Imagen principal&#8221; module_class=&#8221;post-img&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Cuerpo&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text admin_label=&#8221;Texto&#8221; _builder_version=&#8221;4.25.2&#8243; header_2_font_size=&#8221;24px&#8221; header_3_font_size=&#8221;20px&#8221; header_4_font_size=&#8221;17px&#8221; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; width=&#8221;%22630%22&#8243; height=&#8221;%22307%22&#8243; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; content__hover_enabled=&#8221;off|hover&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p>Las\u00a0<strong>Aplicaciones Web Progresivas (PWA)<\/strong>\u00a0son un tipo de\u00a0<strong>aplicaciones web basadas en una tecnolog\u00eda novedosa de alta calidad de experiencia de usuario<\/strong>\u00a0que permiten ser instaladas y utilizadas como una aplicaci\u00f3n nativa. Con el fin de integrar estas caracter\u00edsticas para su uso en aplicaciones web de negocio SAP,<strong>\u00a0se ha desarrollado una peque\u00f1a aplicaci\u00f3n SAPUI5\u00a0<\/strong>progresiva de muestra para probar su utilidad, pero primero\u2026<\/p>\n<h2>\u00bfC\u00f3mo funciona una Aplicaci\u00f3n Web Progresiva?<\/h2>\n<p>Las<strong>\u00a0PWA necesitan ser r\u00e1pidas en la carga de la aplicaci\u00f3n\u00a0<\/strong>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\u00edncrona los recursos necesarios para la aplicaci\u00f3n.<\/p>\n<p>Por otro lado, deben de estar\u00a0<strong>pensadas con la mentalidad \u201coffline-first\u201d<\/strong>\u00a0(Sin conexi\u00f3n primero), y deben de dar alguna clase de experiencia o feedback sin conexi\u00f3n al usuario que las use.<\/p>\n<p>Por \u00faltimo, son instalables en el dispositivo del usuario, ya sea en escritorio o en m\u00f3vil, y tienen que comportarse como una aplicaci\u00f3n nativa lo har\u00eda.<\/p>\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10249 size-full\" src=\"https:\/\/orekait.com\/wp-content\/uploads\/2020\/08\/image001.png\" alt=\"\" width=\"106\" height=\"127\" \/><br \/><figcaption>\u00a0Icono de la aplicaci\u00f3n en el escritorio<\/figcaption><\/figure>\n<\/div>\n<p>Para que el navegador las reconozca como PWA,<strong>\u00a0las aplicaciones deben de contar con un archivo manifest.json<\/strong>, lo que para el caso de nuestras aplicaciones SAPUI5 no es un problema porque basta con a\u00f1adir las l\u00edneas requeridas al archivo con el que cuentan las aplicaciones UI5 desde la versi\u00f3n 1.30<\/p>\n<h2>Aplicaciones SAP UI5 Progresivas<\/h2>\n<p>Las aplicaciones SAPUI5 progresivas, tambi\u00e9n son instalables en el cliente (navegador), pero se conectan a SAP, que act\u00faa en el papel de base de datos desde la que se consultan y tratan los datos continuamente y necesita de conexi\u00f3n constante para ello. Utilizarlas junto a la PWA, permite que acepten peque\u00f1as ca\u00eddas de la red, permitiendo al usuario seguir usando la aplicaci\u00f3n con normalidad, sincronizando los datos una vez se recupere la conexi\u00f3n. Tambi\u00e9n 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.<\/p>\n<h2>Aplicaci\u00f3n Scrum de Oreka<\/h2>\n<p>De cara a mostrar la funcionalidad de una aplicaci\u00f3n PWA SAPUI5, se ha desarrollado un piloto de aplicaci\u00f3n. Barajando las posibilidades y teniendo en cuenta lo anteriormente descrito, nos hemos decantado por una aplicaci\u00f3n que ofrecer\u00e1 a nuestros equipos una forma m\u00e1s flexible de organizarse siguiendo la metodolog\u00eda SCRUM.<\/p>\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10253 \" src=\"https:\/\/orekait.com\/wp-content\/uploads\/2020\/08\/image002.png\" alt=\"\" width=\"833\" height=\"383\" \/><br \/><figcaption>Aplicaci\u00f3n en el navegador<\/figcaption><\/figure>\n<\/div>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10257 \" src=\"https:\/\/orekait.com\/wp-content\/uploads\/2020\/08\/image004.png\" alt=\"\" width=\"835\" height=\"563\" \/><br \/><figcaption>Aplicaci\u00f3n ejecut\u00e1ndose instalada<\/figcaption><\/figure>\n<p>Este piloto se trata de una aplicaci\u00f3n 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\u00fan est\u00e1n por planificar. En cuanto a caracter\u00edsticas PWA, destacamos los siguientes aspectos:<\/p>\n<ul>\n<li>Para lidiar con la precarga de los archivos de la aplicaci\u00f3n, se ha utilizado Grunt, una potente herramienta que permite la creaci\u00f3n de un archivo que precarga los archivos para poder usarse sin conexi\u00f3n. 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\u00e1 que crear un archivo Gruntfile, para que se encargue de crear el Component-preload.js, el archivo que contendr\u00e1 los componentes de la aplicaci\u00f3n.<\/li>\n<\/ul>\n<ul>\n<li>Para la l\u00f3gica del Service Worker,<a href=\"https:\/\/developers.google.com\/web\/tools\/workbox\" target=\"_blank\" rel=\"noreferrer noopener\">\u00a0se ha usado Workbox<\/a>, que simplifica la creaci\u00f3n de los cach\u00e9s de recursos.<\/li>\n<\/ul>\n<p>Hay que cumplir ciertos requerimientos m\u00ednimos para que los navegadores las clasifiquen como PWA. \u00c9stos requerimientos se pueden consultar en la<a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/checklist,\" target=\"_blank\" rel=\"noreferrer noopener\">\u00a0lista de Google sobre PWA<\/a>\u00a0pero los m\u00ednimos y principales son:<\/p>\n<ul>\n<li>El sitio web utiliza el protocolo HTTPS<\/li>\n<li>Las p\u00e1ginas son responsivas en tablets y dispositivos moviles<\/li>\n<li>Todas las URLs de la app cargan offline<\/li>\n<li>Proveer de metadatos necesarios para la instalaci\u00f3n de la app<\/li>\n<li>Primera carga r\u00e1pida hasta en 3G<\/li>\n<li>Multinavegador<\/li>\n<li>Las transiciones entre p\u00e1ginas no se bloquean<\/li>\n<li>Cada p\u00e1gina tiene una URL<\/li>\n<\/ul>\n<p>Sin lugar a dudas las\u00a0<strong>PWA son una alternativa a tener en cuenta a la hora de desarrollar aplicaciones de negocio SAP\u00a0<\/strong>multiplataforma. En futuras publicaciones os ense\u00f1aremos m\u00e1s detalles sobre este tipo de aplicaciones y su uso en combinaci\u00f3n con SAPUI5.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;M\u00e1s informaci\u00f3n&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\"morado\">M\u00e1s informaci\u00f3n:<\/p>\n<p>[\/et_pb_text][et_pb_button button_url=&#8221;https:\/\/orekait.com\/es\/area-personalizacion&#8221; button_text=&#8221;M\u00e1s informaci\u00f3n&#8221; module_class=&#8221;entrada-btn&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#8156EA&#8221; button_bg_color=&#8221;RGBA(255,255,255,0)&#8221; button_border_color=&#8221;#8156EA&#8221; button_border_radius=&#8221;30px&#8221; button_font=&#8221;Plus Jakarta Sans|600|||||||&#8221; button_icon=&#8221;&#x24;||divi||400&#8243; button_icon_color=&#8221;#8156EA&#8221; button_on_hover=&#8221;off&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; button_text_color__hover_enabled=&#8221;on|desktop&#8221; button_text_color__hover=&#8221;#8156EA&#8221; button_bg_color__hover_enabled=&#8221;on|hover&#8221; button_bg_color__hover=&#8221;#8156EA&#8221; button_bg_enable_color__hover=&#8221;on&#8221; button_icon_color__hover_enabled=&#8221;on|hover&#8221; button_icon_color__hover=&#8221;#ffffff&#8221; url_new_window=&#8221;on&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_button][et_pb_divider show_divider=&#8221;off&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||40px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;Noticias relacionadas titulo&#8221; module_id=&#8221;fondo-articulos&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#f7f7f7&#8243; width=&#8221;100%&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_divider show_divider=&#8221;off&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;RGBA(255,255,255,0)&#8221; custom_margin=&#8221;||40px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][et_pb_heading title=&#8221;Quizas te pueda interesar&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; title_level=&#8221;h2&#8243; title_text_align=&#8221;center&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_divider show_divider=&#8221;off&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||30px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Noticias relacionadas&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; custom_margin=&#8221;-150px||||false|false&#8221; custom_margin_tablet=&#8221;0px||||false|false&#8221; custom_margin_phone=&#8221;0px||||false|false&#8221; custom_margin_last_edited=&#8221;on|desktop&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_blog fullwidth=&#8221;off&#8221; posts_number=&#8221;3&#8243; include_categories=&#8221;current&#8221; show_author=&#8221;off&#8221; show_date=&#8221;off&#8221; show_pagination=&#8221;off&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_blog][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las\u00a0Aplicaciones Web Progresivas (PWA)\u00a0son un tipo de\u00a0aplicaciones web basadas en una tecnolog\u00eda novedosa de alta calidad de experiencia de usuario\u00a0que permiten ser instaladas y utilizadas como una aplicaci\u00f3n nativa. Con el fin de integrar estas caracter\u00edsticas para su uso en aplicaciones web de negocio SAP,\u00a0se ha desarrollado una peque\u00f1a aplicaci\u00f3n SAPUI5\u00a0progresiva de muestra para probar [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":10243,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"Lorem ipsum dolor sit amet consectetur adipiscing elit congue montes, imperdiet taciti erat elementum fermentum sem ante ultrices ridiculus, sagittis sociis egestas quisque ac semper quis odio. Aenean hendrerit ac metus dis nascetur aliquet mollis integer, rutrum vel laoreet posuere proin sagittis luctus est, tempus duis nisl ultrices parturient tempor praesent. Dignissim curabitur nascetur pellentesque augue fringilla pulvinar eros, tempus fames vehicula maecenas cubilia id, rutrum euismod integer ut scelerisque mus.\r\n\r\nVivamus auctor odio aenean rhoncus natoque dictum purus, volutpat pellentesque laoreet ridiculus consequat nisi varius euismod, augue platea convallis curae magnis taciti. Imperdiet nibh curabitur quisque orci consequat aenean pellentesque, cubilia duis senectus felis sed posuere tortor, magnis enim diam a odio sociis. Enim tellus nisl nec molestie augue luctus tempor habitant, nunc dictumst phasellus volutpat sem facilisis taciti, habitasse laoreet at turpis vel fermentum vulputate.","_et_gb_content_width":"","footnotes":""},"categories":[52,51],"tags":[],"class_list":["post-10240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sapui5","category-user-experience-integracion"],"_links":{"self":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/10240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/comments?post=10240"}],"version-history":[{"count":5,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/10240\/revisions"}],"predecessor-version":[{"id":21856,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/10240\/revisions\/21856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media\/10243"}],"wp:attachment":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media?parent=10240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/categories?post=10240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/tags?post=10240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}