O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Progressive Web Apps (español - spanish)

374 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Progressive Web Apps (español - spanish)

  1. 1. Maximiliano Firtman @firt Progressive Web Apps La web contraataca
  2. 2. mobile+web desarrollador & profesor
  3. 3. cursos dictados
  4. 4. Libros que escribí
  5. 5. Traducciones
  6. 6. preguntas si! por favor! al final
  7. 7. Empecemos!
  8. 8. preguntas por supuesto al final
  9. 9. Nativo vs. Web
  10. 10. by Luke Jones (flickr)
  11. 11. Si hacemos apps nativas 1- Costo Mayor 2- Hay que publicar en tiendas 3- No son multiplataforma
  12. 12. Si hacemos webs 1- Lentas 2- La gente no vuelve al sitio 3- Funcionan solo con internet
  13. 13. Progressive Web Apps
  14. 14. Progressive Web Apps 1- Definición Abierta 2- Comenzó con Google 3- Lo siguió Firefox, Opera, Samsung y ahora Microsoft
  15. 15. Una Progressive Web App es un modelo para crear experiencias tipo app usando las últimas tecnologías web progresivamente
  16. 16. Características 1- Carga Instantánea 2- Responsivo 3- Instalable 4- Seguro 5- Re-engageable 6- Rápido
  17. 17. progressive enhancement progressive enhancement
  18. 18. no es nuevo
  19. 19. Progressive Web Apps 1- Definición abierta 2- Performance, App-like 3- Progressive Enhancement 4- Lo Mejor de la Web y Nativo
  20. 20. 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
  21. 21. Compatibilidad “Full” futurefutureandroid / chromeos
  22. 22. PWAs in Action 1- Experiencias y Estadísticas 2- Galería
  23. 23. ¡Basta de hablar y veamos una!
  24. 24. Experiencias
  25. 25. PWA.rocks
  26. 26. PWAs in Action DEMOs
  27. 27. 3x más tiempo en la Web
  28. 28. +40% re-engagement rate
  29. 29. +70% tasa de conversión para quienes usaron el ícono
  30. 30. +104% usuarios
  31. 31. 2x páginas visitadas
  32. 32. +74% tiempo en la sesión
  33. 33. Mismo tiempo ocupado que en nativo
  34. 34. 10x más barato adquirir usuario
  35. 35. Habilidades
  36. 36. Habilidades 1- Cualquier estado de red 2- Sensores y hardware 3- Multimedia 4- Push Notifications 5- Home Screen (Android)
  37. 37. Limitaciones Hoy 1- Multiplatforma 2- Responsive Design 3- First Class Citizen 4- Navegaciones en Redes Sociales 5- Distribución
  38. 38. Limitaciones Se está trabajando en mejorar esto
  39. 39. 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?
  40. 40. Arquitectura
  41. 41. Pasos 1- Se desarrolla un sitio rápido Normal Server-side rendering AMP
  42. 42. Pasos 2- Agrear Service Worker
  43. 43. Pasos 3- Ofrecer Web Notifications
  44. 44. Pasos 4- Ofrecer experiencias del estilo App para el dispositivo
  45. 45. Architecture
  46. 46. Architecture
  47. 47. Architecture
  48. 48. Architecture
  49. 49. Architecture
  50. 50. Architecture
  51. 51. Architecture
  52. 52. Architecture
  53. 53. Architecture
  54. 54. Web App Manifest
  55. 55. Web App Manifest W3C Living Spec Archivo JSON Meta datos para PWA
  56. 56. Web App Manifest Hoy futurefutureandroid / chromeos
  57. 57. Service Workers
  58. 58. Service Workers • Es un thread • Tiene un ámbito definido • Poderes sobre el ámbito • Trabaja separado de un tab
  59. 59. ¿Qué puede ser un ámbito? • Una ruta de URL • Como https://mydomain.com/myapp
  60. 60. Poderes de un SW Ver todos los recursos y pedidos de red que se hacen al ámbito
  61. 61. Se puede responder a nombre del servidor, sin ir al servidor Poderes de un SW
  62. 62. Service Workers Hoy flag
  63. 63. Detección de Red
  64. 64. Detección de Red 1- online / offline navigator events 2- Network Information API 3- fetch and timeouts
  65. 65. IndexedDB Cache Storage Web Storage APIs de almacenamiento
  66. 66. AMP y PWAs
  67. 67. AMP-HTML
  68. 68. Páginas AMP • carga inicial super rcpida • servida desde a) server o b) cdn • puede instalar un SW amp-install-serviceworker
  69. 69. Páginas AMP <amp-install-serviceworker src="/sw.js" data-iframe-src="https://domain.com/sw.html" layout="nodisplay"> </amp-install-serviceworker>
  70. 70. Web Push Notifications
  71. 71. Image by www.pushcrew.com
  72. 72. Casos de Uso • Mantener al usuario actualizado • Notificar mensajes importantes • Incrementar conversión
  73. 73. Push Hoy flagmac only
  74. 74. Etapas • 1- Web Push Subscription • 2- Web Push Delivery
  75. 75. Cerrando
  76. 76. 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
  77. 77. La Web Contraataca
  78. 78. Foto de freefoto.com firtman@gmail.com @firt firt.mobi/hpmw

×