Progressive Web App - Google IO Extended Alexandria 2017

Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.

Transcript

1. Progressive Web App
2. Web Developer GDG Alexandria Organizer nadermousa92@gmail.com linkedin.com/in/nader-khaled/ facebook.com/Nader.Khaled.Mousa Nader Khaled
5. https://goo.gl/lLgLiR
6. vs. 13% 87% Mobile web Apps Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 https://goo.gl/FZxTPR
7. 80% of time spent is in users’ top 3 apps Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 https://goo.gl/FZxTPR
8. ZERO Number of apps the average user installs per month Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 https://goo.gl/FZxTPR
9. Reach Capability
10. Reach Capability
11. Progressive Web Apps means radically improving web user experiences
12. User Experiences Need to Be… Reliable
14. Lie-Fi
15. Reliability means never showing the Downasaur
16. User Experiences Need to Be… Reliable Fast
17. of users abandon sites that take longer than 3 seconds to load 53% https://goo.gl/XuXcJx
18. User Experiences Need to Be… Reliable Fast Engaging
19. Engaging Home Screen Immersive Notifications
20. Web Push Notifications
21. No surprises!
25. Progressive Web Apps Are Reliable Fast Engaging
26. Service Workers: Reliable applications Web server
27. Service worker Cache Web server Service Workers: A client-side JavaScript proxy
28. Why is it important?
29. Reach 1B monthly mobile chrome users
30. https://goo.gl/yOXHPr
31. 76% increase IN CONVERSIONS 14% more monthly ACTIVE USERS ON iOS 30% more monthly ACTIVE USERS ON ANDROID
32. Progressive Web Apps are progressive. (Not everything works everywhere yet, but user experience is the key.)
33. How do I get started?
34. Start Secure
35. HTTPS: Secure connection between site and users
36. Keeping Users Safe Identity Confidentiality Integrity
37. Three Approaches to PWA-ifying from the ground up a single feature a simple version
38. Three Approaches to PWA-ifying from the ground up a single feature a simple version
39. Both data points are compared to native app 82% less data TO COMPLETE FIRST TRANSACTION 92% less data FOR INITIAL LOAD
40. Three Approaches to PWA-ifying from the ground up a single feature a simple version
41. <1s INITIAL LOADING TIME AND EVEN FASTER FOR SUBSEQUENT LOADS
42. Three Approaches to PWA-ifying from the ground up a single feature a simple version
43. 1,000,000+ OPT-INS IN THE FIRST THREE MONTHS 60+ languages ROLLED OUT GLOBALLY WITH WEB PUSH NOTIFICATIONS
44. Which Approach Will You Take? from the ground up a single feature a simple version
46. Go build! meow
47. Thank You!