{"id":6045,"date":"2018-01-31T13:22:03","date_gmt":"2018-01-31T11:22:03","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=6045"},"modified":"2024-01-17T09:14:31","modified_gmt":"2024-01-17T08:14:31","slug":"aplicaciones-web-progresivas-se-define-una-pwa","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/aplicaciones-web-progresivas-se-define-una-pwa\/","title":{"rendered":"Aplicaciones Web Progresivas, \u00bfqu\u00e9 son y c\u00f3mo se define una PWA?"},"content":{"rendered":"<p>Mucho se ha hablado sobre las PWA en los \u00faltimos a\u00f1os: \u00bfqu\u00e9 son? \u00bfc\u00f3mo se define una PWA? \u00bfqu\u00e9 caracteriza una PWA de una web normal?<\/p>\n<p>Tal y como se definen las PWA\u2019s, son \u201cAplicaciones\u201d \u201cWeb\u201d \u201cProgresivas\u201d<\/p>\n<ul>\n<li><strong>Aplicaci\u00f3n:<\/strong> de funcionamiento similar a una app<\/li>\n<li><strong>Web:<\/strong> ejecutables directamente desde el navegador<\/li>\n<li><strong>Progresiva:<\/strong> pueden crecer en contenido y funcionalidades, sin alterar la experiencia de usuario<\/li>\n<\/ul>\n<p>Las PWA en resumen, son aplicaciones ejecutadas directamente en el navegador que tienen un experiencia similar a una aplicaci\u00f3n nativa. Los principales <strong>beneficios de las aplicaciones web progresivas<\/strong> son:<\/p>\n<ul>\n<li>Son ligeras ya que no dejan de ser webs<\/li>\n<li>Son multiplataforma, accesibles desde cualquier dispositivo (ordenador, tablet, m\u00f3vil\u2026)<\/li>\n<li>Son instant\u00e1neas, ya que no hace falta que el usuario se descargue ning\u00fan tipo de aplicaci\u00f3n en el dispositivo<\/li>\n<\/ul>\n<p>Hay que tener cuidado de <strong>no confundir una PWA con una aplicaci\u00f3n h\u00edbrida<\/strong>, a pesar de tener muchas de estas caracter\u00edsticas en com\u00fan. Todo el mundo conocer\u00e1 de sobra las aplicaciones h\u00edbridas, principalmente desarrolladas con Ionic Framework, pero \u00e9stas incrustan la web en una aplicaci\u00f3n nativa, ejecut\u00e1ndose en un entorno nativo y obteniendo funcionalidades que podemos esperar de una aplicaci\u00f3n nativa.<\/p>\n<h2>\u00bfQu\u00e9 diferencia hay entre una aplicaci\u00f3n h\u00edbrida con una PWA?<\/h2>\n<p>Las PWA en esencia son aplicaciones h\u00edbridas, pero ejecutadas directamente en el navegador, con todo lo que ello conlleva (Web APIs, tecnolog\u00edas web, seguridad\u2026).<\/p>\n<p><strong>Es importante crear una experiencia nativa m\u00f3vil<\/strong>, de manera que el usuario olvide que est\u00e1 navegando a trav\u00e9s de una web. Hay que tener en cuenta que no se instala ning\u00fan tipo de aplicaci\u00f3n en el dispositivo, por lo que se debe tener especial cuidado en los tiempos de carga. Es aqu\u00ed donde entran en juego los \u201cService Workers\u201d.<\/p>\n<p>Sin entrar en mucho detalle, <strong>un Service Worker es un script que trabaja en segundo plano, totalmente independiente de nuestra aplicaci\u00f3n, el cual responde a eventos de peticiones<\/strong>, tales como: notificaciones push, cambios en el estado de la conexi\u00f3n etc.. El principal uso que se hace de estos Service Workers es la gesti\u00f3n de una cach\u00e9 de la aplicaci\u00f3n. Como se ha mencionado antes, las PWA\u2019s son muy ligeras al evitar estar en contacto con el sistema nativo, por lo que son f\u00e1cilmente \u201ccacheables\u201d en caso de que no exista conexi\u00f3n a internet.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6051\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/pwa.gif\" alt=\"\" width=\"350\" height=\"350\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-6052\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/pwa-1024x547.jpg\" alt=\"\" width=\"620\" height=\"331\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/pwa-1024x547.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/pwa-300x160.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/pwa-768x411.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/pwa-360x192.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/pwa.jpg 1042w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Todo esto esta muy bien, pero si quiero hacer una aplicaci\u00f3n para m\u00f3viles, \u00bfpor qu\u00e9 no desarrollo una aplicaci\u00f3n nativa\/h\u00edbrida en lugar de una PWA? Pongamos un ejemplo de uso:<\/p>\n<h3>CON APP NATIVA\/H\u00cdBRIDA<\/h3>\n<ul>\n<li>Pablo se encuentra de viaje en el extranjero en pleno centro de la ciudad, con una conexi\u00f3n 3G limitada. Se acerca la hora de comer y Pablo tiene hambre.<\/li>\n<li>Un compa\u00f1ero de viaje le env\u00eda un link para que reserve mesa en su restaurante preferido de la zona a trav\u00e9s de la aplicaci\u00f3n nativa de reserva de restaurantes.<\/li>\n<li>Pablo abre el link, y le aparece un di\u00e1logo para descargar la aplicaci\u00f3n de reserva de restaurantes nativa, sin ella, Pablo no puede hacer nada con ese link.<\/li>\n<li>Pablo acepta, y pulsa sobre \u201cDescargar Aplicaci\u00f3n\u201d.<\/li>\n<li>Pablo tarda 10 minutos en descargar una aplicaci\u00f3n de 43MB para reservar mesa en su restaurante.<\/li>\n<li>Pablo abre la aplicaci\u00f3n.<\/li>\n<li>Pablo debe volver a buscar el restaurante que le ha pasado su compa\u00f1ero, o volver a pulsar el link que le mand\u00f3 su compa\u00f1ero hacer 15 minutos.<\/li>\n<li>Pablo accede a la p\u00e1gina del restaurante y realiza la reserva en el restaurante.<\/li>\n<\/ul>\n<h3>CON PWA<\/h3>\n<ul>\n<li>Pablo se encuentra de viaje en el extranjero en pleno centro de la ciudad, con una conexi\u00f3n 3G limitada. Se acerca la hora de comer y Pablo tiene hambre .<\/li>\n<li>Un compa\u00f1ero de viaje le env\u00eda un link para que reserve mesa en su restaurante preferido de la zona a trav\u00e9s de la PWA de reserva de restaurantes.<\/li>\n<li>Pablo abre el link en su navegador (una web), y realiza su reserva de mesa r\u00e1pidamente sin necesidad de descargar la aplicaci\u00f3n.<\/li>\n<\/ul>\n<p>Hay que destacar que esto no significa que una PWA sea mejor que una Aplicaci\u00f3n Nativa\/H\u00edbrida. Hay casos que una PWA no puede dar respuesta al uso que se va a hacer de la aplicaci\u00f3n, o es necesario funcionalidades que una PWA no tiene. En estos casos habr\u00eda que tener en cuenta el desarrollo de aplicaciones nativas\/h\u00edbridas.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-6054\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/wpa-1-577x1024.png\" alt=\"Estas preparado para continuar con las pwa?\" width=\"577\" height=\"1024\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/wpa-1-577x1024.png 577w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/wpa-1-169x300.png 169w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/wpa-1-360x639.png 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/wpa-1.png 640w\" sizes=\"auto, (max-width: 577px) 100vw, 577px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>\u00bfCon ganas de saber m\u00e1s sobre PWA?<\/h3>\n<p>Puedes ver y probar un amplio abanico de PWA\u2019s creadas por la comunidad tales como juegos, aplicaciones de productividad, tiendas, herramientas, experimentos en Realidad Virtual y mucho m\u00e1s a trav\u00e9s del siguiente enlace.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-6055\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/wpa-2-576x1024.png\" alt=\"wpa ejemplo\" width=\"576\" height=\"1024\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/wpa-2-576x1024.png 576w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/wpa-2-169x300.png 169w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/wpa-2-360x640.png 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2018\/01\/wpa-2.png 750w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>En <a href=\"https:\/\/www.hiberus.com\/mobile\">Hiberus Mobile<\/a> ofrecemos soluciones a medida para todo tipo de plataformas: Android, iOS, aplicaciones h\u00edbridas, desarrollo multiplataforma, aplicaciones web, quioscos digitales, etc. Solicita informaci\u00f3n, estaremos encantados de ayudarte.<\/p>\n        <div class=\"row\">\n            <div class=\"block-cta-form\" style=\"background-color: #003664;\">\n                <div class=\"content-cta-form\">\n                    <div class=\"text-cta-form\">\n                        <p class=\"title-cta-form\">\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de desarrollo de aplicaciones m\u00f3viles?<\/p>\n                        <p>Contacta con nuestro equipo de Mobile<\/p>\n                    <\/div>\n                    <div class=\"form-fields\">\n                        \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f33973-o1\" lang=\"es-ES\" dir=\"ltr\" data-wpcf7-id=\"33973\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/6045#wpcf7-f33973-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulario de contacto\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"33973\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"es_ES\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f33973-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div id=\"responsive-form\" class=\"clearfix\">\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Nombre *\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"apellido\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Apellido *\" value=\"\" type=\"text\" name=\"apellido\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"correo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Correo corporativo *\" value=\"\" type=\"email\" name=\"correo\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"telf-contacto\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Tel\u00e9fono *\" value=\"\" type=\"tel\" name=\"telf-contacto\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"compania\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Compa\u00f1ia *\" value=\"\" type=\"text\" name=\"compania\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"mensaje\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Mensaje *\" name=\"mensaje\"><\/textarea><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"politica\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"politica\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">He le\u00eddo y acepto la <a href=\"https:\/\/www.hiberus.com\/politica\" target=\"_blank\"><u>Pol\u00edtica de privacidad<\/u><\/a><\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"marketing\"><span class=\"wpcf7-form-control wpcf7-acceptance optional\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"marketing\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Me gustar\u00eda recibir comunicaciones de marketing de Hiberus y sobre sus productos, servicios y eventos.<\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Contacta con nosotros\" \/>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div id=\"campos_ocultos\" class=\"hidden\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new1\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new1\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new1\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new2\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new2\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new2\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new3\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new3\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new3\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new4\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new4\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new4\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new_p\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new_p\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new_p\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<!--end responsive-form--><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"<p>Mucho se ha hablado sobre las PWA en los \u00faltimos a\u00f1os: \u00bfqu\u00e9 son? \u00bfc\u00f3mo se define una PWA? \u00bfqu\u00e9 caracteriza una PWA&#8230;<\/p>\n","protected":false},"author":90,"featured_media":6058,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[234,3],"tags":[14,30],"class_list":{"0":"post-6045","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-aplicaciones-moviles","8":"category-negocio-electronico","9":"tag-aplicaciones-multiplataforma","10":"tag-desarrollo-de-aplicaciones-moviles"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/6045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=6045"}],"version-history":[{"count":4,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/6045\/revisions"}],"predecessor-version":[{"id":39611,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/6045\/revisions\/39611"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/6058"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=6045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=6045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=6045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}