Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps 1. keynote

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.

D05cd3860dfbf8c68cba35bd6a7ae0ee?s=128

Abdelrahman Omran

May 09, 2017
Tweet

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
  4. None
  5. None
  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

  14. None
  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!

  24. None
  25. None
  26. None
  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
  48. None
  49. Go build! meow

  50. Thank You!