¿Qué es PWA? Una explicación fácil para los no expertos en tecnología

Debe saber desde el principio que esta publicación está escrita desde el punto de vista de un vendedor. (Bueno, puedo leer y escribir algo de HTML y CSS, puedo entender Javascript hasta cierto punto, pero eso no me convierte en un aficionado a la tecnología).

¿Qué es PWA?

PWA ( aplicaciones web progresivas) permite que un navegador web tenga la apariencia de una aplicación móvil nativa (es decir, aplicaciones descargadas de las tiendas iOS y Android). Estas aplicaciones nativas están optimizadas para una experiencia móvil fluida y tienen algunas funcionalidades únicas, como notificaciones web push. La tecnología PWA aprovecha la experiencia de navegación web en navegadores como Chrome y Safari, de modo que se acerca a la de una aplicación nativa. Esto, como resultado, mejora el tráfico y la participación en la web.

El término fue introducido por primera vez por Google en 2015. La parte "progresiva", según Pete LePage, Defensor de desarrolladores de Google, puede explicarse como " a medida que el usuario crea una relación progresiva con la aplicación con el tiempo, se vuelve cada vez más poderosa ". ”.

¿Es lo mismo PWA que un sitio web?

Sí, las aplicaciones web progresivas son sitios web.

Sin embargo, gracias a la tecnología web moderna, se ven y se sienten como una aplicación. Esto significa que los usuarios navegarán por Progressive Web Apps en su navegador con una URL como lo hacen con cualquier sitio web, pero justo después de llegar a la PWA, obtendrán la experiencia de usar una "aplicación", directamente en su navegador, sin necesidad de Descargar e instalar.

Ser una "aplicación" no significa que PWA se limite a dispositivos móviles. También se pueden implementar en el escritorio. De hecho, es probable que haya visitado PWA con frecuencia antes sin darse cuenta. Si alguna vez ha navegado por Instagram, Pinterest o Tinder en su computadora portátil, ¡felicidades! Te has encontrado con algunos de los usuarios de PWA más exitosos en la web.

Echemos un vistazo a un ejemplo de un sitio web de PWA, ya que puede ayudarlo a comprender PWA mucho más fácilmente.

Un ejemplo de PWA

El sitio web de comercio electrónico de G-SP es una PWA. Cuando visita el sitio web en el móvil, puede agregar la URL del sitio web a la pantalla de inicio de su teléfono.

Luego, cada vez que desee volver a visitar el sitio web, estará allí con un ícono en su pantalla de inicio, al igual que cualquier otra aplicación como Facebook o Linkedin.

Al abrir la aplicación web G-SP desde su pantalla de inicio, puede ver que el sitio web ahora está en pantalla completa sin la barra de búsqueda del navegador. Además, hay un menú de navegación similar a una aplicación en la parte inferior. Lo que es más, cuando se desplaza y toca, se siente tan suave como la mantequilla, que es diferente a la experiencia de navegación web que puede haber tenido antes.

 Lectura recomendada:
- Estudio de caso de G-SP PWA: una transformación para una experiencia móvil de primer nivel
- Los 3 mejores casos de uso de PWA

Consejos para saber si un sitio web es una PWA

A menos que sea un desarrollador y profundice en el código fuente del sitio, no hay una forma segura de saber exactamente si un sitio web se basa en la tecnología PWA.

Dicho esto, hay algunos trucos que, aunque no garantizan un resultado exacto, pueden darte algunas señales de que un sitio web determinado es una PWA.

Sitio web de una sola página

Esta es la forma más sencilla de saber si un sitio web puede ser una PWA. Se basa en la naturaleza de PWA: las aplicaciones web progresivas son técnicamente un sitio web de una sola página. Esto no significa que un sitio web basado en PWA solo tenga una sola página. Significa que el evento de vista de página ocurre solo una vez, cuando un usuario carga inicialmente el sitio web. Posteriormente, todas las cargas de página son manejadas por Javascript. Esto es diferente a los sitios web normales, donde cada cambio de página hace que una página se vuelva a cargar junto con su fuente HTML completa.

Entonces, ¿cómo funciona esto? Pues muy sencillo: echa un vistazo a la pestaña activa de tu navegador. Si el sitio es una PWA, cuando cambia de página, el sitio no se vuelve a cargar, lo que significa que no hay una animación de "carga" en la pestaña del navegador.

Podemos decir que el sitio web de The New York Times no es una PWA:

Echemos un vistazo a nuestro sitio web, SimiCart, como ejemplo:

¿Ves lo que quiero decir? ¡El sitio no se recarga cuando cambias de página! Técnicamente, solo te quedas en una "página" todo el tiempo. Es por eso que las páginas de PWA se cargan tan rápido y sin problemas. Todas las páginas se cargan previamente la primera vez que visita el sitio y se le entregan después. No dependen de la velocidad de su red e incluso pueden funcionar sin conexión.

Trabajadores de servicios

No, no se trata de trabajadores humanos. Service Workers es el nombre de la tecnología detrás de una aplicación web progresiva, que impulsa su capacidad fuera de línea, notificaciones automáticas y almacenamiento en caché de recursos. Según Google, los Service Workers son el núcleo de las técnicas de PWA. Entonces, si podemos averiguar si un sitio web usa la tecnología Service Workers, podemos saber si el sitio puede ser un PWA.

Si está utilizando navegadores basados ​​en Chrome, puede verificar esto fácilmente usando la herramienta Inspector. Haga clic derecho en el sitio web que desea verificar, haga clic en Inspeccionar elemento. Luego, vaya a la pestaña Aplicación > Trabajadores de servicios. Puede ver fácilmente si hay trabajadores de servicio en ese sitio.

De nuevo, este truco solo te da una pista de la posibilidad de que cierto sitio web sea una PWA. Aunque es una parte central de PWA, Service Workers no es exclusivo de PWA. Los sitios web que no son PWA también pueden aprovechar Service Workers para mejorar su funcionalidad.

Si desea obtener más información sobre PWA Service Worker, tenemos un artículo exclusivo para que aprenda todo sobre esta increíble tecnología.

Origen seguro HTTPS

Sin embargo, puede saber exactamente si un sitio web no es una PWA mirando su URL. Si la URL de un sitio web comienza con http:// en lugar de https:// , no es una PWA. Esto se debe a que PWA solo puede funcionar en sitios web que se ejecutan en un dominio seguro, que es HTTPS .

¿Qué tan popular es PWA?

Como sugiere Google, PWA es "el futuro de la aplicación móvil", PWA está ganando popularidad, primero entre los grandes jugadores, luego entre las empresas y organizaciones más pequeñas.

Está impulsando competencias en casi todas partes, desde la plataforma Windows hasta los principales mercados de aplicaciones, como Google Play Store.

Puede encontrar que los sitios web de muchos nombres importantes son PWA como Telegram, AliExpress, FlipBoard e incluso las versiones PWA de juegos PWA familiares como 2048 o Web Flap.

Beneficios de PWA: ¿Qué pueden hacer las aplicaciones web progresivas?

En el momento en que se escribió este artículo, PWA ya puede hacer la mayoría de las cosas que antes eran exclusivas de las aplicaciones nativas. Eso incluye acceso a funciones a nivel de dispositivo como cámara y micrófono, GPS, modo fuera de línea, acceso a archivos y mucho más. Para obtener una descripción general de lo que es capaz de hacer PWA, puede consultar https://whatpwacando.today/ .

Por lo tanto, la aplicación web es una excelente opción para quienes desean mejorar la experiencia móvil de su marca en línea, sin invertir en una aplicación móvil.

Profundicemos un poco más en los beneficios de PWA sobre la aplicación móvil normal y los sitios web receptivos:

PWA vs sitio web receptivo

En comparación con, por ejemplo, un sitio web , una PWA es superior por las siguientes razones:

