¿Qué son los Web AMP progresivos?

 

 

 

  • SmashingConf Friburgo 2024
  • Accesibilidad para diseñadores, con Stéphanie Walter

  • Índice
    1. AMP, para páginas móviles aceleradas
    2. ¿AMP o PWA?
    3. El viaje perfecto del usuario
    4. Patrones de combinación PWAMP
      1. AMP como PWA
      2. AMP a PWA
      3. AMP en PWA
    5. ¡Listos, listos, acción!
      1. Muéstrame algo real
    6. (No es así) Pensamientos finales
      1. Otras lecturas

    Aunque la nueva API Service Worker le permite almacenar en caché todos los activos de su sitio web para una carga posterior casi instantánea , como cuando conoce a alguien nuevo, la primera impresión es lo que cuenta. Si la primera carga tarda más de 3 segundos, más del 53% de todos los usuarios abandonarán. Hay formas de mitigar este problema de una primera carga lenta, pero con esta estrategia solo se puede llegar hasta cierto punto y hay que emplear, o ser, un asistente de rendimiento de front-end. Entonces, si una primera carga casi instantánea está fundamentalmente en desacuerdo con una experiencia de aplicación nativa, ¿qué podemos hacer? En este artículo, Paul Bakaus le mostrará el camino.

     

    Si ha estado siguiendo a la comunidad de desarrollo web estos últimos meses, es probable que haya leído sobre las aplicaciones web progresivas (PWA). Es un término general que se utiliza para describir experiencias web tan avanzadas que compiten con aplicaciones nativas cada vez más ricas e inmersivas: soporte completo sin conexión , instalabilidad , "Retina", imágenes con sangrado completo, soporte de inicio de sesión para personalización, rápido y fluido. Navegación dentro de la aplicación, notificaciones automáticas y una excelente interfaz de usuario.

     

    Pero aunque la nueva API Service Worker le permite almacenar en caché todos los activos de su sitio web para una carga posterior casi instantánea , como cuando conoce a alguien nuevo, la primera impresión es lo que cuenta. Si la primera carga tarda más de 3 segundos, el último estudio de DoubleClick muestra que más del 53% de todos los usuarios abandonarán.

    Y 3 segundos, seamos realistas, ya es un objetivo bastante brutal . En las conexiones móviles, que a menudo tienen una latencia promedio de alrededor de 300 milisegundos y vienen con otras limitaciones, como un ancho de banda limitado y una conexión de señal a veces deficiente, es posible que le quede un presupuesto de rendimiento de carga total de menos de 1 segundo para hacer las cosas que desea. debe hacer para inicializar su aplicación.

    Claro, hay formas de mitigar este problema de una primera carga lenta (preprocesar un diseño básico en el servidor, cargar de forma diferida fragmentos de funcionalidad, etc.), pero solo se puede llegar hasta cierto punto con esta estrategia, y hay que emplearla. o ser, un asistente de rendimiento front-end.

    Entonces, si una primera carga casi instantánea está fundamentalmente en desacuerdo con una experiencia de aplicación nativa, ¿qué podemos hacer?

    AMP, para páginas móviles aceleradas

    Una de las ventajas más importantes de un sitio web es el acceso casi sin fricciones, es decir, sin pasos de instalación y con una carga casi instantánea. Un usuario siempre está a solo un clic de distancia.

    Para beneficiarse realmente de esta oportunidad de navegación efímera y sin esfuerzo, todo lo que necesita es un sitio web de carga increíblemente rápida. ¿Y todo lo que necesitas para hacer que tu sitio web se vuelva loco rápidamente? Una dieta adecuada: nada de imágenes de tamaño megabyte, nada de anuncios que bloqueen el renderizado, nada de 100.000 líneas de JavaScript, sólo el contenido, por favor.

    Las AMP , abreviatura de Accelerated Mobile Pages, son muy buenas en esto . De hecho, es su razón de ser . Es como una función de asistencia para el automóvil que lo obliga a mantenerse en el carril rápido al aplicar un conjunto de reglas sensatas para priorizar siempre el contenido principal de su página. Y al crear este entorno estricto y diseñado estáticamente , permite que plataformas como la Búsqueda de Google se acerquen un paso más a lo "instantáneo" al precargar solo la primera ventana gráfica .

    ¿AMP o PWA?

    Para que la experiencia sea confiable y rápida, debes vivir con algunas limitaciones al implementar páginas AMP. AMP no es útil cuando se necesita una funcionalidad altamente dinámica, como notificaciones automáticas o pagos web, o cualquier cosa que requiera JavaScript adicional. Además, dado que las páginas AMP generalmente se sirven desde una caché AMP, no obtendrá los mayores beneficios de la aplicación web progresiva en ese primer clic, ya que su propio Service Worker no puede ejecutarse. Por otro lado, una aplicación web progresiva nunca puede ser tan rápida como AMP en el primer clic, ya que las plataformas pueden prerenderizar páginas AMP de forma segura y económica, una característica que también simplifica la incrustación (por ejemplo, en un visor en línea).

     

    Entonces, ¿AMP o aplicación web progresiva? ¿Entrega instantánea y entrega optimizada, o las últimas funciones avanzadas de plataforma y código de aplicación flexible? ¿Qué pasaría si hubiera una manera de combinar los dos y aprovechar los beneficios de ambos?

    El viaje perfecto del usuario

    Al final, lo que importa es la experiencia de usuario ideal que busca: el recorrido del usuario . Dice así:

    1. Un usuario descubre un enlace a su contenido y hace clic en él.
    2. El contenido se carga casi instantáneamente y es un placer consumirlo.
    3. El usuario es invitado y actualizado automáticamente a una experiencia aún más rica, con una navegación más fluida en la aplicación, notificaciones automáticas y soporte fuera de línea.
    4. El usuario exclama: “Bueno, hola. ¡Diablos, sí! y es redirigido instantáneamente a una experiencia similar a una aplicación y pueden instalar el sitio en su pantalla de inicio.

    El primer salto a su sitio web debería ser casi instantáneo y la experiencia de navegación debería volverse cada vez más atractiva después.

    ¿Suena demasiado bueno para ser verdad? Bueno, ¿qué pasa si combinamos las dos tecnologías , aunque a primera vista aparentemente no están relacionadas y resuelven necesidades diferentes?

    Patrones de combinación PWAMP

    Para llegar a una experiencia de carga instantánea y actualización automática, todo lo que necesita hacer es combinar la nitidez de los AMP con la riqueza de las aplicaciones web progresivas en una (o varias) de las siguientes maneras:

    • AMP como PWA . Cuando puedes vivir con las limitaciones de AMP.
    • AMP a PWA . Cuando desee realizar una transición fluida entre los dos.
    • AMP en PWA . Cuando desee reutilizar AMP como fuente de datos para su PWA.

    Repasemos cada uno de ellos individualmente.

    AMP como PWA

    Muchos sitios web nunca necesitarán cosas más allá de los límites de las AMP. Amp by Ejemplo , por ejemplo, es tanto un AMP como una aplicación web progresiva:

    • Dispone de trabajador de servicio y, por tanto, permite el acceso offline, entre otras cosas.
    • Tiene un manifiesto que muestra el banner "Agregar a la pantalla de inicio".

    Cuando un usuario visita Amp by Ejemplo desde una búsqueda en Google y luego hace clic en otro enlace de ese sitio web, navega desde la caché de AMP hasta el origen. El sitio web todavía usa la biblioteca AMP, por supuesto, pero debido a que ahora reside en el origen, puede usar un trabajador de servicio, puede solicitar la instalación, etc. Recetas faciles y rápidas

     

    Puede utilizar esta técnica para habilitar el acceso sin conexión a su sitio web AMP, así como ampliar sus páginas tan pronto como se publiquen desde el origen, porque puede modificar la respuesta a través del fetchevento del trabajador del servicio y devolver como respuesta lo que desee. desear:

    function createCompleteResponse (header, body) { return Promise.all([ header.text(), getTemplate(RANDOM STUFF AMP DOESN’T LIKE), body.text() ]).then(html = { return new Response(html[0] + html[1] + html[2], { headers: { 'Content-Type': 'text/html' } }); });}

    Esta técnica le permite insertar scripts y funciones más avanzadas fuera del alcance de AMP en clics posteriores.

    AMP a PWA

    Cuando lo anterior no es suficiente y desea una experiencia PWA dramáticamente diferente en torno a su contenido, es hora de adoptar un patrón un poco más avanzado:

    • Todas las páginas de contenido "hoja" (aquellas que tienen contenido específico, no páginas de descripción general) se publican como AMP para una experiencia de carga casi instantánea.
    • Estos AMP utilizan el elemento especial de AMP amp-install-serviceworkerpara calentar un caché y el shell PWA mientras el usuario disfruta de su contenido.
    • Cuando el usuario hace clic en otro enlace de su sitio web (por ejemplo, la llamada a la acción en la parte inferior para una experiencia más parecida a una aplicación), el trabajador del servicio intercepta la solicitud, se hace cargo de la página y, en su lugar, carga el shell PWA.

    Puede implementar la experiencia anterior en tres sencillos pasos, siempre que esté familiarizado con cómo trabajan los trabajadores de servicios. (Si no es así, le recomiendo encarecidamente el curso Udacity de mi colega Jake ). Primero, instale el trabajador de servicio en todos sus AMP:

    amp-install-serviceworker src="https://www.your-domain.com/serviceworker.js" layout="nodisplay"/amp-install-serviceworker

    En segundo lugar, en el paso de instalación del trabajador del servicio, almacene en caché todos los recursos que necesitará la PWA:

    var CACHE_NAME = 'my-site-cache-v1';var urlsToCache = [ '/', '/styles/main.css', '/script/main.js'];self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) );});

    Finalmente, nuevamente en el trabajador del servicio, responda con la PWA en lugar del AMP solicitado en las solicitudes de navegación. (El código siguiente, aunque funcional, está demasiado simplificado. En la demostración al final encontrará un ejemplo más avanzado).

    self.addEventListener('fetch', event = { if (event.request.mode === 'navigate') { event.respondWith(fetch('/pwa')); // Immediately start downloading the actual resource. fetch(event.request.url); }});

    Ahora, cada vez que un usuario hace clic en un enlace de su página servido desde AMP Cache, el trabajador del servicio registra el navigatemodo de solicitud y asume el control, luego responde con la PWA completa y ya almacenada en caché.

     

    Lo que es especialmente interesante acerca de esta técnica es que ahora está utilizando una mejora progresiva para pasar de AMP a PWA. Sin embargo, esto también significa que, tal como están las cosas, los navegadores que aún no admiten trabajadores de servicios saltarán de AMP a AMP y nunca navegarán a la PWA.

    AMP resuelve esto con algo llamado reescritura de URL de shell . Al agregar un patrón de URL alternativa a la amp-install-serviceworkeretiqueta, le está indicando a AMP que reescriba todos los enlaces coincidentes en una página determinada para ir a otra URL de shell heredada, si no se ha detectado ningún soporte de trabajador de servicio:

    amp-install-serviceworker src="https://www.your-domain.com/serviceworker.js" layout="nodisplay" data-no-service-worker-fallback-url-match=".*" data-no-service-worker-fallback-shell-url="https://www.your-domain.com/pwa"/amp-install-serviceworker

    Con estos atributos implementados, todos los clics posteriores en un AMP irán a su PWA, independientemente de cualquier trabajador de servicio. Bastante bonito, ¿eh?

    AMP en PWA

    Entonces, ahora el usuario está en la aplicación web progresiva y es probable que esté utilizando alguna navegación basada en AJAX que recupera contenido a través de JSON. Ciertamente puedes hacerlo, pero ahora tienes estas locas necesidades de infraestructura para dos backends de contenido totalmente diferentes: uno que genera páginas AMP y el otro que ofrece una API basada en JSON para tu aplicación web progresiva.

    Pero piense por un segundo en qué es realmente un AMP. No es sólo un sitio web. Está diseñado como una unidad de contenido ultraportátil. Un AMP es autónomo por diseño y puede integrarse de forma segura en otro sitio web. ¿Qué pasaría si pudiéramos simplificar drásticamente la complejidad del back-end al deshacernos de la API JSON adicional y, en su lugar, reutilizar AMP como formato de datos para nuestra aplicación web progresiva?

    Por supuesto, una forma sencilla de hacerlo sería simplemente cargar páginas AMP en marcos. Pero los iframes son lentos y entonces necesitarías recompilar y reinicializar la biblioteca AMP una y otra vez. La tecnología web de vanguardia actual ofrece una mejor manera: el DOM en la sombra.

    El proceso se ve así:

    1. La PWA secuestra cualquier clic de navegación.
    2. Luego, realiza una XMLHttpRequest para recuperar la página AMP solicitada.
    3. Coloca el contenido en una nueva raíz de sombra.
    4. Y le dice a la biblioteca principal de AMP: “Oye, tengo un documento nuevo para ti. ¡Échale un vistazo!" (llamando attachShadowDocen tiempo de ejecución).

    Con esta técnica, la biblioteca AMP se compila y carga solo una vez para toda la PWA, y luego es responsable de cada documento oculto que le adjunte. Y, debido a que está obteniendo páginas a través de XMLHttpRequests, puede modificar la fuente AMP antes de insertarla en un nuevo documento oculto. Podrías hacer esto, por ejemplo, para:

    • elimine cosas innecesarias, como encabezados y pies de página;
    • insertar contenido adicional, como anuncios más desagradables o información sobre herramientas sofisticada;
    • Reemplazar cierto contenido con contenido más dinámico.

    Ahora, ha hecho que su aplicación web progresiva sea mucho menos compleja y ha reducido drásticamente la complejidad de su infraestructura back-end.

     

    ¡Listos, listos, acción!

    Para demostrar el enfoque DOM en la sombra (es decir, un AMP dentro de una PWA), el equipo de AMP ha creado una demostración basada en React llamada The Scenic, una revista de viajes falsa:

    La demostracion completa esta en GitHub, pero la magia ocurre en el amp-document.js' Componente React .

    Muéstrame algo real

    Para ver un ejemplo de producción real, eche un vistazo a la nueva PWA de Mic (en versión beta): si recarga y recarga un artículo aleatorio (que ignorará temporalmente al trabajador de servicio) y mira el código fuente, notará que es un AMP. página. Ahora intente hacer clic en el menú de hamburguesa: recarga la página actual, pero como amp-install-serviceworkerya instaló el shell de la aplicación PWA, la recarga es casi instantánea y el menú se abre después de la actualización, lo que hace que parezca que no se ha realizado ninguna recarga. Pero ahora estás en la PWA (que incorpora páginas AMP), campanas y silbatos y todo. Astuto, pero magnífico.

    (No es así) Pensamientos finales

    No hace falta decir que estoy muy entusiasmado con el potencial de esta nueva combinación. Es una combinación que saca lo mejor de ambos.

    Recapitulando lo más destacado:

    • siempre rápido, pase lo que pase;
    • gran distribución integrada (a través de los socios de la plataforma AMP);
    • mejorado progresivamente;
    • un back-end para gobernarlos a todos;
    • menos complejidad del cliente;
    • menos inversión general;

    Pero apenas estamos empezando a descubrir variaciones del patrón, así como otras completamente nuevas. Cree las mejores experiencias web que 2016 y más allá tengan para ofrecer. ¡Adelante, a un nuevo capítulo de la web!

    Otras lecturas

    • Todo lo que necesita saber sobre las AMP de Google
    • Creación para dispositivos móviles: ¿RWD, PWA, AMP o artículos instantáneos?
    • Una guía para principiantes sobre aplicaciones web progresivas
    • Por qué es importante el rendimiento percibido

    (al, señor)Explora más en

    • Codificación
    • javascript
    • AMPERIO
    • PWA





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    ¿Qué son los Web AMP progresivos?

    ¿Qué son los Web AMP progresivos?

    AMP, para páginas móviles aceleradas¿AMP o PWA?El viaje perfecto del usuarioPatrones de combinación PWAMP¡Listos, listos, acción!(No es así) Pensamiento

    programar

    es

    https://pseint.es/static/images/programar-que-son-los-web-amp-progresivosja-905-0.jpg

    2024-05-20

     

    ¿Qué son los Web AMP progresivos?
    ¿Qué son los Web AMP progresivos?

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences