The Search for App-iness - JSConfBE

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 PWAs are the future of the web!

Transcript

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