01- ¿Qué son las aplicaciones web progresivas?

Fernando Herrera

15 Oct 201803:47

Summary

TLDRLas Progressive Web Apps (PWA) son una nueva generación de aplicaciones web que, aunque no son extensiones del navegador, frameworks, plugins o librerías, ofrecen una experiencia similar a las aplicaciones nativas. Estas aplicaciones web pueden ser instaladas en el home screen, funcionan sin conexión a Internet y utilizan características nativas del dispositivo. A diferencia de las aplicaciones nativas, las PWA son más livianas, rápidos en cargar y se actualizan sin intervención del usuario. Ejemplos como la PWA de Twitter, que pesa menos de 80k en comparación con la aplicación nativa de 20 megas, demuestran la ventaja de estas tecnologías.

Takeaways

🌐 Las Progressive Web Apps (PWA) no son una extensión del navegador, un framework, un plugin ni una librería para frameworks existentes.
📱 PWA están diseñadas con 'mobile first' en mente, lo que significa que se crean pensando en dispositivos móviles primero, luego tabletas y finalmente en pantallas grandes.
🚫 Una PWA no es una aplicación responsiva ni una aplicación nativa, y no requiere de app stores para su instalación.
🌐 Una PWA puede ser indistinguible de una aplicación nativa, ofreciendo características como notificaciones push y acceso a la pantalla de inicio del dispositivo.
🔄 PWA funcionan sin conexión a internet y pueden utilizar características nativas del dispositivo.
🚀 PWA son atractivas para los usuarios, confiables, ligeras y rápidas en cargar, lo que es especialmente ventajoso en comparación con aplicaciones nativas.
📲 Las aplicaciones nativas suelen ser más pesadas y requieren actualizaciones a través de app stores, mientras que las PWA se pueden actualizar sin intervención del usuario.
📱 Las PWA pueden ser más livianas que sus equivalentes nativos, como en el caso de la aplicación de Twitter, que pesa 20 MB en comparación con menos de 80 KB para la PWA.
🛠️ La ventaja de construir una PWA incluye la facilidad de actualización y el menor consumo de espacio en dispositivos, lo que puede ser crucial para usuarios con limitaciones de almacenamiento.
🔍 El siguiente vídeo explorará más sobre las razones para construir una PWA y sus beneficios comparativos con aplicaciones nativas.

Q & A

¿Qué son las Progressive Web Apps (PWA)?
-Las Progressive Web Apps son aplicaciones web que se vuelven progresivamente más avanzadas, implementando características como notificaciones push, acceso al home screen y funcionamiento sin conexión, similares a las aplicaciones nativas.
¿Qué no son las PWA según el guion?
-Las PWA no son una extensión del navegador, un framework como React o Angular, un plugin o una librería para frameworks, ni son similares a Flash o Silverlight.
¿Por qué se menciona Facebook en el guion como ejemplo de una aplicación web?
-Facebook se menciona como ejemplo de una aplicación web para ilustrar cómo una PWA puede parecer y funcionar en comparación con una aplicación web tradicional, aunque no es un buen ejemplo de PWA debido a su falta de funcionalidad sin conexión.
¿Qué significa 'mobile first' en el contexto de las PWA?
-Mobile first significa diseñar la aplicación o página web pensando primero en los usuarios que la utilizarán en dispositivos móviles, luego en tabletas y finalmente en pantallas grandes o de escritorio.
¿Qué es una aplicación nativa y cómo se diferencia de una PWA?
-Una aplicación nativa es aquella que se instala a través de las tiendas de aplicaciones, corre en pantalla completa y a menudo se puede agregar al home screen del dispositivo. Las PWA, por otro lado, son aplicaciones web que implementan características similares a las nativas pero sin la necesidad de instalarlas desde una tienda de aplicaciones.
¿Cuáles son las ventajas de las PWA sobre las aplicaciones nativas según el guion?
-Las PWA son ligeras, rápidas en cargar, pueden ser actualizadas sin intervención del usuario y funcionan sin conexión a internet, lo que las hace más atractivas y confiables para los usuarios.
¿Por qué podría ser ventajoso construir una PWA en lugar de una aplicación nativa?
-Al construir una PWA, se evita la necesidad de publicar en tiendas de aplicaciones, se reduce el tamaño de descarga y se puede actualizar sin intervención del usuario, lo que puede resultar en una experiencia de usuario más satisfactoria.
¿Cuál es la relación entre el tamaño de una aplicación nativa y una PWA, según el ejemplo de Twitter en el guion?
-El guion menciona que la aplicación nativa de Twitter pesa 20 megas, mientras que la PWA de Twitter pesa menos de 80 kilobytes, lo que demuestra la diferencia significativa en tamaño y la ventaja de las PWA en términos de almacenamiento y velocidad de carga.
¿Qué características definen a una buena PWA según el guion?
-Una buena PWA debe ser indistinguible de una aplicación nativa, cargar rápidamente, ser confiable y estar actualizada, además de ser ligera y funcionar sin conexión a internet.
¿Qué es lo que 'no' hacen las PWA con respecto a las actualizaciones, según el guion?
-Las PWA no solicitan al usuario que las actualicen; en cambio, el desarrollador tiene control sobre cuándo se realizan las actualizaciones.

Outlines

00:00

🌐 Introducción a las Aplicaciones Web Progresivas (PWA)

