{"id":21334,"date":"2019-10-08T14:50:52","date_gmt":"2019-10-08T12:50:52","guid":{"rendered":"https:\/\/clientes.ignaciosantiago.com\/new\/pwa-wordpress\/"},"modified":"2019-10-08T14:50:52","modified_gmt":"2019-10-08T12:50:52","slug":"pwa-wordpress","status":"publish","type":"post","link":"https:\/\/clientes.ignaciosantiago.com\/new\/pwa-wordpress\/","title":{"rendered":"Qu\u00e9 Es PWA y C\u00f3mo Convertir Tu Web en App [+PLUGINS]"},"content":{"rendered":"<p>[fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_tocp=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb]<\/p>\n<p>\u00bfHas o\u00eddo hablar de <strong>PWA<\/strong> pero no terminas de tener claro del todo? \u00bfEst\u00e1s buscando la manera de <strong>aplicar las ventajas de las apps a tu web de WordPress<\/strong>? \u00a1Est\u00e1s en el sitio correcto! Es una realidad, los <strong>smartphones<\/strong> ya son parte de tu vida (se podr\u00eda decir que son una extensi\u00f3n del cuerpo \u00bfverdad?) y, con ellos, las <strong>aplicaciones m\u00f3viles<\/strong>. \u00a1Pi\u00e9nsalo! Para comprar en tu tienda de ropa favorita, para hacer un pedido de comida, para reservar una cena en un restaurante, etc, son cientos las cosas que haces a trav\u00e9s de tu tel\u00e9fono m\u00f3vil inteligente. Las apps son uno m\u00e1s, por lo que <strong>las PWA se van abriendo camino<\/strong> (se trata de <strong>convertir tu web en una app<\/strong>). En esta gu\u00eda te quiero explicar qu\u00e9 son, las ventajas que ofrecen a tu sitio web y los plugins con los que puedes <strong>convertir tu WordPress en una Aplicaci\u00f3n Web Progresiva<\/strong>.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-72683\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/07\/pwa-progressive-web-app-aplicacion-web-progresiva-que-son-ventajas-plugins-wordpress.jpg\" alt=\"pwa progressive web app aplicacion web progresiva que son ventajas plugins wordpress\" width=\"1200\" height=\"600\" \/><\/p>\n<p>Son muchas las empresas y negocios que ya han visto un gran futuro en las apps como herramienta de <strong>marketing m\u00f3vil<\/strong> y est\u00e1n apostando por ellas.\u00a0Atr\u00e1s queda el dise\u00f1o web responsive como gran idea pero que, sin embargo, no obtuvo los resultados que se esperaba. A pesar de que<strong> adaptar las p\u00e1ginas a diferentes dispositivos m\u00f3viles<\/strong> parec\u00eda ser un gran avance, a la hora de la verdad, muchas de las p\u00e1ginas web, blogs y tiendas online que han apostado por un dise\u00f1o adaptativo se han tenido que enfrentar a graves problemas de compatibilidad (entre navegadores web) y con ello a una muy <strong>mala experiencia m\u00f3vil<\/strong>. Pero las PWA nacen para ofrecer una soluci\u00f3n alternativa, con el objetivo de <strong>ofrecer una mejor experiencia de usuario<\/strong> (incluso cuando no tienes conexi\u00f3n a Internet).<\/p>\n<p>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p><a name=\"que-es\"><\/a>Qu\u00e9 es una PWA, c\u00f3mo funciona y para qu\u00e9 sirve<\/p>\n<p>[\/fusion_title][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb content_alignment_medium=\u00bb\u00bb content_alignment_small=\u00bb\u00bb content_alignment=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb font_size=\u00bb\u00bb fusion_font_family_text_font=\u00bb\u00bb fusion_font_variant_text_font=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb text_color=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p>Lo primero que debes entender es <a href=\"https:\/\/scoreapps.com\/es\/pwa\/\" target=\"_blank\" rel=\"noopener noreferrer\">qu\u00e9 es una PWA<\/a> o, lo que es lo mismo, <strong>Progressive Web App<\/strong> o <strong>Aplicaci\u00f3n Web Progresiva<\/strong>. De manera muy sencilla se podr\u00eda decir que una PWA es la suma de las mejores caracter\u00edsticas de las apps nativas y las p\u00e1ginas web. Difuminan de alguna manera las barreras que pueden darse entre una aplicaci\u00f3n nativa y un sitio web pero seleccionando <strong>lo mejor de cada una de ellas<\/strong>. En 2015, la dise\u00f1adora <strong>Frances Berriman<\/strong> junto al ingeniero de Google Chrome <strong>Alex Russell<\/strong>, dieron vida al t\u00e9rmino <strong>Progressive Web Apps<\/strong>. Con \u00e9l describ\u00edan las aplicaciones que utilizaban y aprovechaban las caracter\u00edsticas de los navegadores m\u00e1s actuales.<\/p>\n<p>Pero muchas de estas tecnolog\u00edas ya exist\u00edan antes incluso de que Berriman y Russell acu\u00f1asen el t\u00e9rmino, aunque lo m\u00e1s novedoso vino a ra\u00edz de que otras plataformas fuesen respaldadas por Google o Mozilla. Las Progressive Web App han evolucionado de la tecnolog\u00eda web basada en los \u00ab<strong>services workers<\/strong>\u00ab. \u00bfEsto qu\u00e9 quiere decir? Pues que las PWA<strong> ejecutan las funciones en segundo plano<\/strong>, incluso cuando el navegador del ordenador o dispositivo m\u00f3vil no est\u00e1 abierto. Y es que las PWA surgieron con la \u00fanica intenci\u00f3n de <a href=\"https:\/\/ignaciosantiago.com\/como-mejorar-rendimiento-wordpress\" target=\"_blank\" rel=\"noopener noreferrer\">optimizar el rendimiento<\/a> de cualquier sitio web (incluidas las instalaciones WordPress, en las que me voy a centrar) y poder <strong>adaptarlas a cualquier tipo de dispositivo m\u00f3vil<\/strong>. Al igual que las apps nativas, \u00e9stas est\u00e1n desarrolladas con c\u00f3digo HTML, CSS y Javascript.<\/p>\n<p>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb3&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p>Qu\u00e9 papel juegan las PWA en una estrategia de marketing m\u00f3vil<\/p>\n<p>[\/fusion_title][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb content_alignment_medium=\u00bb\u00bb content_alignment_small=\u00bb\u00bb content_alignment=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb font_size=\u00bb\u00bb fusion_font_family_text_font=\u00bb\u00bb fusion_font_variant_text_font=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb text_color=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p>Gracias a la<strong> facilidad de ser compartida<\/strong>, las PWA se han convertido en una estrategia de marketing imprescindible para cualquier negocio (motivo de ello es la ayuda que proporciona al <a href=\"https:\/\/ignaciosantiago.com\/guia-posicionamiento-en-google-sin-penalizacion\" target=\"_blank\" rel=\"noopener noreferrer\">posicionamiento SEO<\/a>). Al igual que con una <a href=\"https:\/\/scoreapps.com\/es\/\" target=\"_blank\" rel=\"noopener noreferrer\">app m\u00f3vil<\/a> nativa, debes tener planificada una <strong>estrategia de lanzamiento<\/strong> tanto \u00abpre\u00bb como \u00abpost\u00bb para as\u00ed <strong>maximizar el n\u00famero de descargas y de interacciones<\/strong>. Primero de todo, coge una agenda o crea un documento online donde puedas dejar reflejado y por escrito en qu\u00e9 punto est\u00e1s en cada momento o en cada una de las fases (te servir\u00e1 de ayuda para poder revisar algunos elementos m\u00e1s adelante).<\/p>\n<p>Si vas a lanzar una PWA tienes que <strong>generar expectaci\u00f3n en los usuarios<\/strong>, ya que tienen que desear tenerla en sus smartphones. Difunde el estreno en todas tus redes sociales y, cuantas m\u00e1s personas sepan que vas a lanzar tu aplicaci\u00f3n web progresiva, m\u00e1s posibilidades de que las descarguen tendr\u00e1s. Imagina que un peque\u00f1o negocio (un restaurante, una peluquer\u00eda, un gimnasio, etc.) va a lanzar una PWA. Podr\u00eda preparar unos flyers para repartir a los clientes en el local cuando lo visiten. En ese folleto puede a\u00f1adir un c\u00f3digo QR para que que los clientes lo escaneen y en segundos <strong>tengan la PWA instalada en sus tel\u00e9fonos m\u00f3viles<\/strong>.<\/p>\n<p>La mejor manera de incitar la descarga es <strong>saber transmitir el valor<\/strong> que tiene que lo hagan y los beneficios que obtendr\u00e1n. Si los usuarios no ven el valor, la importancia que tiene que lo hagan, lo que van a obtener si lo hacen o lo que van a perder si no la descargan, no lo har\u00e1n. Por otro lado, \u00bfPor qu\u00e9 no organizar un evento de lanzamiento? Esto tambi\u00e9n puede ser una gran estrategia de prelanzamiento. Por ejemplo, con un c\u00f3ctel de bienvenida o el acceso a un sorteo presencial en la celebraci\u00f3n del evento. Te recomiendo que hagas <strong>uso de la creatividad y la innovaci\u00f3n<\/strong>. La competencia es muy grande y cuanto m\u00e1s original seas y m\u00e1s te diferencies de tus competidores, m\u00e1s oportunidades tendr\u00e1s de conseguir descargas.<\/p>\n<p>[\/fusion_text][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb3&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p>Diferencias entre las aplicaciones nativas y las PWA<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Seg\u00fan la <a href=\"https:\/\/es.wikipedia.org\/wiki\/Aplicaci%C3%B3n_m%C3%B3vil\" target=\"_blank\" rel=\"noopener noreferrer\">wikipedia<\/a> una <a href=\"https:\/\/ignaciosantiago.com\/como-crear-aplicacion-movil\" target=\"_blank\" rel=\"noopener noreferrer\">aplicaci\u00f3n m\u00f3vil<\/a> es una <strong>aplicaci\u00f3n inform\u00e1tica<\/strong> dise\u00f1ada para ser ejecutada en tel\u00e9fonos inteligentes, tabletas y otros dispositivos m\u00f3viles. Las aplicaciones permiten al usuario efectuar un conjunto de tareas de cualquier tipo <strong>facilitando las gestiones o actividades a desarrollar<\/strong>. A diferencia de las PWA, se desarrollan y son v\u00e1lidas para cualquier sistema operativo al basarse en tecnolog\u00eda web y son compatibles con cualquier dispositivo y sistema.<\/p>\n<p>Una <strong>aplicaci\u00f3n m\u00f3vil nativa<\/strong>\u00a0<span data-doc-id=\"293670000001496095\">se desarrolla de manera espec\u00edfica para un<strong> sistema operativo en concreto<\/strong> (por ejemplo, para Android, iOS o Windows). En el caso de iOS el lenguaje nativo que utilizan es Objective C y Swift, mientras que en Android el lenguaje de programaci\u00f3n es Java y Linux. Adem\u00e1s, este tipo de aplicaciones<strong> tienen que ser descargadas en tu propio tel\u00e9fono m\u00f3vil para poder hacer uso de ellas<\/strong>. <\/span><span data-doc-id=\"293670000001496095\">Por su parte, las PWA se desarrollan con lenguaje HTML, CSS y Javascript. \u00bfQu\u00e9 significa esto? Que despu\u00e9s de haber accedido por primera vez a una PWA,<strong> puedes guardar un acceso directo en el escritorio<\/strong> y acceder sin necesidad de pasar por un navegador o de tener conexi\u00f3n a internet.<\/span><\/p>\n<p>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p><a name=\"ventajas\"><\/a>Ventajas destacadas de las aplicaciones web progresivas<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Para entender realmente qu\u00e9 es una aplicaci\u00f3n web progresiva y las diferencias que existen con una aplicaci\u00f3n nativa, tienes que conocer las <strong>principales caracter\u00edsticas, ventajas y funcionalidades<\/strong> de ambas opciones. \u00bfMerece la pena <strong>convertir tu sitio web en una PWA<\/strong>? Despu\u00e9s de conocer las siguientes ventajas seguro que tienes la respuesta mucho m\u00e1s clara:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Se adaptan al dispositivo m\u00f3vil<\/strong>: Tanto si utilizan un sistema operativo Android como iOS e incluso de manera independiente a si es un ordenador de mesa, un smartphone o una tableta. Esto se da gracias a su <strong>dise\u00f1o multidispositivo<\/strong>. No solo es m\u00e1s c\u00f3modo en el momento de la creaci\u00f3n sino que tambi\u00e9n conlleva una <strong>reducci\u00f3n de los costes<\/strong> ya que no se hace necesaria la creaci\u00f3n de cuentas de desarrollador como en el caso de las aplicaciones nativas.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Son indexables por los buscadores<\/strong>: Una aplicaci\u00f3n web progresiva permite, de manera r\u00e1pida y sencilla, <strong>copiar la URL y compartirla en cualquier red social o embeberla en un sitio web<\/strong>. Al no ser una aplicaci\u00f3n nativa, los usuarios <strong>no tienen que descargarla<\/strong>. Y eso disminuye la fricci\u00f3n que se produce durante ese proceso, como el tiempo de espera hasta que la App est\u00e9 totalmente descargada en el dispositivo m\u00f3vil del usuario. Seg\u00fan Google Developers \u00abse puede identificar como app gracias al manifiesto W3C y al alcance de registro de service worker\u00bb.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>No tienen que pasar por complejos procesos de validaci\u00f3n<\/strong>: Cualquier cambio, e incluso actualizaci\u00f3n de software, <strong>no requiere de la aprobaci\u00f3n y validaci\u00f3n por parte de Apple o Google<\/strong>, por lo que se producen de manera inmediata (esto no pasa con las apps nativas, cuyo proceso de aprobaci\u00f3n puede complicar el proyecto de lanzamiento). Adem\u00e1s, <strong>no necesitar\u00e1s crear una cuenta de desarrollador<\/strong> para publicarla en Google Play o Apple Store ya que no es una App nativa como tal.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Ocupan muy poco espacio en el disco duro<\/strong>: El espacio que ocupa en los smartphones es menor, ya que no se hace necesaria la descarga (las PWA <strong>solo pesan unos pocos bytes<\/strong>).<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Te permiten enviar notificaciones push<\/strong>: Contienen las <strong>mismas funciones que cualquier aplicaci\u00f3n m\u00f3vil nativa<\/strong> al uso como, por ejemplo, la funcionalidad para enviar <a href=\"https:\/\/ignaciosantiago.com\/notificaciones-push-que-son-como-enviar\" target=\"_blank\" rel=\"noopener noreferrer\">notificaciones push<\/a>.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>No necesitan conexi\u00f3n a Internet para funcionar<\/strong>: Otro de los grandes beneficios es la <strong>innecesaria conexi\u00f3n a Internet<\/strong> para que sea usada. S\u00ed, has le\u00eddo bien, no necesitas tener conexi\u00f3n. \u00bfC\u00f3mo es posible siendo una aplicaci\u00f3n? Esto es as\u00ed porque la primera vez que se accede a la progressive web app <strong>se queda guardado el contenido en tu dispositivo<\/strong>. Por tanto, la siguiente vez que accedes, incluso sin conexi\u00f3n, <strong>podr\u00e1s acceder a todo el contenido sin restricciones<\/strong>.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Se descargan sin tener que pasar por la tienda de apps<\/strong>: Las apps progresivas son muy accesibles ya que<strong> no necesitas ir a la tienda de aplicaciones<\/strong>, buscar la aplicaci\u00f3n, aceptar la descarga, esperar a que se complete y por fin acceder a ella.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Se pueden compartir f\u00e1cilmente a trav\u00e9s de una URL<\/strong>: Son muy accesibles ya que la PWA<strong> genera un enlace<\/strong> (una URL) que se puede convertir, por ejemplo, en un c\u00f3digo QR, y compartirse en cualquier sitio web, enviarlo por email en una campa\u00f1a o por medio de las redes sociales.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Son muy seguras<\/strong>: Solo se considera que una progressive web app es tal cuando tienen un <a href=\"https:\/\/ignaciosantiago.com\/https-que-es-seo\" target=\"_blank\" rel=\"noopener noreferrer\">certificado SSL<\/a>. Esto quiere decir que la URL que genera deber\u00e1 comenzar con \u00abhttps\u00bb, por lo que primero debes pasar tu sitio web <a href=\"https:\/\/ignaciosantiago.com\/tutorial-wordpress\/https-certificado-ssl\" target=\"_blank\" rel=\"noopener noreferrer\">de http a https<\/a>.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>No se diferencian de una app\u00a0<\/strong><b>nativa<\/b>: Al tener lo mejor del mundo de las apps nativas y de las p\u00e1ginas web, <strong>un usuario no puede diferenciarla visualmente<\/strong>. Y es que, cuando un usuario entra por primera vez a la PWA, ver\u00e1 la barra del buscador con el enlace, pero esto s\u00f3lo ocurre la primera vez. Acto seguido la app progresiva te sugiere <strong>guardar un acceso directo en el dispositivo<\/strong>. Por tanto, la siguiente vez que accedan lo har\u00e1n como con cualquier app nativa (abriendo el icono de la PWA).<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Se minimiza much\u00edsimo la fricci\u00f3n de descarga al prescindir de los pasos previos<\/strong>: Los usuarios solo tendr\u00e1n que aceptar con un \u00abOk\u00bb para<strong> disponer de ese acceso en todo momento en sus pantallas<\/strong> (esto ayuda a mejorar la experiencia de usuario). \u00bfSab\u00edas que en cada una de estas etapas del proceso de descarga se pierde un 20% de los usuarios? Todos estos <strong>beneficios y caracter\u00edsticas de las PWA<\/strong> son las que ya han visto muchos negocios, dado que el gran peso que tienen las apps nativas, por lo que los usuarios, tras aprovechar la promoci\u00f3n u oferta, <strong>las eliminan de sus smartphones<\/strong>. Aunque en el caso de las grandes empresas, los usuarios ven f\u00e1cilmente las ventajas de mantenerla no ocurre lo mismo con las PWA de las peque\u00f1as y medianas empresas.<\/p>\n<p>[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p><a name=\"razones\"><\/a>Razones por las que tu necesitas implementar una PWA en tu sitio web<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Una PWA no es m\u00e1s que una <strong>soluci\u00f3n de marketing m\u00f3vil<\/strong> para las empresas y en especial para las peque\u00f1as empresas. Con una progressive web app favoreces el crecimiento del negocio como tal y con ello el <strong>aumento de los ingresos y los beneficios<\/strong>. \u00bfC\u00f3mo ayuda exactamente a un negocio tener una progressive? Deja que te explique varias<strong> razones por las que tu necesitas implementar una PWA en tu sitio web<\/strong>:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Optimiza la comunicaci\u00f3n entre empresa y cliente<\/strong>: Una PWA mejora las comunicaciones entre empresa y cliente, por lo que <strong>favorece la fidelizaci\u00f3n de los usuarios<\/strong>.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Mejora el posicionamiento SEO<\/strong>: Gracias a las PWA puedes mejorar tu visibilidad en <a href=\"https:\/\/ignaciosantiago.com\/buscadores-de-internet-alternativos\" target=\"_blank\" rel=\"noopener noreferrer\">buscadores<\/a>, por medio de portales como <a href=\"https:\/\/ignaciosantiago.com\/tutorial-google-my-business-posicionamiento-negocios-locales\" target=\"_blank\" rel=\"noopener noreferrer\">Google My Business<\/a> o Yelp, en los que se hace necesario conseguir un buen posicionamiento para <strong>aparecer entre los primeros resultados de b\u00fasqueda<\/strong>. Por lo general, los primeros resultados de b\u00fasquedas son los que obtienen m\u00e1s visitas y esto es gracias a las <strong>rese\u00f1as<\/strong>. Cuantas m\u00e1s rese\u00f1as obtenga un negocio m\u00e1s facilidad de posicionarse entre los primeros resultados. Cuando un usuario est\u00e1 buscando, por ejemplo, un restaurante, los primeros resultados son los que realmente compara. Valorar\u00e1 los comentarios, la puntuaci\u00f3n, la ubicaci\u00f3n, etc y, finalmente, se decidir\u00e1 por uno de ellos. Si tu restaurante no est\u00e1 entre los primeros resultados las posibilidades disminuyen considerablemente (los <strong>3 primeros resultados <\/strong>suelen llevarse entre un 60% y un 70% de los usuarios).<\/p>\n<p>[\/fusion_li_item][\/fusion_checklist][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb]Todo esto es posible gracias a una PWA. Si se tratase de una aplicaci\u00f3n nativa no podr\u00eda posicionarse en este tipo de buscadores. Son muchas las empresas que ya est\u00e1n viendo las ventajas que tiene tener una progressive, como la facilidad de ser indexadas, y el descubrimiento a trav\u00e9s de motores de b\u00fasqueda, a todo este se le suma que cuando un usuario aterriza en la progressive siente que est\u00e1 navegando por una app nativa, as\u00ed que la experiencia de usuario es inmejorable.[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p><a name=\"formas\"><\/a>Formas de difundir, compartir y promocionar una PWA<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p class=\"zw-paragraph\" data-textformat=\"{&quot;type&quot;:&quot;text&quot;}\" data-doc-id=\"293670000001496095\">Gracias a la<strong> facilidad de ser compartidas<\/strong>, las PWA se han convertido en una <a href=\"https:\/\/ignaciosantiago.com\/tipos-de-marketing-online\" target=\"_blank\" rel=\"noopener noreferrer\">estrategia de marketing<\/a> imprescindible para cualquier negocio (al igual que con una app nativa debes tener planificada una estrategia de lanzamiento tanto pre como post para maximizar el n\u00famero de descargas y de interacciones). <span data-doc-id=\"293670000001496095\">La mejor manera de<strong> incitar la descarga<\/strong> es saber transmitir el valor que tiene que lo hagan y los beneficios que obtendr\u00e1n. Si los usuarios no ven el valor, la importancia que tiene que lo hagan, lo que van a obtener si lo hacen o lo que van a perder si no la descargan, no lo har\u00e1n. Pero, \u00bfde qu\u00e9 formas puedo compartir y promocionar una aplicaci\u00f3n web progresiva? Estas son algunas de mis favoritas:<\/span><\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>URL<\/strong>: La primera y la m\u00e1s obvia es desde <strong>la propia URL de la web app progresiva<\/strong>. El usuario solo tendr\u00e1 que escribir o pegar la direcci\u00f3n en la barra de su navegador y acceder directamente.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>C\u00f3digo QR<\/strong>: Puedes<strong> crear un c\u00f3digo QR<\/strong> como te explicaba con el ejemplo de los folletos publicitarios. Para que puedas aprovechar todav\u00eda m\u00e1s esta opci\u00f3n puedes poner, por ejemplo, <strong>el c\u00f3digo en el ticket de compra<\/strong> (de forma que los clientes puedan escanearla). Adem\u00e1s, puedes incentivarlo con un<strong> programa de fidelizaci\u00f3n<\/strong> por acumulaci\u00f3n de puntos. Tambi\u00e9n podr\u00edas adjuntar ese mismo c\u00f3digo en los emails de las<strong> campa\u00f1as de promoci\u00f3n<\/strong>.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Buscador de Google<\/strong>: El<strong> buscador de Google<\/strong> es otra de las formas que tiene cualquier negocio para promocionar una aplicaci\u00f3n progresiva. Los usuarios pueden llegar a ella con una simple <strong>b\u00fasqueda del nombre de la empresa<\/strong>. Ten en cuenta que actualmente las b\u00fasquedas m\u00f3viles representan un 60% de todas las b\u00fasquedas que se realizan, por lo que te recomiendo que configures una cuenta en Google My Business (una herramienta de Google que ayuda a aumentar la presencia online y genera la confianza en los negocios). Y es que, gracias al <strong>marketing de rese\u00f1as<\/strong> que se puede implementar de manera sencilla en una progressive web app, cualquier negocio puede aumentar considerablemente los comentarios y valoraciones positivas en cualquier buscador. \u00bfEsto qu\u00e9 significa? Que se maximizan las posibilidades de que ese negocio<strong> aparezca en los resultados de Google Local Pack<\/strong>\u00a0(y esto incide de manera directa en un aumento de clientes y por consiguiente de los beneficios).<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Mensaje de texto<\/strong>: Tambi\u00e9n puedes promocionar una PWA por medio de <strong>SMS<\/strong>. Esto mejora no solo la comunicaci\u00f3n entre la empresa y el cliente sino que tambi\u00e9n favorece la comunicaci\u00f3n, ese boca a boca que se genera gracias a la facilidad de compartirla.<\/p>\n<p>[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>Las aplicaciones web progresivas pueden <strong>compartirse a trav\u00e9s de cualquier portal externo<\/strong> como Yelp, Tripadvisor, <a href=\"https:\/\/ignaciosantiago.com\/facebook-que-es-como-funciona\">Facebook<\/a>, Twitter, <a href=\"https:\/\/ignaciosantiago.com\/instagram-que-es-como-funciona\">Instagram<\/a>, etc. Simplemente tienes que <strong>compartir el enlace<\/strong> y listo. El siguiente paso sacar partido a la PWA tras el lanzamiento. Para empezar <strong>debes llevar un seguimiento<\/strong>. Hay que medir <strong>cu\u00e1l es el uso que se est\u00e1 haciendo de la aplicaci\u00f3n<\/strong>, por ejemplo, midiendo el engagement con los usuarios, el n\u00famero de descargas que se hacen y en qu\u00e9 dispositivos, cu\u00e1l es el n\u00famero de sesiones, el tiempo medio que los usuarios pasan navegando, etc. Medir continuamente es imprescindible para <strong>implementar posibles mejoras<\/strong> o potenciar lo que est\u00e1 funcionando muy bien.<\/p>\n<p>Adem\u00e1s, en ning\u00fan momento puedes olvidarnos de la <strong>promoci\u00f3n<\/strong>. Aunque el primer objetivo sea la descarga, el segundo es muy probablemente <strong>que los usuarios no la eliminen<\/strong> y, para ello, necesitas conseguir <strong>generar engagement<\/strong> (mostrarle a los usuarios el valor que tiene que la sigan manteniendo). \u00bfC\u00f3mo se puede conseguir? Con <strong>promociones y ofertas especiales<\/strong>, contenido exclusivo y con una estrategia de notificaciones push que te permita dar m\u00e1s difusi\u00f3n a todas esas iniciativas. Es importante que, al preparar las estrategias, personalices tus p\u00fablicos, ya que <strong>no todos los usuarios son iguales<\/strong> y cuanto m\u00e1s personalizada y segmentada est\u00e9 (con campa\u00f1as de notificaciones push conseguir\u00e1s mejores resultados).<\/p>\n<p>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; spacing=\u00bb\u00bb center_content=\u00bbno\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb border_radius=\u00bb\u00bb box_shadow=\u00bbno\u00bb dimension_box_shadow=\u00bb\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbtrue\u00bb border_sizes_top=\u00bb0&#8243; border_sizes_bottom=\u00bb0&#8243; border_sizes_left=\u00bb0&#8243; border_sizes_right=\u00bb0&#8243; first=\u00bbtrue\u00bb][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p><a name=\"ejemplos\"><\/a>Ejemplos de \u00e9xito de empresas que tienen una PWA<\/p>\n<p>[\/fusion_title][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb]<\/p>\n<p>Las aplicaciones web progresivas no son una tecnolog\u00eda nueva pero \u00faltimamente est\u00e1n todav\u00eda m\u00e1s de moda. Multitud de <strong>empresas han detectado el amplio campo de oportunidades<\/strong> que podr\u00edan aprovechar utilizando estos sistemas y por supuesto, no se iban a quedar atr\u00e1s. Y de hecho, con vistas a los resultados, en la mayor\u00eda de los casos, estos <strong>evolucionan favorablemente<\/strong>. No se pod\u00eda esperar otra cosa de una aplicaci\u00f3n en las que el usuario puede hacer pr\u00e1cticamente lo mismo que en las aplicaciones nativas para Android o iOS, pero sin necesidad de instalar nada: solo se necesita <strong>un navegador con conexi\u00f3n a Internet<\/strong>.<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Twitter<\/strong>: La conocida red social <a href=\"https:\/\/ignaciosantiago.com\/twitter-que-es-como-funciona\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter<\/a> ya saca partido a su PWA. Tras implementar la aplicaci\u00f3n web progresiva, <strong>aument\u00f3 el n\u00famero de tweets medio en m\u00e1s de un 75%<\/strong>. Consiguieron reducir su tasa de rebote en un 20% y el peso de la app nativa (de cerca de 100Mb) en dispositivos Apple a 0,6Mb con su PWA.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Forbes<\/strong>: Forbes tambi\u00e9n dio el paso hacia las PWA. Se trata de uno de los medios de comunicaci\u00f3n m\u00e1s importantes a nivel global en el mundo de los negocios y las finanzas. Desarroll\u00f3 su progressive web app con el \u00fanico objetivo de <strong>mejorar la experiencia m\u00f3vil de sus usuarios<\/strong> y conseguir <strong>reducir la velocidad de carga<\/strong>, uno de los principales motivos por los que muchos usuarios se caen en el proceso de descarga, que en ese momento su web tardaba entre 3 y 12 segundos en cargar (no olvides que m\u00e1s de la mitad de los usuarios abandonan una web si tarda m\u00e1s de 3 segundos en cargar). Gracias a la PWA redujo el tiempo de carga a <strong>0.8 segundos<\/strong>, lo que provoc\u00f3 un incremento del n\u00famero de sesiones en un 43%. Adem\u00e1s, ha aumentado el porcentaje de engagement en un 100%, ha multiplicado por 6 el n\u00famero de suscripciones a sus newsletter y ha pasado de ocupar 43,2Mb en iOS a tan solo 0,2Mb con su PWA.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Flipkart<\/strong>: El ecommerce m\u00e1s grande de India tambi\u00e9n ha seguido los mismos pasos. Con la intenci\u00f3n de mejorar la experiencia m\u00f3vil para sus usuarios decidieron implementar una aplicaci\u00f3n nativa pero no obtuvieron los resultados esperados as\u00ed que, finalmente decidieron crear una aplicaci\u00f3n web progresiva para que sus usuarios <strong>accedieran a su tienda online<\/strong>. Actualmente el tiempo medio de los usuarios es de<strong> m\u00e1s de 3 minutos<\/strong> (frente al escaso minuto de sesi\u00f3n con la app nativa). Otros beneficios son la posibilidad de uso con baja conectividad de datos lo que favorece el uso en el ecommerce y, gracias al sencillez para guardar un acceso directo en sus dispositivos, su tasa de conversi\u00f3n ha aumentado en un<strong> 70%<\/strong>.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Alibaba<\/strong>: Con Alibaba, el marketplace B2B m\u00e1s grande del mundo, ha pasado lo mismo. Necesitaban <strong>mejorar la experiencia m\u00f3vil<\/strong> para sus clientes y para los nuevos usuarios. Con la incorporaci\u00f3n de una aplicaci\u00f3n progresiva consiguieron<strong> aumentar en un 76% sus conversiones totales<\/strong>, adem\u00e1s de un aumento del 14% en usuarios desde iOS y un 30% en usuarios con dispositivos Android. Por otro lado, la facilidad de a\u00f1adir un acceso directo a los dispositivos consigui\u00f3 <strong>multiplicar por 4 el engagement de los usuarios<\/strong>.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>The Washington Post<\/strong>: El famoso peri\u00f3dico digital siempre est\u00e1 en continua b\u00fasqueda de una<strong> buena experiencia m\u00f3vil<\/strong>, ya que la mitad de sus usuarios visitan este medio de comunicaci\u00f3n a trav\u00e9s de un smartphone. Tras la creaci\u00f3n de su PWA consiguieron <strong>reducir en un 88% la velocidad de carga de sus art\u00edculos<\/strong>, que supuso un aumento de los usuarios de un 63% adem\u00e1s de la fidelizaci\u00f3n de estos.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Starbucks<\/strong>: La cadena de cafeter\u00edas Starbucks quer\u00eda implementar los pedidos online as\u00ed que decidi\u00f3 crear una PWA con la funcionalidad de pedidos <strong>que tuviera la misma apariencia que la app<\/strong> (pero sin la necesidad de conexi\u00f3n a Internet). Al lanzar el nuevo sistema de pedidos a trav\u00e9s de su PWA, Starbucks ya ha visto unos resultados muy significativos. Con una reducci\u00f3n del 99.84% en el peso de su progressive web app, ha conseguido que sea <strong>una de las favoritas entre sus usuarios<\/strong>. Como resultado, duplicaron la cantidad de usuarios web que realizaban pedidos cada d\u00eda y los usuarios de dispositivos versi\u00f3n escritorio ahora tienen casi la misma tasa que los de usuarios m\u00f3viles.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Flipboard<\/strong>: Como una de las revista social m\u00e1s conocida del mundo, Flipboard se ha convertido en <strong>uno de los mejores ejemplos de noticias online a trav\u00e9s de una PWA<\/strong>. Y es que, hasta que crearon esta progressive web app, Flipboard solo pod\u00eda llegar a sus usuarios<strong> desde la versi\u00f3n m\u00f3vil<\/strong>. Ahora, sin embargo ahora puede llegar tanto a usuarios de su app como a cualquiera que quiera acceder desde la versi\u00f3n de escritorio.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Uber<\/strong>: La empresa de servicios de Uber fue reconstruida desde cero como una PWA con el objetivo de <strong>ofrecer una experiencia similar a la de la aplicaci\u00f3n nativa<\/strong> en las reservas de sus servicios. La PWA se ha dise\u00f1ado para que reservar un coche sea viable incluso con redes 2G de baja velocidad. Al conseguir replicar la experiencia nativa en una aplicaci\u00f3n progresiva, Uber decidi\u00f3 implementar la solicitud de viaje r\u00e1pido sin importar la ubicaci\u00f3n, la velocidad de la red y el dispositivo. La aplicaci\u00f3n principal de solo<strong> 50kB<\/strong> le permite <strong>cargar en 3 segundos en redes 2G<\/strong>.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb]<\/p>\n<p><strong>Pinterest<\/strong>: Pinterest comenz\u00f3 su nueva experiencia de web m\u00f3vil desde cero como PWA con el fin de <strong>crecer internacionalmente<\/strong>. Y es que la red social descubri\u00f3 que solo un 1% de sus usuarios acababan convirti\u00e9ndose en registros. Al darse cuenta de que la oportunidad de mejorar la conversi\u00f3n era abismal, crearon una PWA, lo que dio lugar a que <strong>el tiempo de las sesiones aumentara en un 40%<\/strong>. Adem\u00e1s, los ingresos que generaban por publicidad<strong> aumentaron en un 44%<\/strong> y el porcentaje de fidelizaci\u00f3n lleg\u00f3 a un 60%.<\/p>\n<p>[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p><a name=\"plugins\"><\/a>Mejores plugins de WordPress para convertir tu web en una PWA<\/p>\n<p>[\/fusion_title][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb]<\/p>\n<p>\u00bfSab\u00edas que <strong>cerca de un 33% de las p\u00e1ginas web del mundo est\u00e1n creadas en WordPress<\/strong>? Es un dato arrollador y a tener en cuento, por lo que te voy a explicar <strong>c\u00f3mo convertir tu Wordpress en una PWA<\/strong>. Existen muchos plugins que te facilitar\u00e1n el cambio de tu sitio web, por lo que he hecho un <strong>listado con los mejores<\/strong> y cu\u00e1les son sus caracter\u00edsticas principales as\u00ed como los pasos principales para que puedas instalarlo sin problema:<\/p>\n<p>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_global id=\u00bb91717&#8243;][fusion_global id=\u00bb74950&#8243;][fusion_builder_container hundred_percent=\u00bbno\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb overlay_color=\u00bb\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb padding_top=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb padding_right=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p><a name=\"crear\"><\/a>C\u00f3mo crear una PWA paso a paso para una instalaci\u00f3n WordPress<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Si todav\u00eda no tienes tu sitio web <a href=\"https:\/\/ignaciosantiago.com\/tutorial-wordpress\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress<\/a>\u00a0o est\u00e1s pensando en hacerlo puede que sea el momento de ponerse manos a la obra y, de paso, <strong>empezar con tu PWA<\/strong>. Aunque existen muchas <a href=\"https:\/\/ignaciosantiago.com\/crear-una-pagina-web-gratis-o-un-blog\" target=\"_blank\" rel=\"noopener noreferrer\">plataformas donde puedes crear sitios web<\/a> alternativas como Blogger, <a href=\"https:\/\/ignaciosantiago.com\/tutorial-wordpress\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress<\/a>, <a href=\"https:\/\/ignaciosantiago.com\/ir-a\/wix\" target=\"_blank\" rel=\"noopener noreferrer\">Wix<\/a>, etc, WordPress es claramente mi favorita (y la de muchas personas). No te cansar\u00e1s de descubrir todas sus funcionalidades y podr\u00e1s sacar pleno partido de tus contenidos y suscriptores. Cr\u00e9eme, habla la voz de la experiencia. \u00bfMe acompa\u00f1as a conocer los pasos a seguir para instalar tu PWA en Wordpress?<\/p>\n<p>[\/fusion_text][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb3&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p>#1 Elige el plugin que mejor se adapte a tu instalaci\u00f3n e inst\u00e1lalo<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p><strong>Descarga e instala tu plugin de WordPress favorito<\/strong> para poder adaptar y configurar tu sitio web como una aplicaci\u00f3n web progresiva. Cualquiera de ellos se encargar\u00e1 de hacer tu web instalable e<strong> instalar\u00e1 el service worker<\/strong> que se encargar\u00e1 de ejecutar todas las caracter\u00edsticas propias de una Progressive Web App.\u00a0Una vez instalado y activado cualquiera de los plugins, se mostrar\u00e1 en el men\u00fa lateral de WordPress una nueva opci\u00f3n (con el nombre del plugin), mediante la cu\u00e1l podr\u00e1s acceder a la configuraci\u00f3n del plugin.<\/p>\n<p>Tendr\u00e1s que introducir el nombre de la aplicaci\u00f3n, la descripci\u00f3n, subir el icono, configurar los colores del fondo y del tema, la p\u00e1gina de inicio, as\u00ed como establecer la orientaci\u00f3n de la aplicaci\u00f3n. Al guardar los ajustes podr\u00e1s comprobar que el <strong>archivo \u00abmanifest\u00bb<\/strong> ha sido creado por el plugin. Tambi\u00e9n se habr\u00e1 generado el <strong>service worker<\/strong> y se mostrar\u00e1 informaci\u00f3n sobre el protocolo que utiliza tu web, que recordamos que debe ser https. En definitiva, el plugin hace el trabajo por ti y genera los archivos necesarios para convertir una p\u00e1gina web o blog WordPress en una Progressive Web Application o PWA.<\/p>\n<p>[\/fusion_text][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb3&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p>#2 Haz una auditor\u00eda r\u00e1pida de tu sitio web<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Ya sea para tu sitio web o el de la competencia, tras la instalaci\u00f3n de cualquier plugin querr\u00e1s <strong>comprobar si tu sitio web ya aparece o se muestra como una PWA<\/strong>. Para ello, puedes utilizar la herramienta de auditor\u00eda de <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk\" target=\"_blank\" rel=\"noopener noreferrer\">Google Lighthouse<\/a>. Se trata de una extensi\u00f3n de <a href=\"https:\/\/ignaciosantiago.com\/google-chrome\" target=\"_blank\" rel=\"noopener noreferrer\">Google Chrome<\/a> (no es necesaria su descarga). Puedes realizar la misma consulta desde tu sitio web con tan solo darle al bot\u00f3n derecho de tu rat\u00f3n y<strong> seleccionar \u00abinspeccionar\u00bb en el submen\u00fa que se despliega<\/strong>.<\/p>\n<p>Tras hacer click se abre un panel en el que tienes que buscar la pesta\u00f1a correspondiente a \u00ab<em>Audits &gt; Perform an Audit<\/em>\u00ab. A continuaci\u00f3n elige la casilla de \u00abProgressive Web App\u00bb y, finalmente, selecciona \u00abRun Audit\u00bb para comenzar. Tras la auditoria, esta herramienta te proporcionar\u00e1 <strong>una puntuaci\u00f3n sobre 100<\/strong> y un panel con todas las caracter\u00edsticas o aspectos que puedes mejorar y optimizar para obtener un mejor rendimiento de tu sitio web (ten en cuenta que este tipo de herramientas son totalmente compatibles con AMP). Si utilizas ambas podr\u00e1s sacarle m\u00e1s provecho a tu rendimiento.<\/p>\n<p>[\/fusion_text][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb3&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p>#3 Analiza y haz el seguimiento de las interacciones que ocurren en la PWA.<\/p>\n<p>[\/fusion_title][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb]<\/p>\n<p>La mayor\u00eda de complementos de WordPress te permiten <strong>vincular la actividad de tu PWA con Google Analytics<\/strong>, para as\u00ed acceder a estad\u00edsticas con las que llevar un seguimiento de todos los usuarios y del uso que hacen en la PWA. En primer lugar, este sistema te permitir\u00e1 conocer la <strong>frecuencia de las visitas a p\u00e1ginas sin conexi\u00f3n<\/strong> (muy \u00fatil para rastrear cu\u00e1ntos usuarios acceden al servicio sin conexi\u00f3n y priorizar la adici\u00f3n de m\u00e1s funciones sin conexi\u00f3n en consecuencia).<\/p>\n<p>Por otra parte, proporciona informaci\u00f3n sobre <strong>cu\u00e1ntos usuarios han agregando PWA a su pantalla de inicio<\/strong>, clave para comprender c\u00f3mo los usuarios est\u00e1n reaccionando a la solicitud del navegador y cu\u00e1n valioso es el servicio para sus usuarios, as\u00ed como <strong>cu\u00e1ntas sesiones se inician desde la pantalla de inicio<\/strong> (agregar un icono a la pantalla de inicio es s\u00f3lo el primer paso). Tambi\u00e9n debes entender c\u00f3mo agregar tu servicio a la pantalla de inicio afecta la participaci\u00f3n del usuario.<\/p>\n<p>[\/fusion_text][fusion_alert type=\u00bbgeneral\u00bb accent_color=\u00bb#fff\u00bb background_color=\u00bb#1c6979&#8243; border_size=\u00bb4px\u00bb icon=\u00bbfa-exclamation-triangle fas\u00bb text_align=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb text_transform=\u00bb\u00bb dismissable=\u00bb\u00bb box_shadow=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p>Asimismo, puedes usar el evento \u00ab<strong>beforeinstallprompt<\/strong>\u00bb para rastrear cu\u00e1ntos usuarios se les pide que agreguen tu sitio web a su pantalla de inicio. A\u00fan mejor, la API permite obtener el resultado de la decisi\u00f3n del usuario. Adem\u00e1s, es posible enviar un <strong>evento a Google Analytics<\/strong> para rastrear esta informaci\u00f3n.<\/p>\n<p>[\/fusion_alert][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title title_type=\u00bbtext\u00bb rotation_effect=\u00bbbounceIn\u00bb display_time=\u00bb1200&#8243; highlight_effect=\u00bbcircle\u00bb loop_animation=\u00bboff\u00bb highlight_width=\u00bb9&#8243; highlight_top_margin=\u00bb0&#8243; before_text=\u00bb\u00bb rotation_text=\u00bb\u00bb highlight_text=\u00bb\u00bb after_text=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb animated_font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb animated_text_color=\u00bb\u00bb highlight_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p><a name=\"instalar\"><\/a>C\u00f3mo instalar un acceso directo a tu PWA en los navegadores<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Por otro lado, existe la posibilidad de <strong>crear un acceso directo para tu sitio web<\/strong>. El usuario puede crear ese <strong>acceso<\/strong> desde el que se le permite esa web desde su ventana y al uso se comportar\u00eda como una aplicaci\u00f3n. Es decir, ser\u00eda una forma de que el usuario, navegando en un sitio web desde su dekstop por ejemplo, quiera tener un <strong>acceso directo en su escritorio<\/strong> sin necesidad de estar accediendo continuamente a Internet y escribiendo en la barra del buscador el sitio que desea visitar. Las funciones que aparecer\u00e1n dentro de esa app depende \u00fanicamente del servicio de ese sitio web (hay que tener en cuenta que <strong>no todos los sitios ofrecen la posibilidad de Aplicaci\u00f3n Web Progressiva<\/strong>).<\/p>\n<p>[\/fusion_text][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb3&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p>C\u00f3mo un acceso directo a tu PWA en Google Chrome<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Para instalarla solo tendr\u00edas que acceder a la p\u00e1gina web, ir al <strong>men\u00fa de Google Chrome<\/strong> (que suele tener una apariencia de 3 puntos en sentido vertical) seleccionar \u00ab<strong>M\u00e1s herramientas &gt; Crear acceso directo<\/strong>\u00ab. Tras esto se abre una ventana emergente que te pregunta si quieres crear un acceso directo y tendr\u00e1s la posibilidad de cambiar el nombre y modificarlo para darle el que t\u00fa quieras adem\u00e1s de ofrecerte la opci\u00f3n de abrirla como una ventana (es muy importante que marques la opci\u00f3n de abrir como una ventana antes de finalizar la creaci\u00f3n ya que de este modo el acceso a tu app se crear\u00e1 fuera de Chrome).<\/p>\n<p>Despu\u00e9s de esto la aplicaci\u00f3n se modificar\u00e1 para <strong>tener el aspecto de una PWA<\/strong> y se crear\u00e1 el acceso directo tanto si est\u00e1s en un Mac en el dock o en la barra de tareas de Windows. Finalmente <strong>podr\u00e1s acceder a tu PWA sin tener que acceder en ning\u00fan momento a Google Chrome<\/strong> y sin necesidad de que permanezca abierto durante el uso. Siempre que quieras podr\u00e1s desinstalarla y eliminar el acceso directo.<\/p>\n<p>[\/fusion_text][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb3&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p>C\u00f3mo instalar un acceso directo a tu PWA en Safari<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p class=\"p1\">Si utilizas el navegador de <strong>Safari<\/strong> tambi\u00e9n podr\u00e1s disfrutar de esta opci\u00f3n. Cuando visites la p\u00e1gina web del sitio que quieras solo tendr\u00e1s que<strong> buscar el icono de compartir<\/strong> y al hacer click en \u00e9l se te abrir\u00e1 un men\u00fa con diferentes opciones como la de a\u00f1adir a tus favoritos, enviar ese enlace por corro y la opci\u00f3n que te interesa: <strong>a\u00f1adir a pantalla de inicio<\/strong>. Una vez hecho esto tendr\u00e1s un acceso en tu pantalla desde la cu\u00e1l podr\u00e1s acceder a esa p\u00e1gina sin necesidad de tener que abrir el navegador que has usado.<\/p>\n<p>[\/fusion_text][fusion_title hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb3&#8243; font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p>C\u00f3mo instalar un acceso directo a tu PWA en Firefox<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Tambi\u00e9n podr\u00edas hacerlo desde el navegador de <strong>Firefox<\/strong>. Es muy sencillo. Tras acceder al sitio web deseado, tienes que fijarte en la <strong>barra del buscador<\/strong> donde se muestra la URL. En la parte izquierda podr\u00e1s ver un <strong>s\u00edmbolo con una letra &#8216;i&#8217;<\/strong> rodeado por un c\u00edrculo. Solo tendr\u00e1s que<strong> arrastrar ese icono hacia tu escritorio<\/strong> y ya tendr\u00e1s el acceso directo a la p\u00e1gina que has estado visitando.<\/p>\n<p>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container type=\u00bbflex\u00bb hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb min_height=\u00bb\u00bb hundred_percent_height_scroll=\u00bbno\u00bb align_content=\u00bbstretch\u00bb flex_align_items=\u00bbflex-start\u00bb flex_justify_content=\u00bbflex-start\u00bb flex_column_spacing=\u00bb\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb container_tag=\u00bbdiv\u00bb menu_anchor=\u00bbconclusion\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_right=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top_medium=\u00bb\u00bb margin_bottom_medium=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top_medium=\u00bb\u00bb padding_right_medium=\u00bb\u00bb padding_bottom_medium=\u00bb\u00bb padding_left_medium=\u00bb\u00bb padding_top_small=\u00bb\u00bb padding_right_small=\u00bb\u00bb padding_bottom_small=\u00bb\u00bb padding_left_small=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb box_shadow=\u00bbno\u00bb box_shadow_vertical=\u00bb\u00bb box_shadow_horizontal=\u00bb\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb z_index=\u00bb\u00bb overflow=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb absolute=\u00bboff\u00bb absolute_devices=\u00bbsmall,medium,large\u00bb sticky=\u00bboff\u00bb sticky_devices=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_background_color=\u00bb\u00bb sticky_height=\u00bb\u00bb sticky_offset=\u00bb\u00bb sticky_transition_offset=\u00bb0&#8243; scroll_offset=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243;][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title title_type=\u00bbtext\u00bb rotation_effect=\u00bbbounceIn\u00bb display_time=\u00bb1200&#8243; highlight_effect=\u00bbcircle\u00bb loop_animation=\u00bboff\u00bb highlight_width=\u00bb9&#8243; highlight_top_margin=\u00bb0&#8243; before_text=\u00bb\u00bb rotation_text=\u00bb\u00bb highlight_text=\u00bb\u00bb after_text=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align_medium=\u00bb\u00bb content_align_small=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb animated_font_size=\u00bb\u00bb fusion_font_family_title_font=\u00bb\u00bb fusion_font_variant_title_font=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top_medium=\u00bb\u00bb margin_bottom_medium=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb animated_text_color=\u00bb\u00bb highlight_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]Conclusi\u00f3n: Impulsa la experiencia de usuario con las Progressive Web Apps[\/fusion_title][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb content_alignment_medium=\u00bb\u00bb content_alignment_small=\u00bb\u00bb content_alignment=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb font_size=\u00bb\u00bb fusion_font_family_text_font=\u00bb\u00bb fusion_font_variant_text_font=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb text_color=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p>\u00a1Da igual como las llames! PWA, Progressive Web App o Aplicaci\u00f3n Web Progresiva. Lo importante es que <strong>presentan las mejores caracter\u00edsticas de las aplicaciones nativas y de las p\u00e1ginas web<\/strong> para proporcionar al usuario una<strong> experiencia m\u00f3vil inmejorable<\/strong> gracias al uso de la tecnolog\u00eda web m\u00e1s novedosa. \u00bfSon las PWA el futuro? Despu\u00e9s de haber analizado todas las caracter\u00edsticas y ventajas que tiene para cualquier negocio se puede decir que s\u00ed, <strong>que una aplicaci\u00f3n web progresiva es el futuro<\/strong>, pero sobre todo que es el presente.<\/p>\n<p>Un presente que no puedes dejar escapar si quieres mejorar la experiencia m\u00f3vil de tus usuarios y conseguir aumentar el engagement y la fidelizaci\u00f3n de tus clientes. No puedes olvidarte que ahora el mundo es <strong>mobile<\/strong> ya que la mayor\u00eda de usuarios acceden desde dispositivos m\u00f3viles y por ello debes ofrecerles las mejores caracter\u00edsticas y funcionalidades. Y es que las PWA han transformado por completo la forma de interactuar de los usuarios con las aplicaciones m\u00f3viles, por lo que son muchas las empresas que han decidido utilizar una Progressive Web App (incluso est\u00e1n reemplazando sus sitio web o aplicaciones nativas actuales).<\/p>\n<p>\u00bfQu\u00e9 te ha parecido esta gu\u00eda las <strong>PWA<\/strong>? \u00bfEst\u00e1s pensado en<strong> implementar una aplicaci\u00f3n web progresiva en tu instalaci\u00f3n WordPress<\/strong>? \u00bfSab\u00edas que son mejores que tener que desarrollar una app nativa? \u00bfHay algo que te haya llamado la atenci\u00f3n? \u00bfCrees que me he dejado alguna cosa? \u00bfTe has quedado con alguna duda o pregunta? Entonces te pido que <strong>dejes un comentario<\/strong>. Da igual que sea o una duda o un simple gracias, pero me alegrar\u00e9 mucho de leerlo y responderlo.<\/p>\n<p>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_global id=\u00bb49153&#8243;][fusion_global id=\u00bb79322&#8243;][fusion_global id=\u00bb79022&#8243;]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_tocp=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb [&hellip;]<\/p>\n","protected":false},"author":44,"featured_media":21335,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0,"footnotes":""},"categories":[204,201],"tags":[],"class_list":["post-21334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","category-wordpress"],"_links":{"self":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts\/21334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/comments?post=21334"}],"version-history":[{"count":0,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts\/21334\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/media\/21335"}],"wp:attachment":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/media?parent=21334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/categories?post=21334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/tags?post=21334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}