The Web is Mobile

Introducción a Progressive Web Apps.

Transcript

1. The Web is Mobile Victoria Ubaldo G. @VikyAle
2. Photo goes here Hola! Victoria Ubaldo Software Engineer , USMP Solutions Assistant en EVERIS PERÚ Organizer Women Techmakers Lima Speaker y apoyo en empoderamiento de niñas y mujeres en tecnología. Lectora,bloguera,viajera :D @vickyale
3. Photo goes here
4. ¿Cómo es la web que conocemos?
9. vs. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 13% 87% Mobile web Apps
10. 80% de tiempo gasta un usuario en solo 3 aplicaciones Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
11. Capacidad
12. Capacidad Alcance
13. Capacidad Alcance
14. CERO Es el número promedio de aplicaciones instaladas por usuarios al mes Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
15. Capacidad Alcance
16. Capacidad Alcance
17. es un nuevo nivel en mejorar la calidad de la experiencia de uso Progressive Web Apps
18. Confiable La experiencia de uso necesita ser...
20. This amazing software
22. Lie-Fi
23. Confiabilidad significa nunca mostrar el dinosaurio
24. Confiable Rápido La experiencia de uso necesita ser...
25. de usuarios abandonan un sitio que toma más de 3 segundos en cargar. 53%
26. Confiable Rápida Engaging (Involucrar al usuario) La experiencia de uso necesita ser...
27. Auto-adding to Homescreen Fullscreen, theming, orientation, etc. Push notifications Homescreen Immersive Notifications Engaging
28. ` Web Push Notifications
29. ` Sin sorpresas!
30. `
31. https://wapo.com/pwa
39. Confiables Rápidas Engaging Progressive Web Apps son…
40. Web server
42. Service worker Client side proxy (written in JavaScript) Cache Web server
43. Push is built on Service Workers example.com onpush = function(event) { var data = event.data.json(); var t = data.title; var opt = { body: data.body, icon: data.icon, tag: data.tag }; self.registration .showNotification(t, opt); }; Push Subscription End Point ServiceWorker.js
44. are progressive. Progressive Web Apps
45. ¿Cómo empiezo?
46. Mantente Seguro
47. ` HTTPS: Conexión segura entre el sitio y los usuarios
48. Tres enfoques para PWA-ifying desde el principio una sola característica una versión simple
49. Comenzar desde el inicio
50. ` Both data points are compared to native app
51. ` Both data points are compared to native app 92% menos datos para la carga inicial 82% menos datos para completar la primera transacción
52. Construye una aplicación simple
53. `
54. ` <1s tiempo de carga inicial e incluso más rápido para cargas posteriores
55. Foco a una característica específica
56. `
57. ` 30+ lenguajes implementando globalmente con web push notifications
58. ¿Qué enfoque vas a tomar? desde el principio solo una característica una versión simple
60. ¿Cómo creo mi primera PWA?
61. https://codelabs.developers.google.com/
63. Jake Archibald @jaffathecake Paul Lewis @aerotwist Addy Osmani @addyosmani Paul Kinlan @Paul_Kinlan Googlers que trabajan a diario en herramientas y mejoras para PWA
64. Gracias! Twitter : @vikyale