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 by JAMIE MARIA SCHOUREN

1,785 views

Published on

The search for App-iness : Progressive Web Apps 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: Technology
  • Be the first to comment

  • Be the first to like this

The search for App-iness : Progressive Web Apps by 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 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 1 sec delay with 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. ✓ 7,22 seconds faster ✓ 90% smaller ✓ More messages, more swipes and longer sessions! @JamieMariaS | @DEITY_PWA
  41. 41. @JamieMariaS | @DEITY_PWA
  42. 42. @JamieMariaS | @DEITY_PWA
  43. 43. ✓ 53% increase in mobile sessions on iOS ✓ 8% purchase from Push ✓ 12% recovered carts by Push @JamieMariaS | @DEITY_PWA
  44. 44. @JamieMariaS | @DEITY_PWA
  45. 45. ✓ 3 seconds on 2G ✓ Core is only 50k gzipped ✓ New market opportunity @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. @JamieMariaS | @DEITY_PWA
  54. 54. @JamieMariaS | @DEITY_PWA
  55. 55. ✓ 70% greater conversion from homescreen ✓ 3x less data usage @JamieMariaS | @DEITY_PWA
  56. 56. ✓ 150% growth engagement Add to Home Users ✓ 97% more conversion rate @JamieMariaS | @DEITY_PWA
  57. 57. @JamieMariaS | @DEITY_PWA HTTPS SERVICE WORKERS WEB APP MANIFEST PROGRESSIVE WEB APPS
  58. 58. @JamieMariaS | @DEITY_PWA SERVICE WORKER: CLIENT SIDE JAVASCRIPT PROXY ✓ Improve performance ✓ Make your app “offline-first” ✓ The base for advanced features
  59. 59. @JamieMariaS | @DEITY_PWA Service Worker Cache Web Server SERVICE WORKER: CLIENT SIDE JAVASCRIPT PROXY
  60. 60. @JamieMariaS | @DEITY_PWA SERVICE WORKERS LIFECYCLE Registration Installation Activation
  61. 61. SERVICE WORKERS: REGISTRATION @JamieMariaS | @DEITY_PWA
  62. 62. SERVICE WORKERS: INSTALLATION @JamieMariaS | @DEITY_PWA
  63. 63. PUSH NOTIFICATIONS @JamieMariaS | @DEITY_PWA
  64. 64. @JamieMariaS | @DEITY_PWA
  65. 65. Notifications API Push API @JamieMariaS | @DEITY_PWA
  66. 66. Notifications API - Permission @JamieMariaS | @DEITY_PWA
  67. 67. Notifications API - Options @JamieMariaS | @DEITY_PWA
  68. 68. #twkdevsummmit19 Notifications API @JamieMariaS | @DEITY_PWA
  69. 69. Notifications API - Actions @JamieMariaS | @DEITY_PWA
  70. 70. notificationclose notificationclick Notifications API - Events @JamieMariaS | @DEITY_PWA
  71. 71. Notifications API - Click @JamieMariaS | @DEITY_PWA
  72. 72. Sending and Receiving Push Notifications @JamieMariaS | @DEITY_PWA
  73. 73. #twkdevsummmit19 My server Push Subscription End Point (push 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. Push Subscription End Point My server @JamieMariaS | @DEITY_PWA
  77. 77. My server Push Subscription End Point @JamieMariaS | @DEITY_PWA
  78. 78. My server Push Subscription End Point @JamieMariaS | @DEITY_PWA
  79. 79. @JamieMariaS | @DEITY_PWA My server Push Subscription End Point
  80. 80. @JamieMariaS | @DEITY_PWA My server Push Subscription End Point Service Worker
  81. 81. @JamieMariaS | @DEITY_PWA
  82. 82. @JamieMariaS | @DEITY_PWA
  83. 83. @JamieMariaS | @DEITY_PWA “Literally any site can be a Progressive Web Apps”
  84. 84. @JamieMariaS | @DEITY_PWA “Progressive Web Apps are the web done right”
  85. 85. ✓ 7 million products live ✓ Instant search ✓ TTM: 2 months @JamieMariaS | @DEITY_PWA
  86. 86. @JamieMariaS | @DEITY_PWA
  87. 87. ✓ 80% growth in organic traffic ✓ Instant loading ✓ Headless architecture @JamieMariaS | @DEITY_PWA
  88. 88. @JamieMariaS | @DEITY_PWA
  89. 89. “Content driven webshop” @JamieMariaS | @DEITY_PWA
  90. 90. HEADLESS WEBSHOP FRONT-END API BACK-END @JamieMariaS | @DEITY_PWA
  91. 91. REACT JS FRAMEWORK SINGLE PAGE APPLICATION NODEJS SERVER @JamieMariaS - @DEITY_PWA
  92. 92. @JamieMariaS | @DEITY_PWA
  93. 93. DEITY Falcon is a Developer Toolkit to build Progressive Web Apps. It is platform agnostic, extensible and ready to build any type of website. https://github.com/deity-io/falcon @JamieMariaS | @DEITY_PWA
  94. 94. Hot reload @JamieMariaS | @DEITY_PWA
  95. 95. @JamieMariaS | @DEITY_PWA@JamieMariaS | @DEITY_PWA
  96. 96. Get started in 3 steps: https://falcon.deity.io/ @JamieMariaS | @DEITY_PWA
  97. 97. So one last thing…. @JamieMariaS | @DEITY_PWA
  98. 98. @JamieMariaS | @DEITY_PWA
  99. 99. @JamieMariaS | @DEITY_PWA
  100. 100. @JamieMariaS | @DEITY_PWA
  101. 101. @JamieMariaS | @DEITY_PWA
  102. 102. www.deity.io slack.deity.io @deity_pwa

×