Presentado por Héctor Iván Patricio Moreno en Mobile Day Mexico 2017

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

8. Características de
una PWA

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

19. Aspectos Técnicos

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++”

38. Gracias -
¿Preguntas?