El primer párrafo introduce el concepto de Aplicaciones Web Progresivas (PWA), explicando que no son una extensión del navegador, un framework, un plugin o una librería. Se menciona que PWA están diseñadas con una filosofía 'mobile first', es decir, se crean pensando en dispositivos móviles primero, luego tabletas y finalmente en pantallas grandes. Se da un ejemplo con Facebook, destacando que, aunque es una aplicación web, no es un buen ejemplo de PWA debido a su comportamiento en ausencia de conexión a Internet. Se enfatiza que las PWA son aplicaciones web que implementan características como notificaciones push, pueden ser instaladas en el home screen, funcionan sin conexión y utilizan características nativas del dispositivo. Además, se resalta que las PWA son atractivas, confiables, livianas y rápidas en cargar, y que su diferenciación con aplicaciones nativas es que no requieren actualizaciones manuales y suelen ser menos pesadas en tamaño.

Mindmap

Keywords

💡Aplicaciones Web Progresivas (PWA)

Las Aplicaciones Web Progresivas, o PWA, son páginas web que se comportan como aplicaciones nativas, mejorando la experiencia del usuario con características como notificaciones push, acceso a la pantalla de inicio y funcionalidades sin conexión. En el guion, se menciona que no son una extensión del navegador ni un framework, sino una evolución de la experiencia de usuario en la web.

💡Mobile First

Mobile First es un enfoque de diseño que prioriza la creación de páginas web para dispositivos móviles antes de adaptarlas a otros dispositivos. Esto se destaca en el guion al mencionar que las PWA están diseñadas pensando en dispositivos móviles, tabletas y luego en pantallas grandes.

💡Notificaciones Push

Las notificaciones push son mensajes que se envían directamente a los dispositivos móviles desde una aplicación web, sin necesidad de que el usuario esté interactuando con la aplicación en ese momento. En el guion, se menciona que las PWA pueden implementar características como notificaciones push, mejorando así la interacción con el usuario.

💡Sin Conexión a Internet

Una de las características de las PWA es su capacidad para funcionar sin conexión a internet, proporcionando una experiencia de usuario similar a la de una aplicación nativa. Esto se destaca en el guion al mencionar que las PWA funcionan sin conexión y mejoran la experiencia del usuario en situaciones de baja conectividad.

💡Características Nativas del Dispositivo

Las PWA pueden acceder y utilizar características nativas del dispositivo, como la cámara o el GPS, para proporcionar una experiencia más rica y similar a la de una aplicación nativa. El guion menciona este punto para ilustrar cómo las PWA pueden ser indistinguibles de las aplicaciones nativas.

💡Confiable

Confiable hace referencia a la capacidad de las PWA para funcionar de manera predecible y sin fallos, lo que es especialmente importante en entornos con conexión inestable. En el guion, se menciona la confiabilidad de las PWA como una de sus características clave.

💡Peso de la Aplicación

El peso de la aplicación se refiere a su tamaño en almacenamiento, y en el caso de las PWA, suelen ser mucho más ligeras que las aplicaciones nativas. Esto se destaca en el guion al comparar el tamaño de la PWA de Twitter con la aplicación nativa, resaltando la ventaja del menor consumo de recursos.

💡Actualización

Las PWA se pueden actualizar sin la intervención del usuario, lo que significa que siempre estarán en su versión más reciente sin la necesidad de ir a una tienda de aplicaciones para actualizar. En el guion, se menciona que las PWA no requieren de actualizaciones manuales por parte del usuario.

💡Tiendas de Aplicaciones

Las tiendas de aplicaciones, como Google Play Store o Apple App Store, son plataformas donde se distribuyen y actualizan las aplicaciones nativas. El guion compara este proceso con el de las PWA, donde las actualizaciones son automáticas y no requieren de una tienda de aplicaciones.

💡Ejemplo de Facebook

El guion utiliza Facebook como un ejemplo de una aplicación web que no es una PWA, resaltando que no se comporta como una aplicación nativa cuando no hay conexión a internet. Este ejemplo se utiliza para contrastar con las características de las PWA.

Highlights

Las aplicaciones web progresivas (PWA) no son una extensión del navegador, un framework, un plugin o una librería.

PWA no es similar a frameworks como React, Angular, ni a plugins o librerías como jQuery o Underscore.

Ejemplo de una aplicación web: Facebook, que se comporta de cierta manera al ingresar desde un navegador.

Las PWA están diseñadas con un enfoque 'mobile first', pensando primero en dispositivos móviles.

Una aplicación nativa se instala a través de app stores y corre en pantalla completa.

Las PWA pueden implementar características como notificaciones push y ubicarse en el home screen.

PWA funcionan sin conexión a internet y utilizan características nativas del dispositivo.

Las PWA son atractivas, confiables, ligeras y rápidas en cargar.

Una PWA bien hecha es indistinguible de una aplicación nativa.

Las PWA pueden cargarse más rápido y estar actualizadas sin necesidad de intervención del usuario.

Las aplicaciones nativas suelen ser más pesadas y requieren actualizaciones manuales por parte del usuario.

Las PWA tienen el control de cuándo se actualizan, sin preguntar al usuario.

Las aplicaciones nativas suelen pesar mucho más que sus equivalentes PWA, como en el caso de Twitter.

El caso de Twitter muestra que una PWA puede tener una funcionalidad similar a la nativa pero con un peso menor.

La razón para construir una PWA se explorará en el siguiente vídeo.