• Velocidad: dado el mismo contenido, PWA se carga más rápido que los sitios web normales gracias a la tecnología Service Workers . Es rápido en la primera carga e incluso más rápido en la segunda carga en adelante, ya que almacena en caché todos los contenidos y los entrega cuando es necesario.
• Modo sin conexión: la disponibilidad sin conexión también es posible con la tecnología Service Workers. Con los trabajadores del servicio debidamente integrados, todos los contenidos se cargan previamente la primera vez que visita la PWA y se entregan después mediante Javascript, lo que convierte a la PWA en el nuevo enfoque de referencia para los sitios web cuya experiencia ininterrumpida es imprescindible . Tenemos una guía sobre cómo hacer que su PWA funcione sin conexión, en caso de que alguna vez necesite una.
• Notificación push web: al igual que una aplicación móvil nativa, PWA puede enviar notificaciones push a la pantalla de inicio de los usuarios directamente desde los navegadores web móviles. Esto es especialmente útil para que las tiendas de comercio electrónico envíen promociones y ofertas personalizadas a sus clientes. Web push para PWA Android se ha habilitado durante mucho tiempo y, afortunadamente, llegará a PWA iOS muy pronto.
• Agregar a la pantalla de inicio : esta función solicita a los usuarios móviles que "instalen" la PWA. Después de que el usuario acepte el aviso, la PWA se agregará a la pantalla de inicio de su dispositivo móvil y se ejecutará como cualquier otra aplicación instalada. Aquí está nuestra guía para agregar PWA a la pantalla de inicio. ¡No te lo pierdas!

El antiguo mensaje "Agregar a la pantalla de inicio" en Chrome se verá así:

 >> Lectura recomendada: Comparación completa de PWA vs Responsive Website

PWA frente a aplicación nativa

Y no solo las PWA son mejores que los sitios web, sino que las marcas ahora también eligen las PWA en lugar de las aplicaciones nativas debido a las siguientes ventajas que brindan las PWA:

• Multiplataforma : una vez que se crea PWA, se puede acceder a él a través de cualquier plataforma móvil como Android, iOS o Windows, ya que PWA se basa en un navegador, no en un sistema operativo.
• Actualizado : los cambios realizados en PWA entrarán en vigencia de inmediato, tan pronto como los usuarios actualicen la página.
• Indexabilidad : debido a que PWA sigue siendo técnicamente un sitio web, su contenido se puede indexar y se puede encontrar en motores de búsqueda como Google. Esto abre oportunidades para las prácticas de SEO (optimización de motores de búsqueda), lo que permite que PWA llegue a una base de usuarios más grande en comparación con la aplicación nativa.
• No es necesario publicar : con las aplicaciones nativas, el proceso de publicación de las tiendas de aplicaciones a veces puede ser un verdadero fastidio. Imagínese enviar su aplicación a las tiendas de aplicaciones, esperando con entusiasmo durante 5 días, solo para recibir un rechazo con una razón que le toma 10 veces para volver a leer y aún no sabe de qué está hablando. Y en algunos casos, es posible que su aplicación nunca sea aceptada, jamás. (Sex shops o productos de vapeo, ¿alguien?). Con PWA, no hay envío de aplicaciones. ¡Qué alivio! En caso de que desee publicar sus PWA en Apple Appstore, Google Play y Microsoft Store, ¡aquí le mostramos cómo hacerlo!
• Bajo costo de desarrollo : dado que PWA se puede desarrollar una vez y luego estar disponible para cualquier plataforma móvil y navegador que lo admita, el costo de desarrollo de PWA es relativamente pequeño en comparación con las aplicaciones nativas. Otra razón es que PWA usa lenguajes de programación y tecnologías que se entienden más comúnmente y tienen una base de desarrolladores mucho más grande.

 Lectura recomendada:
- Aplicación web progresiva frente a aplicación nativa: ¿cuál te conviene más?
- Beneficios de PWA para comercio electrónico

inconveniente de PWA

