PWA vs. AMP: ¿Cuál es mejor y en qué se diferencian entre sí?

Aproximadamente una década después de la introducción del primer iPhone, la web móvil finalmente se está poniendo al día con el estilo de vida de sus usuarios. Las páginas receptivas han eliminado el pellizco y el zoom. Las aplicaciones nativas y de AMP luchan contra los tiempos de carga lentos ...

Pero todavía hay un área problemática importante para la web móvil: el compromiso. Los 1000 sitios web móviles principales llegan a 4 veces más personas que las 1000 aplicaciones nativas principales. Sin embargo, esos sitios web atraen a los usuarios durante 20 veces menos minutos, en promedio, que las aplicaciones móviles.

Parece que los sitios web móviles pueden atraer visitantes, pero no retenerlos. Una de las tecnologías más nuevas que resuelve este problema son las aplicaciones web progresivas.

¿Qué son las aplicaciones web progresivas?

Las aplicaciones web progresivas son experiencias de sitios web móviles diseñadas para verse, sentirse y funcionar como lo hacen las aplicaciones móviles nativas. Los usuarios los encuentran en un navegador como lo harían con cualquier sitio web móvil. Después de interactuar con ese sitio, se le solicita al usuario que instale la aplicación web en su dispositivo. Si deciden instalar, la aplicación se descargará en el dispositivo de la forma en que lo haría una aplicación nativa.

El término "aplicaciones web progresivas" fue acuñado por Google en 2015. La compañía dice que las aplicaciones web progresivas cumplen con tres criterios:

• Confiable : cargue instantáneamente y nunca muestre el saurio, incluso en condiciones de red inciertas.
• Rápido : responda rápidamente a las interacciones del usuario con animaciones suaves como la seda y sin desplazamientos bruscos.
• Atractivo : siéntete como una aplicación natural en el dispositivo, con una experiencia de usuario inmersiva.

Una vez cumplidos estos requisitos, la aplicación web móvil se puede ofrecer como descargable a los usuarios. Antes de profundizar en las aplicaciones web progresivas, retrocedamos a la superficie brevemente y definamos aplicaciones nativas y otra tecnología que acelera la web móvil, Accelerated Mobile Pages (AMP).

¿Qué es una aplicación nativa?

Las aplicaciones nativas se instalan a través de un mercado como App Store o Google Play y viven como íconos en la pantalla de inicio de un dispositivo. Están diseñados específicamente para un dispositivo en particular y pueden usar todas sus funciones, como GPS, cámara, lista de contactos y más. Estas son aplicaciones que probablemente estén en su dispositivo actualmente, como Google Maps, Gmail o Instagram.

¿Qué es AMP?

El proyecto de páginas móviles aceleradas de código abierto (AMP para abreviar) permite a los desarrolladores crear páginas web que se cargan casi instantáneamente con un lenguaje de codificación único. Ese lenguaje es una versión simplificada de HTML y CSS que restringe el uso de JavaScript. Estas páginas están alojadas en un CDN, que ofrece una versión en caché de la página cuando es visitada por un usuario.

Aplicaciones web progresivas frente a aplicaciones nativas

Las aplicaciones nativas ofrecen experiencias de usuario instantáneas y sin problemas, y están respaldadas por grandes mercados como App Store y Google Play, entonces, ¿por qué optar por una aplicación web progresiva en lugar de la versión nativa tradicional? En un artículo para Forbes, Andrew Gazdecki ofrece una explicación de alto nivel:

Los sitios web móviles son rápidos y fáciles de acceder, pero tienden a ser menos agradables con respecto a la experiencia del usuario. Las aplicaciones nativas brindan la mejor experiencia de usuario, pero están limitadas a ciertos dispositivos y tienen grandes barreras para su adopción. Las aplicaciones nativas requieren una descarga, lo que significa generar una aceptación considerable de los consumidores primero y perder el beneficio del comportamiento impulsivo. Entre estas opciones se encuentra la solución móvil más nueva: la PWA.

Para obtener una explicación más refinada, veamos algunas de las mayores diferencias entre las aplicaciones nativas y las aplicaciones web progresivas:

• Uso de funciones: actualmente, mientras que las aplicaciones web pueden aprovechar las funciones de un dispositivo, las aplicaciones nativas pueden hacerlo más. Cosas como GPS, notificaciones push y gestos están más disponibles en una aplicación nativa.
• Restricciones de contenido: para que su aplicación tenga la oportunidad de competir en Google Play o en la App Store, deberá ceñirse a las reglas del mercado. Las restricciones de contenido y las tarifas dificultan que algunos sitios web creen aplicaciones nativas exitosas. Sin embargo, para las aplicaciones web, no se imponen restricciones de contenido ni tarifas, lo que facilita la creación de una aplicación independientemente del tipo de contenido.
• Conectividad sin conexión: aquí, la ventaja va a las aplicaciones nativas, que ofrecen un almacenamiento en caché más completo que las aplicaciones web progresivas integradas en HTML5. Si su aplicación tiene que funcionar sin conexión, actualmente la mejor opción es la nativa.
• Instalación: la instalación de una aplicación nativa requiere una acción significativa por parte del usuario. Tienen que abrir un mercado y buscar una aplicación, luego descargarla. Tiene que haber una intención seria. Para la instalación de una aplicación web progresiva, hay mucha menos fricción. Agregar uno a su dispositivo es como crear un marcador en su pantalla de inicio. Es más fácil instalar una aplicación web progresiva, pero el proceso es mucho menos familiar, lo que puede inhibir la adopción temprana.

