Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

"The search for App-iness : Progressive Web Apps" Jamie Maria Schouren

175 views

Published on

Progressive Web Apps combine the best of the web and the best of apps. They load quickly, even on flaky networks, have an icon on the home screen, can re-engage with users by sending push notifications, and load as top-level, full screen experiences. In this talk Jamie Maria Schouren explains the what, why, and how of Progressive Web Apps, her own quest in search for "app-iness" and with code examples and real life use cases, shows why PWA’s are the future of the web.

Published in: Software
  • Be the first to comment

  • Be the first to like this

"The search for App-iness : Progressive Web Apps" Jamie Maria Schouren

  1. 1. The search for App-iness: building the future with Progressive Web Apps Jamie Maria Schouren - DEITY BV
  2. 2. JAMIE MARIA SCHOUREN DIRECTOR & CO-FOUNDER @JamieMariaS @JamieMariaS | @DEITY_PWA
  3. 3. @JamieMariaS | @DEITY_PWA
  4. 4. @JamieMariaS | @DEITY_PWA
  5. 5. THE FUTURE IS NOW @JamieMariaS | @DEITY_PWA
  6. 6. THE FUTURE IS NOW…? @JamieMariaS | @DEITY_PWA
  7. 7. @JamieMariaS | @DEITY_PWA
  8. 8. @JamieMariaS | @DEITY_PWA 5 BILLION DEVICES CONNECTED
  9. 9. @JamieMariaS | @DEITY_PWA
  10. 10. @JamieMariaS - @DEITY_PWA@JamieMariaS | @DEITY_PWA
  11. 11. @JamieMariaS | @DEITY_PWA
  12. 12. @JamieMariaS | @DEITY_PWA 53% of users will abandon a page that takes more than 3 seconds to load
  13. 13. @JamieMariaS | @DEITY_PWA 100K turnover per day is a potential loss of 2,5 million
  14. 14. @JamieMariaS | @DEITY_PWA
  15. 15. @JamieMariaS | @DEITY_PWA
  16. 16. 2009 HTML 5 @JamieMariaS | @DEITY_PWA
  17. 17. 2009 HTML 5 @JamieMariaS | @DEITY_PWA
  18. 18. 2009 HTML 5 2012 FaceBook Hybrid App @JamieMariaS | @DEITY_PWA
  19. 19. 2009 HTML 5 2012 FaceBook Hybrid App @JamieMariaS | @DEITY_PWA
  20. 20. 2009 HTML 5 2012 FaceBook Hybrid App This Guy From Facebook “The biggest mistake we made as a company was betting too much on HTML5 as opposed to native.” @JamieMariaS | @DEITY_PWA
  21. 21. 2009 HTML 5 2012 FaceBook Hybrid App 2012 Mobile Apps rules! @JamieMariaS | @DEITY_PWA
  22. 22. ADVANTAGES ✓ Performance ✓ Smooth animations & interactions ✓ Instant loading & offline support ✓ Easy acces through homescreen ✓ High engagement @JamieMariaS | @DEITY_PWA
  23. 23. of our time on mobile devices we spend on native apps 87% @JamieMariaS | @DEITY_PWA
  24. 24. App usage is highly concentrated // 80% is spend on 3 apps @JamieMariaS | @DEITY_PWA
  25. 25. Average amount of apps Installed per user per month @JamieMariaS | @DEITY_PWA ZERO
  26. 26. DISADVANTAGES - Distribution problems - Updating is a pain - Application size / memory usage - Different OS systems - 10% revenue to app store @JamieMariaS | @DEITY_PWA
  27. 27. 2009 HTML 5 2012 FaceBook Hybrid App 2012 Mobile Apps rules! @JamieMariaS | @DEITY_PWA The search for App-iness
  28. 28. @JamieMariaS | @DEITY_PWA
  29. 29. @JamieMariaS | @DEITY_PWA The search for App-iness
  30. 30. @JamieMariaS | @DEITY_PWA Non-linkable // not part of “the internet”
  31. 31. 2009 HTML 5 2012 FaceBook Hybrid App 2012 Mobile Apps rules! @JamieMariaS | @DEITY_PWA 2016 The Web strikes back! The search for App-iness
  32. 32. @JamieMariaS | @DEITY_PWA
  33. 33. ✓ <1 second page load ✓ 10 x less data ✓ Instant acces to information ✓ 4 x higher CTR Accelerated Mobile Pages The Weather Channel @JamieMariaS | @DEITY_PWA
  34. 34. @JamieMariaS | @DEITY_PWA
  35. 35. @JamieMariaS | @DEITY_PWA AMP = Fast Landing Pages
  36. 36. @JamieMariaS | @DEITY_PWA PWA = APP-INESS
  37. 37. @JamieMariaS | @DEITY_PWA
  38. 38. @JamieMariaS | @DEITY_PWA FAST RELIABLE ENGAGING PROGRESSIVE WEB APPS
  39. 39. @JamieMariaS | @DEITY_PWA
  40. 40. @JamieMariaS | @DEITY_PWA
  41. 41. @JamieMariaS | @DEITY_PWA
  42. 42. @JamieMariaS | @DEITY_PWA
  43. 43. @JamieMariaS | @DEITY_PWA
  44. 44. @JamieMariaS | @DEITY_PWA
  45. 45. @JamieMariaS | @DEITY_PWA
  46. 46. @JamieMariaS | @DEITY_PWA But what is a PWA?
  47. 47. @JamieMariaS | @DEITY_PWA A Progressive Web App is according to
  48. 48. @JamieMariaS | @DEITY_PWA A Progressive Web App is according to
  49. 49. @JamieMariaS | @DEITY_PWA • Progressive • Responsive • Connectivity independent • App-like • Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable A Progressive Web App is according to
  50. 50. @JamieMariaS | @DEITY_PWA
  51. 51. @JamieMariaS | @DEITY_PWA HTTPS SERVICE WORKERS WEB APP MANIFEST PROGRESSIVE WEB APPS
  52. 52. WEB APP MANIFEST
  53. 53. ✓ 70% greater conversion from homescreen ✓ 3x less data usage @JamieMariaS | @DEITY_PWA
  54. 54. @JamieMariaS | @DEITY_PWA HTTPS SERVICE WORKERS WEB APP MANIFEST PROGRESSIVE WEB APPS
  55. 55. @JamieMariaS | @DEITY_PWA SERVICE WORKER: CLIENT SIDE JAVASCRIPT PROXY ✓ Improve performance ✓ Make your app “offline-first” ✓ The base for advanced features
  56. 56. @JamieMariaS | @DEITY_PWA Service Worker Cache Web Server SERVICE WORKER: CLIENT SIDE JAVASCRIPT PROXY
  57. 57. @JamieMariaS | @DEITY_PWA SERVICE WORKERS LIFECYCLE Registration Installation Activation
  58. 58. SERVICE WORKERS: REGISTRATION @JamieMariaS | @DEITY_PWA
  59. 59. SERVICE WORKERS: INSTALLATION @JamieMariaS | @DEITY_PWA
  60. 60. PUSH NOTIFICATIONS @JamieMariaS | @DEITY_PWA
  61. 61. #twkdevsummmit19@JamieMariaS | @DEITY_PWA
  62. 62. Notifications API Push API @JamieMariaS | @DEITY_PWA
  63. 63. Notifications API - Permission @JamieMariaS | @DEITY_PWA
  64. 64. Notifications API - Options @JamieMariaS | @DEITY_PWA
  65. 65. #twkdevsummmit19 Notifications API @JamieMariaS | @DEITY_PWA
  66. 66. Notifications API - Actions @JamieMariaS | @DEITY_PWA
  67. 67. notificationclose notificationclick Notifications API - Events @JamieMariaS | @DEITY_PWA
  68. 68. Notifications API - Click @JamieMariaS | @DEITY_PWA
  69. 69. Sending and Receiving Push Notifications @JamieMariaS | @DEITY_PWA
  70. 70. #twkdevsummmit19 My server Push Subscription End Point @JamieMariaS | @DEITY_PWA
  71. 71. My server Push Subscription End Point @JamieMariaS | @DEITY_PWA
  72. 72. My server Push Subscription End Point @JamieMariaS | @DEITY_PWA
  73. 73. Push Subscription End Point My server @JamieMariaS | @DEITY_PWA
  74. 74. My server Push Subscription End Point @JamieMariaS | @DEITY_PWA
  75. 75. My server Push Subscription End Point @JamieMariaS | @DEITY_PWA
  76. 76. @JamieMariaS | @DEITY_PWA My server Push Subscription End Point
  77. 77. @JamieMariaS | @DEITY_PWA My server Push Subscription End Point Service Worker
  78. 78. @JamieMariaS | @DEITY_PWA
  79. 79. @JamieMariaS | @DEITY_PWA
  80. 80. @JamieMariaS | @DEITY_PWA “Literally any site can be a Progressive Web Apps”
  81. 81. @JamieMariaS | @DEITY_PWA “Progressive Web Apps are the web done right”
  82. 82. ✓ 7,22 seconds faster ✓ 90% smaller ✓ More messages, more swipes and longer sessions! @JamieMariaS | @DEITY_PWA
  83. 83. ✓ 3 seconds on 2G ✓ Core is only 50k gzipped ✓ New market opportunity @JamieMariaS | @DEITY_PWA
  84. 84. ✓ 150% growth engagement Add to Home Users ✓ 97% more conversion rate @JamieMariaS | @DEITY_PWA
  85. 85. ✓ 80% growth in organic traffic ✓ Instant loading ✓ Headless architecture @JamieMariaS | @DEITY_PWA
  86. 86. @JamieMariaS | @DEITY_PWA
  87. 87. “Content driven webshop” @JamieMariaS | @DEITY_PWA
  88. 88. HEADLESS WEBSHOP FRONT-END API BACK-END @JamieMariaS | @DEITY_PWA
  89. 89. REACT JS FRAMEWORK SINGLE PAGE APPLICATION NODEJS SERVER @JamieMariaS - @DEITY_PWA
  90. 90. @JamieMariaS | @DEITY_PWA
  91. 91. DEITY Falcon is a framework to build Progressive Web Apps. It is platform agnostic, service oriented and ready to build any type of website. https://github.com/deity-io/falcon @JamieMariaS | @DEITY_PWA
  92. 92. ✓ 7 million products live ✓ Instant search ✓ TTM: 2 months @JamieMariaS | @DEITY_PWA
  93. 93. @JamieMariaS | @DEITY_PWA
  94. 94. @JamieMariaS | @DEITY_PWA
  95. 95. ✓ 53% increase in mobile sessions on iOS ✓ 8% purchase from Push ✓ 12% recovered carts by Push @JamieMariaS | @DEITY_PWA
  96. 96. Hot reload @JamieMariaS | @DEITY_PWA
  97. 97. @JamieMariaS | @DEITY_PWA@JamieMariaS | @DEITY_PWA
  98. 98. Get started in 3 steps: https://falcon.deity.io/ @JamieMariaS | @DEITY_PWA
  99. 99. @JamieMariaS | @DEITY_PWA
  100. 100. So one last thing…. @JamieMariaS | @DEITY_PWA
  101. 101. @JamieMariaS | @DEITY_PWA
  102. 102. @JamieMariaS | @DEITY_PWA
  103. 103. www.deity.io slack.deity.io @deity_pwa

×