{"id":9200,"date":"2018-12-13T08:30:09","date_gmt":"2018-12-13T07:30:09","guid":{"rendered":"https:\/\/www.makingscience.com\/blog\/aunando-fuerzas-entre-amp-y-pwa\/"},"modified":"2018-12-13T08:30:09","modified_gmt":"2018-12-13T07:30:09","slug":"aunando-fuerzas-entre-amp-y-pwa","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/aunando-fuerzas-entre-amp-y-pwa\/","title":{"rendered":"Aunando fuerzas entre AMP y PWA"},"content":{"rendered":"<div>Aunando fuerzas entre AMP y PWA<\/div>\n<div><span style=\"font-weight: 400;\">Anteriormente hemos podido conocer <\/span><a href=\"https:\/\/www.makingscience.com\/descubre-amp-y-como-mejora-tus-resultados\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">AMP<\/span><\/a><span style=\"font-weight: 400;\"> y <\/span><a href=\"https:\/\/www.makingscience.com\/que-son-las-pwa\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">PWA<\/span><\/a><span style=\"font-weight: 400;\"> en nuestras pasadas entradas del <\/span><a href=\"https:\/\/www.makingscience.com\/blog\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">blog<\/span><\/a><span style=\"font-weight: 400;\">.<\/span>  <span style=\"font-weight: 400;\">Hemos visto que <\/span><b>AMP<\/b><span style=\"font-weight: 400;\"> nos <\/span><b>permite mostrar la p\u00e1gina en un tiempo m\u00ednimo<\/b><span style=\"font-weight: 400;\"> as\u00ed como <\/span><b>PWA<\/b><span style=\"font-weight: 400;\"> nos <\/span><b>permite unas funcionalidades avanzadas<\/b><span style=\"font-weight: 400;\"> dentro de una p\u00e1gina web. \u00bfY si pudi\u00e9semos fusionar ambas tecnolog\u00edas para aprovechar lo mejor de cada una de ellas? \u00bfOs pod\u00e9is imaginar una rapidez de carga y un buen posicionamiento org\u00e1nico acompa\u00f1ado de una mejora en la interactividad y la interacci\u00f3n? Esto es posible <\/span><b>aunando fuerzas entre AMP y PWA<\/b><span style=\"font-weight: 400;\">.<\/span>  <span style=\"font-weight: 400;\">\u00bfC\u00f3mo hacemos posible este matrimonio de conveniencia entre estas dos tecnolog\u00edas? El punto de partida es que <\/span><b>el usuario llegar\u00eda a nuestra p\u00e1gina web de la mano de la versi\u00f3n AMP<\/b><span style=\"font-weight: 400;\"> y le <\/span><b>redireccionar\u00edamos posteriormente hacia la versi\u00f3n PWA<\/b><span style=\"font-weight: 400;\"> del contenido. Pero esto nos generar\u00eda un peque\u00f1o inconveniente, la versi\u00f3n PWA tendr\u00eda una primera carga lenta, ya que la ejecuci\u00f3n del service worker, necesario para el almacenamiento en cach\u00e9 los recursos de la PWA, no nos asegurar\u00eda que la primera p\u00e1gina tuviese una carga r\u00e1pida corriendo el riesgo de que el usuario perciba una diferencia de velocidad muy grande y pueda abandonar la sesi\u00f3n. <\/span>  <span style=\"font-weight: 400;\">\u00bfLa soluci\u00f3n? <\/span><b>Ejecutar el service worker<\/b><span style=\"font-weight: 400;\"> de nuestra aplicaci\u00f3n web progresiva <\/span><b>desde una p\u00e1gina AMP<\/b><span style=\"font-weight: 400;\"> mediante <\/span><a href=\"https:\/\/www.ampproject.org\/ko\/docs\/reference\/components\/amp-install-serviceworker\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">amp-install-serviceworker<\/span><\/a><span style=\"font-weight: 400;\"> aunque provenga de la cach\u00e9 de AMP. Esto se resume en que desde que el usuario llega a la versi\u00f3n AMP, <\/span><b>el service worker puede trabajar en segundo plano preparando una cach\u00e9 y el esqueleto de la aplicaci\u00f3n<\/b><span style=\"font-weight: 400;\">. De este modo, en cuanto el usuario clique en otro enlace de la p\u00e1gina, el service worker toma el control y carga el esqueleto PWA en su lugar.<\/span>  <span style=\"font-weight: 400;\">Para llevar a cabo la redirecci\u00f3n a la PWA desde de las p\u00e1ginas AMP existen dos alternativas:<\/span> <\/p>\n<ul>\n<li><b>Emparejar las p\u00e1ginas can\u00f3nicas<\/b><span style=\"font-weight: 400;\"> con p\u00e1ginas AMP.<\/span><span style=\"font-weight: 400;\"> <\/span><span style=\"font-weight: 400;\">En este caso el sitio can\u00f3nico es una versi\u00f3n no AMP que genera versiones AMP de las mismas. Este es el modo de funcionamiento habitual de AMP y por la tanto, si tenemos en cuenta que nuestro sitio can\u00f3nico es nuestra PWA, ya tendr\u00edamos las redirecciones listas.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Si el sitio can\u00f3nico es AMP, es decir, todo la web est\u00e1 desarrollada \u00fanica y exclusivamente con AMP.<\/span><span style=\"font-weight: 400;\"> <\/span><span style=\"font-weight: 400;\">En este caso nos encontramos con la situaci\u00f3n de que la mayor\u00eda de nuestros enlaces nos llevan a versiones AMP de otras p\u00e1ginas. En este caso <\/span><b>necesitamos generar un redireccionamiento a una ruta independiente<\/b><span style=\"font-weight: 400;\"> del tipo http:\/\/www.dominio.com\/pwa y mediante service worker interceptarla navegaci\u00f3n para que apunte a nuestra PWA.<\/span><span style=\"font-weight: 400;\"> <\/span><span style=\"font-weight: 400;\">Existe un problema de compatibilidad con ciertos navegadores que todav\u00eda no est\u00e1n preparados para trabajar con service workers. AMP soluciona este problema <\/span><a href=\"https:\/\/www.ampproject.org\/docs\/reference\/components\/amp-install-serviceworker#shell-url-rewrite\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">reescribiendo la url del esqueleto<\/span><\/a><span style=\"font-weight: 400;\">, de modo que si no hay dicha compatibilidad vuelva a escribir todos los enlaces coincidentes de forma que dirijan a la url de un esqueleto antiguo en su lugar.<\/span><\/li>\n<\/ul>\n<p> <span style=\"font-weight: 400;\">Utilizando esta t\u00e9cnica conseguiremos mostrar nuestra p\u00e1gina de aterrizaje en <\/span><b>las mejores posiciones de los buscadores<\/b><span style=\"font-weight: 400;\">, gracias a las bondades de <\/span><a href=\"https:\/\/www.makingscience.com\/descubre-amp-y-como-mejora-tus-resultados\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">AMP<\/span><\/a><span style=\"font-weight: 400;\"> y dotar de las <\/span><b>funcionalidades avanzadas<\/b><span style=\"font-weight: 400;\"> propias de <\/span><a href=\"https:\/\/www.makingscience.com\/que-son-las-pwa\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">PWA<\/span><\/a><span style=\"font-weight: 400;\"> en el mismo site.<\/span><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Aunando fuerzas entre AMP y PWA Anteriormente hemos podido conocer AMP y PWA en nuestras pasadas entradas del blog. Hemos visto que AMP nos permite mostrar la p\u00e1gina en un tiempo m\u00ednimo as\u00ed como PWA nos permite unas funcionalidades avanzadas dentro de una p\u00e1gina web. \u00bfY si pudi\u00e9semos fusionar ambas tecnolog\u00edas para aprovechar lo mejor [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":9201,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[68],"class_list":["post-9200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology-ai","tag-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=9200"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9200\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/9201"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=9200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=9200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=9200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}