{"id":37,"date":"2019-04-12T15:00:29","date_gmt":"2019-04-12T20:00:29","guid":{"rendered":"http:\/\/tesseractspace.com\/blog\/?p=37"},"modified":"2019-04-12T17:45:00","modified_gmt":"2019-04-12T22:45:00","slug":"pwa-progresive-web-apps","status":"publish","type":"post","link":"https:\/\/www.tesseractspace.com\/blog\/pwa-progresive-web-apps\/","title":{"rendered":"Progressive Web Apps: la evoluci\u00f3n de las apps m\u00f3viles"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Durante a\u00f1os los sitios web ha sido relegados en los dispositivos&nbsp;m\u00f3viles sobre las <em>apps<\/em> nativas debido a problemas de rendimiento, compatibilidad y sobre todo, de conectividad. Las aplicaciones web progresivas (<em>Progressive Web Apps o PWA<\/em>) prometen resolver estos problemas.<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Las <strong><a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\">Progressive Web Apps<\/a><\/strong><a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\"> o <\/a><strong><a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\">PWA<\/a><\/strong> son un acercamiento al desarrollo de <em>apps<\/em> para m\u00f3viles que combinan lo mejor de la web y lo mejor de las apps nativas. Estas nuevas <em>web apps<\/em>&nbsp;son \u00fatiles para sus usuarios desde la primera visita en un navegador web, sin necesidad de instalar nada m\u00e1s.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"279\" src=\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/pwa-app-icon.jpg?resize=640%2C279&#038;ssl=1\" alt=\"\" class=\"wp-image-398\" srcset=\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/pwa-app-icon.jpg?w=970&amp;ssl=1 970w, https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/pwa-app-icon.jpg?resize=300%2C131&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/pwa-app-icon.jpg?resize=768%2C335&amp;ssl=1 768w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption>Las PWA son sitios web que se utiliza en un smartphone como una app nativa.<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A medida que el usuario crea una relaci\u00f3n con la <em>app<\/em> de manera progresiva, \u00e9sta se vuelve m\u00e1s poderosa y \u00fatil: carga r\u00e1pidamente, incluso en redes lentas o cuando el dispositivo est\u00e1 desconectado, puede enviar notificaciones, tiene un icono en la pantalla del m\u00f3vil y funciona a pantalla completa.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/arquitectura-PWA.png?resize=640%2C360&#038;ssl=1\" alt=\"Arquitectura PWA\" class=\"wp-image-397\" srcset=\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/arquitectura-PWA.png?w=960&amp;ssl=1 960w, https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/arquitectura-PWA.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/arquitectura-PWA.png?resize=768%2C432&amp;ssl=1 768w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption>Arquitectura de una Progressive Web App<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Una <strong>Progressive Web App<\/strong> tiene las siguiente caracter\u00edsticas:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Est\u00e1ndar<\/strong> &#8211; utiliza la misma plataforma y tecnolog\u00eda que se utiliza para crear p\u00e1ginas web: HTML, CSS y Javascript.<\/li><li><strong>Progresiva (\u00a1obvio!)<\/strong> &#8211; funciona para todos los usuarios, independientemente de cu\u00e1l navegador web o sistema operativo utilice, porque est\u00e1 constru\u00edda para mejorar progresivamente&nbsp;desde el principio.<\/li><li><strong>Responsiva<\/strong> &#8211; se ajusta a cualquier resoluci\u00f3n y formato de pantalla: escritorio, m\u00f3viles, tabletas, televisiones o&nbsp;lo que sea.<\/li><li><strong>Independiente de la conexi\u00f3n<\/strong>&nbsp;&#8211; est\u00e1 mejorada con <a href=\"https:\/\/www.w3.org\/TR\/service-workers\/\"><em>service workers<\/em><\/a>&nbsp;para funcionar sin conexi\u00f3n o en redes lentas con conexiones intermitentes.<\/li><li><strong>Como una app nativa<\/strong> &#8211; el usuario la usar\u00e1 como una <em>app<\/em>, con soporte para navegaci\u00f3n e interacci\u00f3n con gestos.<\/li><li><strong>Fresca<\/strong>&nbsp;&#8211; siempre estar\u00e1 actualizada gracias al proceso autom\u00e1tico de actualizaci\u00f3n del <em>service worker<\/em>.<\/li><li><strong>Segura<\/strong>&nbsp;&#8211; trabaja sobre <a href=\"https:\/\/es.wikipedia.org\/wiki\/Hypertext_Transfer_Protocol_Secure\">HTTPS<\/a> para prevenir que alguien intercepte datos y para asegurarse de que el contenido no ha sido manipulado por otros.<\/li><li><strong>Descubrible<\/strong>&nbsp;&#8211; es identificable como una \u00abaplicaci\u00f3n\u00bb gracias al <a href=\"https:\/\/www.w3.org\/TR\/appmanifest\/\">manifiesto de la W3C <\/a>y al registro de funciones del&nbsp;<em>service worker<\/em>, permitiendo a los buscadores web encontrarlas.<\/li><li><strong>Interactiva<\/strong>&nbsp;&#8211; hace f\u00e1cil interactuar con ella incluso cuando est\u00e1 cerrada con caracter\u00edsticas como notificaciones tipo <em>push<\/em>.<\/li><li><strong>Instalable<\/strong> &#8211; le permite a sus usuarios crear accesos directos en la pantalla&nbsp;de su tel\u00e9fono sin necesidad de una tienda de <em>apps<\/em>.<\/li><li><strong>Enlazable<\/strong> &#8211; se pueden compartir f\u00e1cilmente usando su direcci\u00f3n en la web (URL) y no requiere procesos de instalaci\u00f3n complejos.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/revista.uxnights.com\/wp-content\/uploads\/2016\/05\/Screenshot-from-2016-05-31-13-51-41.png?w=640\" alt=\"Apps web progresivas\" class=\"wp-image-557\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Ya existen casos de empresas que han comenzado a implementar <strong>Progressive Web Apps<\/strong><em>,<\/em> como <strong><a href=\"https:\/\/www.diggintravel.com\/5-remarkable-travel-marketing-trends-for-2017\/airberlin-pwa\/\">AirBerlin<\/a><\/strong>&nbsp;o <strong><a href=\"https:\/\/developers.google.com\/web\/showcase\/2016\/flipkart#tldr\">Flipkart<\/a><\/strong>&nbsp;con resultados bien documentados en mejoras de experiencia de usuario, retenci\u00f3n y conversi\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Introducing Flipkart Lite - The progressive mobile web app\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/MxTaDhwJDLg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption>Video de la presentaci\u00f3n de la Progressive Web App de Flipkart<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Google<\/strong> cre\u00f3 <a href=\"https:\/\/codelabs.developers.google.com\/codelabs\/your-first-pwapp\/#1\">un taller para aprender a&nbsp;crear aplicaciones web progresivas desde cero<\/a>, incluyendo consideraciones de dise\u00f1o y detalles de implementaci\u00f3n para asegurar que tus <em>web apps<\/em> cumplan todos los principios que mencion\u00e9 antes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>PWA<\/strong> es compatible con <strong><a href=\"https:\/\/www.tesseractspace.com\/blog\/amp-accelerated-mobile-pages\/\">AMP (Accelerated Mobile Pages)<\/a> <\/strong>y <a href=\"https:\/\/www.tesseractspace.com\/blog\/webp-una-alternativa-a-jpg-y-png\/\">las im\u00e1genes en formato <\/a><strong><a href=\"https:\/\/www.tesseractspace.com\/blog\/webp-una-alternativa-a-jpg-y-png\/\">WebP<\/a><\/strong> para acelerar a\u00fan m\u00e1s la carga de las p\u00e1ginas en la primera visita, que sumado a las capacidades de funci\u00f3n <em>offline<\/em> de <strong>PWA <\/strong>ayuda a mejorar la experiencia de los usuarios y su <em>engagement<\/em> al <a href=\"https:\/\/www.tesseractspace.com\/blog\/tiempo-de-carga-en-la-experiencia-del-usuario\/\">eliminar el factor de tiempo de carga<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El gestor de auditor\u00edas para sitios web <strong><a href=\"https:\/\/www.tesseractspace.com\/blog\/auditorias-de-desempeno-para-sitios-web-con-lighthouse\/\">Lighthouse<\/a><\/strong><a href=\"https:\/\/www.tesseractspace.com\/blog\/auditorias-de-desempeno-para-sitios-web-con-lighthouse\/\"> en <\/a><strong><a href=\"https:\/\/www.tesseractspace.com\/blog\/auditorias-de-desempeno-para-sitios-web-con-lighthouse\/\">Google Chrome<\/a><\/strong><a href=\"https:\/\/www.tesseractspace.com\/blog\/auditorias-de-desempeno-para-sitios-web-con-lighthouse\/\"> incluye un an\u00e1lisis para evaluar las capacidades y el desempe\u00f1o de <\/a><strong><a href=\"https:\/\/www.tesseractspace.com\/blog\/auditorias-de-desempeno-para-sitios-web-con-lighthouse\/\">Progressive Web Apps<\/a><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Las&nbsp;<strong>Progressive Web Apps<\/strong>&nbsp;son una oportunidad&nbsp;para regresar a la web su importancia dentro de dispositivos m\u00f3viles -o&nbsp;en cualquier otro dispositivo-, y de romper los problemas y&nbsp;&nbsp;dependencias de compatibilidad&nbsp;que tienen las <em>apps<\/em> nativas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los sitios web ha sido relegados en m\u00f3viles debido a problemas de rendimiento, compatibilidad y de conectividad. Las aplicaciones web progresivas prometen resolver estos problemas.<\/p>\n","protected":false},"author":1,"featured_media":38,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[70],"tags":[39,21,40,38],"class_list":["post-37","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia","tag-css","tag-google","tag-javascript","tag-moviles","entry"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/21799411-24714132.jpg?fit=1200%2C886&ssl=1","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":7,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":401,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions\/401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media\/38"}],"wp:attachment":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}