Progressive Web Apps 1. keynote

Introduction to Progressive Web Apps, why is it important, and how to get started. A step by step guidance towards a better user experience.

Transcript

1. Progressive Web App Roadshow Keynote
2. Code of Conduct Treat everyone with respect. Speak up if you see or hear something uncool. Assume positive intent. We have a zero tolerance policy for harassment. Talk to a staffer, or send email to pwa-roadshow-na@google.com. https://goo.gl/s0UaDu
3. Full Stack Developer at Midade co. Software Architect at SavvyEra Technical Mentor at TIEC Intel Ideation Educator Founder at Rinvex me@omranic.com @omranic Abdelrahman Omran
6. https://goo.gl/lLgLiR
7. vs. 13% 87% Mobile web Apps Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 https://goo.gl/FZxTPR
8. 80% of time spent is in users’ top 3 apps Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 https://goo.gl/FZxTPR
9. ZERO Number of apps the average user installs per month Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 https://goo.gl/FZxTPR
10. Reach Capability
11. Reach Capability
12. Progressive Web Apps means radically improving web user experiences
13. User Experiences Need to Be… Reliable
15. Lie-Fi
16. Reliability means never showing the Downasaur
17. User Experiences Need to Be… Reliable Fas t
18. Time is Money 58% 13% 20% https://goo.gl/qKmssT
19. of users abandon sites that take longer than 3 seconds to load 53% https://goo.gl/XuXcJx
20. User Experiences Need to Be… Reliable Fas t Engaging
21. Engaging Home Screen Immersive Notification s
22. Web Push Notifications
23. No surprises!
27. Progressive Web Apps Are Reliable Fas t Engaging
28. Service Workers: Reliable applications Web server
29. Service worker Cache Web server Service Workers: A client-side JavaScript proxy
30. Service Workers: A foundation for Push example.com onpush = function(event) { var data = event.data.json(); self.registration .showNotification(data.title, data.options); }; ServiceWorker.js Push Subscription End Point
31. Why is it important?
32. Reach 1B monthly mobile chrome users
33. https://goo.gl/yOXHPr
34. 76% increase IN CONVERSIONS 14% more monthly ACTIVE USERS ON iOS 30% more monthly ACTIVE USERS ON ANDROID
35. Progressive Web Apps are progressive. (Not everything works everywhere yet, but user experience is the key.)
36. How do I get started?
37. Start Secure
38. HTTPS: Secure connection between site and users
39. Keeping Users Safe Identity Confidentialit y Integrity
40. Three Approaches to PWA-ifying from the ground up a single feature a simple version
41. Three Approaches to PWA-ifying from the ground up a single feature a simple version
42. Both data points are compared to native app 82% less data TO COMPLETE FIRST TRANSACTION 92% less data FOR INITIAL LOAD
43. Three Approaches to PWA-ifying from the ground up a single feature a simple version
44. <1s INITIAL LOADING TIME AND EVEN FASTER FOR SUBSEQUENT LOADS
45. Three Approaches to PWA-ifying from the ground up a single feature a simple version
46. 1,000,000+ OPT-INS IN THE FIRST THREE MONTHS 60+ languages ROLLED OUT GLOBALLY WITH WEB PUSH NOTIFICATIONS
47. Which Approach Will You Take? from the ground up a single feature a simple version
49. Go build! meow
50. Thank You!