¿Qué es una PWA?

1/16
Recursos

No hay una definición concreta sobre que es una PWA. Lo mejor es entender como es el panorama actual.

¿Cómo es la web hoy?

  • Spoiler Alert: No funciona muy bien en mobile.
  • Más del 50% de nuestros usuarios está en mobile.
  • Tenemos malas conexiones en los dispositivos móviles, conexiones tipo 3G y LTE no son particularmente confiables. Esto genera que un sitio promedio tarda 14 segundos en cargar en mobile.
  • La UX no es solamente el diseño de nuestra app, tiene que ver con que tan rápido funciona nuestra aplicación en el mundo real, con un teléfono que tiene una conexión mala.

Hay estudios que demuestran la importancia de lograr que tu sitio funcione rápidamente en dispositivos móviles:
• 50% de los usuarios se van de un sitio que tarda más de 3 segundos en cargar.
• Cada segundo de demora nos cuesta un 5-10% de nuestras ventas.

Vamos a centrarnos en tres cosas a lo largo de este curso:

  1.    Performance.
    
  2.    Instalable en Homescreen.
    
  3.    Dar soporte Offline.
    

Aportes 35

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¿Qué es una Progressive Web App?
“Una PWA es un estándar de calidad. Es cómo debería ser la web pensada primero para mobile”

Wow, no me habia imaginado llegar hasta aqui en la ruta de Frontend con React, jajajaj

Genial que el profesor sea Roberto. Me gustó mucho su curso de Next.

El profesor define a las PWA como un standard de calidad, de que la web debería ser pensada primero para mobile. Sin embargo su spoiler alert es “no funciona muy bien en mobile”, lo que me da a pensar que estamos en un proceso en que las PWA no estan del todo maduras?

Comunidad de Platzi<3
El profe tiene la configuración de los service workers, necesitan ejecutar el siguiente comando para crearla con react porque sino les va a costar trabajo más adelante (a mi no me salía la opción de añadir mi app a la pantalla -esto viene en la clase 6, creo, jsjs-)
Por otra parte, en su manifest, para que pueda agarrar las imagenes que ustedes le dan, tienen que cumplir con ciertas medidas.

npx create-react-app NOMBRE_DE_TU_APP --template cra-template-pwa

De todos modos les dejo la documentación donde encontré todas las indicaciones para seguir con el curso<3:
https://create-react-app.dev/docs/making-a-progressive-web-app/#progressive-web-app-metadata

Espero y actualicen pronto este curso, tiene un contenido muy interesante pero se dificulta un poco la ejecución del mismo.

Hola amigos,

Realice el curso basico de programación, creen que puedo empezar este curso inmediatamente, o debería empezar con otro?

Gracias!!!

Puedo hacer una PWA con flutter?

vamos!

Este curso es de antes de la pandemia, cuanto han cambiado las cosas.

Grande dalto

Excelente presentación

A día de hoy noviembre de 2021 este curso necesita una renovación. Los temas que se tratan son muy interesantes y son necesarios cursos nuevos de PWA con React( usando webpack y usando el cra-template-pwa de CRA) Este tema de PWA creo que necesita más de un curso ya que Workbox necesita un curso también.
Les dejo mi PWA espero les sea de utilidad a los nuevos estudiantes que pasen por aquí:

Repositorio
PWA_deploy
Mi portafolio donde encontrarán más proyectos

¿Qué es una PWA? 💻

PWA = Web optimizadas para Mobile o Progressive App

¿Cómo es la web hoy?

Más del 50% de nuestros usuarios está en mobile, recuerda MOBILE FIRST 📱

Malas conexiones 📶

Conexiones 3G y LTE no son particularmente confiables

Sitios muy lentos

Un sitio promedio tarda 14 segundos en cargar en móvil

Una mala UX es carísima

Y no sólo tiene que ver con el diseño de nuestra app

50% de los usuarios se van de un sitio que tarda más de 3 segundos en cargar

Cada segundo de demora nos cuesta un 5-10% de nuestras ventas

PWA es como debe ser la web en mobile, en conexiones malas y no en el lugar perfecto

Lo que vamos a ver 🧾

Performance

¡Mobile First!

Responsive, con foco en UX

Instalable en Home Screen

Web Manifest

Iconos para App

Soporte Offline

Soportar malas conexiones

Confiabilidad en todo momento

Ventajas

Mejor experiencia de usuarios

Estar en la Home Screen

No hay App Store

Enfoque en:

  1. Performance: Velocidad del sitio.
  2. Instalacion en Home Screen: Poder usar fuera de la web
  3. Sporte Offline: Soportar malas conexiones confiables en todo momento.

n

Genial, entusiasmado por entender las bases de este concepto

Excelente!!!

muy buena introducción!!! Va a ser interesante empezar con este tema!

Comenzando el curso!!

Es posible agregar funcionalidad de angular js a aplicaciones PWA? Tengo una pagina web hecha en pug y angular y queria saber si se pueden agregar eventos de angular como apretar un boton, entre otras, en una PWA, Muchas gracias!

Voy a realizar una web de pasarella de pagos como en que me recomiendan realizarlo???

balla se escucha muy prometedor y me gusta mucho la forma en que Roberto explica lo que es PWA, espero que sea asi de sencillo aplicarlo.

Muy interesante

Iniciando Curso… Alla Vamos!!!

Me encanto la intro

Iniciando a jugar con PWA

Vamos a comenzar.

La PWA que hicimos en el curso de React Avanzado me dejó encantado!! Super animadísimo con este curso!!

Hola Devs:
-Comencemos…💚

PWA: Son un futuro de la Web. A hoy, lo son y muy usadas. Se pueden entender como un conjunto de estrategias que se aplican al diseño total de una WebApp. De una forma, son particularmente una web page. Pero es que ésta web funciona como una App Nativa. Significa que tiene un provecho total sobre el objetivo y el performance de lo que se quiere entregar al usuario.

· se tiene en cuenta el diseño Mobile y la conexión a internet.
· Rapidez en la descarga del app, por lo que fluye velozmente, como un app nativa.
· Es un estándar de calidad que se piensa primero para Mobile.

Pase por el mundo IOS y senti en el corazon lo del “el proceso horrible de subir una app a IOS” en verdad es horrible y frustrante asi que voto para las PWA 😛

¿Qué es una PWA?

Son una evolución natural de las aplicaciones web que difuminan la barrera entre la web y las aplicaciones, pudiendo realizar tareas que generalmente solo las aplicaciones nativas podían llevar a cabo. Algunos ejemplos son las notificaciones, el funcionamiento sin conexión a Internet o la posibilidad de probar una versión más ligera antes de bajarte una aplicación nativa de verdad.

Me encantó! Y estoy completamente de acuerdo que son el futuro de la web!