Slides of my talk about Progressive Web Apps - The Web strikes again (La Web contraataca) delivered in Cochabamba Bolivia, for DevFest 2016 in November 2016.

1. Maximiliano Firtman
@firt
Progressive
Web Apps
La web contraataca

2. mobile+web desarrollador & profesor

4. cursos dictados

6. Libros que
escribí

7. Traducciones

9. preguntas
si! por favor!
al final

10. Empecemos!

11. preguntas
por supuesto
al final

18. Nativo vs. Web

23. by Luke Jones (flickr)

31. Si hacemos apps nativas
1- Costo Mayor
2- Hay que publicar en tiendas
3- No son multiplataforma

32. Si hacemos webs
1- Lentas
2- La gente no vuelve al sitio
3- Funcionan solo con internet

33. Progressive Web Apps

34. Progressive Web Apps
1- Definición Abierta
2- Comenzó con Google
3- Lo siguió Firefox, Opera,
Samsung y ahora Microsoft

35. Una Progressive Web App es un
modelo para crear experiencias tipo
app usando las últimas tecnologías
web progresivamente

36. Características
1- Carga Instantánea
2- Responsivo
3- Instalable
4- Seguro
5- Re-engageable
6- Rápido

37. progressive
enhancement
progressive
enhancement

38. no es nuevo

39. Progressive Web Apps
1- Definición abierta
2- Performance, App-like
3- Progressive Enhancement
4- Lo Mejor de la Web y Nativo

40. De la Web
1- Linkeable
2- Descubrimiento
3- Fácil de distribuir
4- Fácil de actualizar
5- Usa Estándares
6- Acceso Offline
7- Icono instalado
8- Push Notifications
9- Experiencia Inmersiva
10- UI Rápida
De Nativo

41. Compatibilidad “Full”
futurefutureandroid /
chromeos

42. PWAs in Action
1- Experiencias y Estadísticas
2- Galería

43. ¡Basta de hablar y veamos una!

45. Experiencias

46. PWA.rocks

47. PWAs in Action
DEMOs

48. 3x más tiempo en la Web

49. +40% re-engagement rate

50. +70% tasa de conversión para
quienes usaron el ícono

51. +104% usuarios

52. 2x páginas visitadas

53. +74% tiempo en la sesión

54. Mismo tiempo ocupado que en
nativo

56. 10x más barato adquirir usuario

58. Habilidades

59. Habilidades
1- Cualquier estado de red
2- Sensores y hardware
3- Multimedia
4- Push Notifications
5- Home Screen (Android)

60. Limitaciones Hoy
1- Multiplatforma
2- Responsive Design
3- First Class Citizen
4- Navegaciones en Redes Sociales
5- Distribución

61. Limitaciones
Se está trabajando en mejorar esto

62. Web APK
1- Llegó a Chromium en mid-2016
2- Creará un APK al instalar
3- Home Screen y App Launcher
4- Integración del SO
5- Intent y App Link
6- Google Play Distribution?

64. Arquitectura

65. Pasos
1- Se desarrolla un sitio rápido
Normal
Server-side rendering
AMP

66. Pasos
2- Agrear Service Worker

67. Pasos
3- Ofrecer Web Notifications

68. Pasos
4- Ofrecer experiencias del estilo
App para el dispositivo

69. Architecture

70. Architecture

71. Architecture

72. Architecture

73. Architecture

74. Architecture

75. Architecture

76. Architecture

77. Architecture

79. Web App Manifest

80. Web App Manifest
W3C Living Spec
Archivo JSON
Meta datos para PWA

81. Web App Manifest Hoy
futurefutureandroid /
chromeos

82. Service Workers

83. Service Workers
• Es un thread
• Tiene un ámbito definido
• Poderes sobre el ámbito
• Trabaja separado de un tab

84. ¿Qué puede ser un ámbito?
• Una ruta de URL
• Como
https://mydomain.com/myapp

85. Poderes de un SW
Ver todos los recursos y pedidos de
red que se hacen al ámbito

86. Se puede responder a nombre del
servidor, sin ir al servidor
Poderes de un SW

87. Service Workers Hoy
flag

88. Detección de Red

89. Detección de Red
1- online / offline navigator events
2- Network Information API
3- fetch and timeouts

90. IndexedDB
Cache Storage
Web Storage
APIs de almacenamiento

91. AMP y PWAs

93. AMP-HTML

95. Páginas AMP
• carga inicial super rcpida
• servida desde a) server o b) cdn
• puede instalar un SW
amp-install-serviceworker

96. Páginas AMP
<amp-install-serviceworker src="/sw.js"
data-iframe-src="https://domain.com/sw.html"
layout="nodisplay">
</amp-install-serviceworker>

99. Web Push Notifications

100. Image by www.pushcrew.com

101. Casos de Uso
• Mantener al usuario actualizado
• Notificar mensajes importantes
• Incrementar conversión

102. Push Hoy
flagmac only

103. Etapas
• 1- Web Push Subscription
• 2- Web Push Delivery

105. Cerrando

106. De la Web
1- Linkeable
2- Descubrimiento
3- Fácil de distribuir
4- Fácil de actualizar
5- Usa Estándares
6- Acceso Offline
7- Icono instalado
8- Push Notifications
9- Experiencia Inmersiva
10- UI Rápida
De Nativo

107. La Web Contraataca

108. Foto de freefoto.com
firtman@gmail.com
@firt
firt.mobi/hpmw