PWA vs. AMP: ¿Cuál es mejor y cómo se diferencian?

Aproximadamente una década después de la introducción del primer iPhone, la web móvil finalmente está alcanzando el estilo de vida de sus usuarios. El pellizco y el zoom han sido eliminados por las páginas receptivas. Las aplicaciones nativas y AMP luchan por tiempos de carga.

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

Parece que los sitios web móviles pueden atraer visitantes, pero no mantenerlos. Una de las tecnologías más nuevas para resolver 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 de la misma manera que 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 eligen instalar, la aplicación se descargará al dispositivo de la misma manera 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:

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

Una vez que se cumplan estos requisitos , la aplicación web móvil se puede ofrecer como descargable a los usuarios. Antes de sumergirnos más profundamente 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 la App Store o Google Play store y viven como iconos 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. Es probable que estas aplicaciones estén en su dispositivo actualmente, como Google Maps, Gmail o Instagram, etc.

¿Que es AMP?

El proyecto de código abierto Accelerated Mobile Pages (AMP) permite a los desarrolladores crear páginas web que se cargan casi al instante 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 entrega una versión en caché de la página cuando es visitada por un usuario.

Aplicaciones web progresivas vs. aplicaciones nativas

Las aplicaciones nativas ofrecen experiencias de usuario instantáneas y sin fisuras, y cuentan con el respaldo de grandes mercados como la App Store y Google Play, ¿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 proporcionan la mejor experiencia de usuario, pero están limitadas a ciertos dispositivos y tienen grandes barreras para la adopción. Las aplicaciones nativas requieren una descarga, lo que significa generar primero una aceptación considerable por parte de los consumidores y perder el beneficio del comportamiento impulsivo. Sentado entre estas opciones está la solución móvil más nueva: PWA.

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

Uso de características: actualmente, mientras que las aplicaciones web pueden aprovechar las características de un dispositivo, las aplicaciones nativas lo pueden hacer más. Cosas como GPS, notificaciones push y gestos están más disponibles en una aplicación nativa.

Restricciones de contenido: para darle a tu aplicación la oportunidad de competir en Google Play o App Store, tendrás que cumplir 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 a cualquier persona la creación de una aplicación independientemente del tipo de contenido.

Conectividad fuera de línea: aquí, el límite se dirige 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 nativa.

Instalación: la instalación de una aplicación nativa requiere una acción significativa en nombre del usuario. Deben 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, continuamente están cerrando la brecha. Eso es especialmente cierto cuando se considera la próxima comparación.

Aplicaciones web progresivas vs. AMP (Accelerated Mobile Pages)

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

Descubrimiento: AMP gana esta batalla. AMP obtiene 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 búsqueda del motor de búsqueda.

Compromiso: las aplicaciones web progresivas no están restringidas al uso de AMP HTML o CSS, por lo que pueden incluir contenido mucho más atractivo que AMP. Cualquier cosa interactiva que requiera JavaScript no se puede crear utilizando el marco de AMP. Para AMP, el contenido dinámico está fuera de lugar.

Velocidad: la ventaja aquí va a AMP por la misma razón que las aplicaciones web progresivas ganan participación. AMP solo puede admitir contenido ligero, pero eso hace que los tiempos de carga sean más rápidos.

En la revista Smashing, Paul Bakaus resume bien el equilibrio entre los dos formatos:

Para que la experiencia sea confiablemente rápida, necesita vivir con algunas limitaciones al implementar páginas AMP. AMP no es útil cuando se necesita una funcionalidad altamente dinámica, como Push Notifications o Web Payments, o cualquier otra cosa que requiera JavaScript adicional.

Además, dado que las páginas de AMP generalmente se sirven desde un caché de AMP, no obtendrá los mayores beneficios de la aplicación de Progressive Web en ese primer clic, ya que su propio trabajador de servicio no se puede ejecutar. 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 preendeudar de forma económica las páginas de AMP, una característica que también simplifica la incorporación (por ejemplo, en un visor en línea).

AMP

PWA

Entrega instantánea
Características avanzadas de la plataforma
Descubrimiento optimizado
Primera entrega altamente dinámica
Sin guiones de usuario
Más lenta
Contenido estático
No incrustada fácilmente

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

Cooperación sobre la competencia

Puede elegir usar AMP únicamente para crear una experiencia rápida pero simple. Puede confiar en una aplicación web progresiva para crear una experiencia de usuario dinámica pero más lenta. O bien, podría comenzar rápido y mantenerse rápido al incorporar 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 maneras.

1. AMP como una 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 rapidísimas como una aplicación web progresiva. AMPbyexample, está construido así: la aplicación web progresiva está completamente cargada por AMP. Tiene un trabajador de servicio, que permite el acceso sin conexión, así como un manifiesto, que muestra el mensaje "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 es pensar en su página de AMP como el gancho de su sitio web. Captura al usuario con una carga instantánea, luego los enrolla en su aplicación web progresiva. Esto le permite combinar las páginas AMP de carga rápida con un PWA más dinámico que la primera opción.

3. AMP en una aplicación web progresiva

Como fue el caso con AMP vs. PWA, no tiene que ser todo o nada. Esto implica usar otra forma de AMP llamada "Shadow AMP", que permite a AMP anidar dentro de un área de una página web. El resultado es AMP dentro del shell de una aplicación web progresiva. Para verlo en acción, echa un vistazo a la demostración que Google creó llamada ShadowReader


Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

0 comments:

Publicar un comentario