Introducción a PWA
¿Qué es una PWA?
Progressive Web App vs. Native App
El proyecto
Google Lighthouse
Creando un Web Manifest
Implementar el Manifest
Service Workers
¿Qué es un Service Worker?
Introducción a Workbox
Implementando Workbox
Aplicando Estrategias de Carga
Google Analytics Offline
Experimentar con Workbox
Funcionalidades Avanzadas
Web Share API
Trabajando Offline
Notificaciones
Publicando la app
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?
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:
Performance.
Instalable en Homescreen.
Dar soporte Offline.
Aportes 37
Preguntas 7
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
Wow, no me habia imaginado llegar hasta aqui en la ruta de Frontend con React, jajajaj
¿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”
¿Vale la pena tomar este curso en pleno 2022 ? o es mejor esperar actualización ?
Genial que el profesor sea Roberto. Me gustó mucho su curso de Next.
Este curso es de antes de la pandemia, cuanto han cambiado las cosas.
Grande dalto
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?
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!
No sabia que podias agregar tu web al Home Screen de un dispositivo
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
PWA = Web optimizadas para Mobile o Progressive App
Más del 50% de nuestros usuarios está en mobile, recuerda MOBILE FIRST 📱
Conexiones 3G y LTE no son particularmente confiables
Un sitio promedio tarda 14 segundos en cargar en móvil
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
¡Mobile First!
Responsive, con foco en UX
Web Manifest
Iconos para App
Soportar malas conexiones
Confiabilidad en todo momento
Mejor experiencia de usuarios
Estar en la Home Screen
No hay App Store
Enfoque en:
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…💚
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!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?