Obviamente, todo esto suena demasiado bueno para ser verdad; y cuando algo parece demasiado bueno para ser verdad, la gente a menudo pregunta: "Está bien, ¿cuál es el truco?".

PWA, a pesar de sus características que definen la industria, todavía tiene sus inconvenientes:

• Accesibilidad

Dado que la tecnología aún es nueva y todo eso, no existe un mercado de aplicaciones actual para PWA, lo que a su vez reduce su capacidad para llegar a una gama más amplia de audiencias de alguna manera. Sin embargo, hay movimientos de compañías conocidas como Microsoft con su incorporación de PWA en Microsoft Store, lo que hace que el futuro de todas las PWA en Windows 10 no parezca tan descabellado.

• Comunicación con otras aplicaciones instaladas :

Dado que PWA sigue siendo fundamental y esencialmente una página web similar a una aplicación, puede estar limitada de muchas maneras. La mayor limitación podría ser que la comunicabilidad entre aplicaciones es limitada , lo que podría representar un problema para los desarrolladores.

Preguntas más frecuentes

¿Para qué se utiliza PWA?

Una aplicación web que sea rápida, confiable y agradable de usar puede servir para muchos propósitos. Por ejemplo, Tik Tok, las PWA de Aliexpress hacen que las personas se familiaricen con los sitios y, por lo tanto, les piden que descarguen sus aplicaciones nativas. Spotify utiliza PWA para optimizar aún más el rendimiento y la capacidad de respuesta de su sitio web, ofreciendo así a sus usuarios otra opción además de descargar su aplicación. Juegos como pacman o 2048 también usan PWA para llegar a más usuarios web.

¿Cuál es la diferencia entre PWA y una aplicación normal?

Desde el punto de vista técnico, se debe descargar una aplicación nativa de su tienda de aplicaciones mientras puede acceder a PWA a través del navegador web. Desde el punto de vista comercial, PWA puede ser más compatible con SEO, más económico y más rápido de desarrollar. Mientras tanto, una aplicación nativa sigue siendo la mejor para proyectos móviles complicados, además, puede crear una credibilidad de marca más sólida.

¿PWA funciona solo en dispositivos móviles?

No, PWA funciona tanto en computadoras de escritorio, dispositivos móviles y tabletas.

¿Cuál es el lenguaje de programación de PWA?

PWA está construido con un lenguaje de programación popular y tecnologías web que incluyen HTML, CSS, Javascript y WebAssembly.

Conclusión

"¿Reemplazará PWA las aplicaciones nativas?"

Creemos que no.

Aún.

A partir del cuarto trimestre de 2019, hay casi 3 millones de aplicaciones en Google Play y más de 2 millones de aplicaciones en Apple App Store (Statista, 2019). Este número sigue creciendo y no parece que todas esas aplicaciones vayan a ser reemplazadas en el corto plazo. El hábito del usuario es una cosa y no es fácil de cambiar.

Dicho esto, las aplicaciones web progresivas tienen un gran potencial. En SimiCart, creemos que las aplicaciones web progresivas son el futuro. Con su velocidad, flexibilidad de diseño y capacidad de funciones, PWA está destinado a reemplazar el sitio de escritorio, el sitio móvil, las aplicaciones móviles nativas e incluso las aplicaciones de Windows nativas. Sí, lo has oído bien, las aplicaciones de Windows . Solo en el mundo del comercio electrónico, Progressive Web App es actualmente el enfoque de acceso para los propietarios de tiendas que desean una experiencia liviana, receptiva y atractiva para los compradores en línea.

De hecho, las estadísticas muestran que un retraso de 1 mes en la implementación de PWA puede resultar en una pérdida de ingresos de hasta $ 1.4 millones y otros $ 6.8 millones si las marcas deciden retrasarlo seis meses.

Para los propietarios de tiendas de comercio electrónico que buscan una solución PWA de Magento perfecta y completa, aquí en SimiCart ofrecemos un paquete completo para usted y su tienda.