• Velocidad: actualmente, las aplicaciones web progresivas van por detrás de las aplicaciones nativas. Sin embargo, están cerrando la brecha continuamente. Eso es especialmente cierto cuando se considera la siguiente comparación.

Aplicaciones web progresivas frente a AMP

Personas como Gazdecki creen que las aplicaciones web progresivas eventualmente reemplazarán a las aplicaciones nativas, pero ¿qué pasa con AMP? ¿Dónde entran aquí las páginas móviles aceleradas y hay un lugar para ambas? Algunas diferencias clave entre estos dos:

• Visibilidad: AMP gana esta batalla. AMP recibe la ayuda de un carrusel en los resultados de búsqueda de Google, donde las aplicaciones web progresivas no reciben un impulso en la capacidad de descubrimiento de los motores de búsqueda.
• Compromiso: las aplicaciones web progresivas no se limitan al uso de HTML o CSS de AMP, por lo que pueden incluir contenido mucho más atractivo que AMP. Todo lo interactivo que requiera JavaScript no se puede crear utilizando el marco AMP. Para AMP, el contenido dinámico está fuera de la mesa.
• Velocidad: la ventaja aquí es para AMP por la misma razón por la que las aplicaciones web progresivas generan participación. AMP solo puede admitir contenido liviano, pero eso hace que los tiempos de carga sean más rápidos.

En Smashing Magazine, Paul Bakaus resume bien la compensación entre los dos formatos:

Para que la experiencia sea rápida y confiable, debe vivir con algunas limitaciones al implementar páginas AMP. AMP no es útil cuando necesita una funcionalidad altamente dinámica, como notificaciones push o pagos web, o cualquier cosa que requiera JavaScript adicional.

Además, dado que las páginas de AMP generalmente se sirven desde una caché de 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 ese primer clic, ya que las plataformas pueden preprocesar páginas AMP de forma segura y económica, una función que también simplifica la inserción (por ejemplo, en un visor en línea).

Pero, al final, ¿realmente tenemos que elegir uno sobre el otro?

Cooperación sobre competencia

Puede optar por utilizar AMP únicamente para crear una experiencia rápida pero sencilla. Puede confiar en una aplicación web progresiva para crear una experiencia de usuario dinámica pero más lenta. O bien, puede comenzar rápido y mantenerse rápido incorporando ambos en su diseño web.

Hoy en día, los usos de AMP junto con las aplicaciones web progresivas son cada vez más frecuentes, y los desarrolladores aprovechan ambos de tres formas.

1. AMP como aplicación web progresiva

Si su contenido es principalmente estático y puede conformarse con la funcionalidad limitada de AMP, esta opción le permite crear experiencias ultrarrápidas como una aplicación web progresiva. AMP, por ejemplo, se construye así: una aplicación web progresiva completamente cargada con AMP. Tiene un trabajador de servicio, que permite el acceso sin conexión, así como un manifiesto, que muestra el banner "Agregar a la pantalla de inicio".

2. AMP a una aplicación web progresiva

Otra forma de usar AMP y una aplicación web progresiva en conjunto es pensar en su página AMP como un enlace a su sitio web. Atrapa al usuario con una carga instantánea y luego lo arrastra hacia su aplicación web progresiva. Esto le permite combinar las páginas AMP de carga rápida con una PWA más dinámica que la primera opción.

3. AMP en una aplicación web progresiva

Como fue el caso de AMP frente a PWA, no tiene por qué ser todo o nada. No es necesario que cree todas sus páginas con AMP; tampoco es necesario separar AMP y PWA como gancho y varilla. Ahora, en realidad, puede AMP solo una pequeña subsección de una sola página, lo que reduce su tamaño y su tiempo de carga sin la compensación completa de la funcionalidad dinámica.

Esto implica el uso de otra forma de AMP llamada "Shadow AMP", que permite que AMP se anide dentro de un área de una página web. El resultado es AMP dentro del caparazón de una aplicación web progresiva. Para verlo en acción, consulte la demostración que creó Google llamada ShadowReader:

¿Listo para crear tu propia aplicación web progresiva?

La creación de una experiencia rápida similar a una aplicación nativa con la capacidad de descubrimiento de la web comienza aquí, donde puede aprender todas las casillas que necesita marcar para cumplir con los criterios de Google para las PWA. Para obtener más información sobre el uso de AMP y PWA juntos, consulte:

• Esta charla de Ben Morss
• Esta charla de Eric Lindley

Cuando esté listo, comience a usar el creador de páginas de destino post-clic de AMP en Instapage para brindar su experiencia de usuario más rápida hasta el momento.