Mobile Day - Progressive Web Apps
0 recomendaciones131 vistas
Progressive Web Apps (PWA) son aplicaciones web que se comportan como aplicaciones móviles nativas al utilizar tecnologías web estándar como servicios de trabajo y manifestos. Las PWA deben ser responsivas, funcionar sin conexión, parecer aplicaciones, provenir de orígenes seguros y ser fácilmente descubribles. Algunos ejemplos son Twitter Lite y Flipkart. Los desafíos incluyen lograr un rendimiento similar a las aplicaciones nativas y mantenerse al día con los cambios en los navegadores y las expectativas de
Mobile Day - Progressive Web Apps
- 1. Progressive Web Apps El futuro de las aplicaciones
- 2. Acerca del presentador Héctor Iván Patricio Moreno Tech Leader @ HAL Fullstack Dev
- 3. Agenda 1. ¿Qué es una Progressive Web App? 2. Requisitos para lograr una Progressive Web App 3. Retos
- 4. ¿Qué es una PWA?
- 5. Definición corta Es una aplicación/página web que se acerca a comportarse como una aplicación móvil nativa, utilizando las tecnologías comunes en la web.
- 7. “Historia” Nombradas en 2015 por Frances Berriman y Alex Russell, su objetivo era nombrar algo que ya existía para que prosperara
- 9. Responsivas Se tiene que ver bien en cualquier tamaño de pantalla o factor de forma.
- 10. Independientes de la conexión Después de la primera carga deberían funcionar
- 11. Parecen Apps Adoptan el UX e interacciones parecidas a las de una app - Tienen un shell
- 12. Provienen de un origen seguro Usan HTTPS por default.
- 13. Instalables Se pueden poner en el Home del dispositivo móvil
- 14. Se pueden encontrar fácilmente “Discoverable” - Al pertenecer a la web los motores de búsqueda las pueden indexar junto con su contenido
- 15. Re-engage Tienen acceso a sistemas para volver a atrapar al usuario, como las PUSH NOTIFICATIONS
- 16. Ejemplos
- 18. Twitter Lite
- 20. Offline First Declarar y programar service workers.
- 24. HTTPS En todos lados No se aceptan recursos inseguros, no importa qué sea.
- 25. Manifest Declarar caracterísitcas de la PWA - Ícono para diferentes situaciones - Color principal - Nombre corto - Service Worker
- 26. Patrón PRPL Primera parte del rendimiento - Push - Render - Preload - Lazy-load
- 27. Retos
- 28. Rendimiento de un PWA El rendimiento de una PWA se espera parecido al de un aplicación nativa.
- 31. 400ms significaron un 0.44% de pérdidas de sesiones de búsqueda
- 32. 100ms de latencia extra le cuestan el 1% de su ganancia == USD 1 071 M
- 34. Capacidad técnica La complejidad técnica es mayor a una aplicación nativa con las mismas funciones.
- 35. Navegadores
- 36. Los navegadores se quedan atrás
- 37. UX: diseño centrado en el usuario “UX++”