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ágina en un tiempo mínimo así como PWA nos permite unas funcionalidades avanzadas dentro de una página web. ¿Y si pudiésemos fusionar ambas tecnologías para aprovechar lo mejor de cada una de ellas? ¿Os podéis imaginar una rapidez de carga y un buen posicionamiento orgánico acompañado de una mejora en la interactividad y la interacción? Esto es posible aunando fuerzas entre AMP y PWA. ¿Cómo hacemos posible este matrimonio de conveniencia entre estas dos tecnologías? El punto de partida es que el usuario llegaría a nuestra página web de la mano de la versión AMP y le redireccionaríamos posteriormente hacia la versión PWA del contenido. Pero esto nos generaría un pequeño inconveniente, la versión PWA tendría una primera carga lenta, ya que la ejecución del service worker, necesario para el almacenamiento en caché los recursos de la PWA, no nos aseguraría que la primera página tuviese una carga rápida corriendo el riesgo de que el usuario perciba una diferencia de velocidad muy grande y pueda abandonar la sesión. ¿La solución? Ejecutar el service worker de nuestra aplicación web progresiva desde una página AMP mediante amp-install-serviceworker aunque provenga de la caché de AMP. Esto se resume en que desde que el usuario llega a la versión AMP, el service worker puede trabajar en segundo plano preparando una caché y el esqueleto de la aplicación. De este modo, en cuanto el usuario clique en otro enlace de la página, el service worker toma el control y carga el esqueleto PWA en su lugar. Para llevar a cabo la redirección a la PWA desde de las páginas AMP existen dos alternativas:
- Emparejar las páginas canónicas con páginas AMP. En este caso el sitio canónico es una versión 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ónico es nuestra PWA, ya tendríamos las redirecciones listas.
- Si el sitio canónico es AMP, es decir, todo la web está desarrollada única y exclusivamente con AMP. En este caso nos encontramos con la situación de que la mayoría de nuestros enlaces nos llevan a versiones AMP de otras páginas. En este caso necesitamos generar un redireccionamiento a una ruta independiente del tipo http://www.dominio.com/pwa y mediante service worker interceptarla navegación para que apunte a nuestra PWA. Existe un problema de compatibilidad con ciertos navegadores que todavía no están preparados para trabajar con service workers. AMP soluciona este problema reescribiendo la url del esqueleto, 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.
Utilizando esta técnica conseguiremos mostrar nuestra página de aterrizaje en las mejores posiciones de los buscadores, gracias a las bondades de AMP y dotar de las funcionalidades avanzadas propias de PWA en el mismo site.
Configuración de cookies