Ember Service Worker - EmberFest Edition

Transcript

1. A pluggable approach to Service Workers
2. Marten Schilstra @martndemus
7. A pluggable approach to Service Workers
9. PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
10. Progressive Web Apps PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
11. Progressive Web Apps a Service Worker ➡ Ember PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
12. Progressive Web Apps a Service Worker ➡ Ember ember-service-worker PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
13. Progressive Web Apps
14. Progressive Web Apps Web apps that feel like native apps by means of progressive enhancement
15. Service Workers Web App Manifest & Progressive Web Apps
16. Service Workers Web App Manifest Progressive Web Apps
17. Service Workers Web App Manifest Offline Progressive Web Apps
18. Service Workers Web App Manifest Offline Push Notifications Progressive Web Apps
19. Service Workers Web App Manifest Offline Push Notifications Background Sync Progressive Web Apps
20. Service Workers Web App Manifest Offline Push Notifications Background Sync Add to home screen Progressive Web Apps
21. Service Workers Web App Manifest Offline Push Notifications Background Sync Add to home screen Display mode Progressive Web Apps
22. https://developers.google.com/web/showcase/
23. https://developers.google.com/web/showcase/
24. Still not convinced? http://bit.ly/pwa-talk
25. Still not convinced? http://bit.ly/pwa-talk
26. Still not convinced? http://bit.ly/pwa-talk
27. Still not convinced? http://bit.ly/pwa-talk
28. Progressive Web Apps
29. Progressive Web Apps PWA & Ember
30. PWA & Ember “Ember’s size disqualifies it for mobile use”
31. PWA & Ember EmberConf 2016: “Instant Web Apps”
32. PWA & Ember
33. PWA & Ember FastBoot
34. PWA & Ember FastBoot Svelte Builds
35. PWA & Ember FastBoot Svelte Builds Engines
36. PWA & Ember FastBoot Svelte Builds Engines Service Workers
37. PWA & Ember Image from: EmberCamp 2016 Keynote by Yehuda Katz & Tom Dale
38. PWA & Ember Image from: EmberCamp 2016 Keynote by Yehuda Katz & Tom Dale
39. PWA & Ember Deliver the raw HTML content by server-side rendering with FastBoot Image from: EmberCamp 2016 Keynote by Yehuda Katz & Tom Dale
40. Image from: EmberCamp 2016 Keynote by Yehuda Katz & Tom Dale PWA & Ember Load the minimum amount of JS needed by eliminating dead code and deferring to lazy-loading engines
41. PWA & Ember A Service Worker makes the application rely less on the network by pre-loading frequently-used data and assets Image from: EmberCamp 2016 Keynote by Yehuda Katz & Tom Dale
42. make css, js, fonts and logo images offline first on install make images and other assets offline first on demand use IndexedDB as fallback for the API PWA & Ember
43. Progressive Web Apps PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
44. Serv•ice Work•er (sûrˈvĭs wûrˈkər)
45. Serv•ice Work•er (sûrˈvĭs wûrˈkər)
46. An event-driven Web Worker, which responds to events dispatched from documents and other sources Serv•ice Work•er (sûrˈvĭs wûrˈkər)
47. Not attached to a particular document, instead it is registered to an origin and a scope Serv•ice Work•er (sûrˈvĭs wûrˈkər)
48. Only active while handling events, assume the browser kills it until the next event happens Serv•ice Work•er (sûrˈvĭs wûrˈkər)
49. Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events
50. Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events
51. Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install
52. Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install Activate
53. Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install Activate Fetch
54. Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install Activate Fetch Message
55. Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install Activate Fetch Message Push
56. Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install Activate Fetch Message Push Sync
60. Serv•ice Work•er (sûrˈvĭs wûrˈkər)
62. Register Origin dockyard.com Scope / sw.js
63. Install app.js app.css index.html Cache
64. Activate claim documents cleanup caches ask for permissions
65. Fetch
66. Fetch doug.jpg
67. Fetch doug.jpg
68. Fetch doug.jpg
69. Fetch doug.jpg
76. Push
77. Push
78. Sync
79. Sync
80. Sync
81. Sync
82. Sync
83. Sync
84. Sync
85. Progressive Web Apps PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
86. Progressive Web Apps a Service Worker ➡ Ember PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
87. B.Y.O. Build your own
88. public/sw.js if ('serviceWorker' in navigator) { navigator.serviceWorker.register(‘/sw.js’); } app/index.html
89. No ES6+, Modules, Minification
90. ember-cli-build.js
91. ember-cli-build.js
92. ember-cli-build.js plugin
93. Awww yeah!
94. Awww yeah!
95. Awww yeah! You just wasted someone’s money
96. Awww yeah! You just wasted someone’s money
97. Re-solving well-solved, common problems is a waste of resources.
98. Re-solving well-solved, common problems is a waste of resources. - Edward Faulkner
99. Re-solving well-solved, common problems is a waste of resources. - Edward Faulkner https://github.com/emberjs/rfcs/pull/143
100. Don't waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel. http://emberjs.com
101. Shared solutions
102. Shared solutions
103. Shared solutions
104. Shared solutions
105. Shared solutions
106. Shared solutions
107. Broccoli Service Worker
108. Broccoli Service Worker
109. Broccoli Service Worker
111. Great solution, but not flexible enough Broccoli Service Worker
112. Shared Solution Pyramid of Flexibility
113. Shared Solution Pyramid of Flexibility common boilerplate
114. Shared Solution Pyramid of Flexibility common boilerplate common use cases
115. Shared Solution Pyramid of Flexibility common boilerplate common use cases custom code
116. Shared Solution Pyramid of Flexibility common use cases custom code ember
117. Shared Solution Pyramid of Flexibility custom code ember addon addon addon
118. Ember Service Worker Introducing:
119. A pluggable approach to Service Workers
120. Ember Service Worker common boilerplate common use cases custom code
121. Ember Service Worker service worker compilation and registration common use cases custom code
122. Ember Service Worker Common Boilerplate
123. Ember Service Worker Common Boilerplate Discover all Service Worker plugins
124. Ember Service Worker Common Boilerplate Discover all Service Worker plugins Compile all SW code into one file using Babel and Rollup
125. Ember Service Worker Common Boilerplate Discover all Service Worker plugins Compile all SW code into one file using Babel and Rollup Compile the SW registration code, w Babel and Rollup
126. Ember Service Worker Common Boilerplate Injects Service Worker Registration into index.html Discover all Service Worker plugins Compile all SW code into one file using Babel and Rollup Compile the SW registration code, w Babel and Rollup
128. Ember Service Worker service worker compilation and registration common use cases custom code
129. Ember Service Worker service worker compilation and registration plugin plugin plugin custom code
130. Ember Service Worker Plugin Examples
131. Ember Service Worker Plugin Examples Offline first assets
132. Ember Service Worker Plugin Examples Offline first assets Push notifications
133. Ember Service Worker Plugin Examples Offline first assets Offline first API with background sync Push notifications
134. Ember Service Worker Plugin Examples Offline first assets Offline first API with background sync Push notifications Asset Diff Patching
135. Offline first API with background sync
136. Offline first API with background sync
137. Offline first API with background sync
138. Offline first API with background sync
139. Synchronization? Offline first API with background sync
140. Service Worker! Offline first API with background sync
141. Ember Service Worker service worker compilation and registration plugin plugin plugin custom code
144. Ember Service Worker service worker compilation and registration plugin plugin plugin custom code
145. /service-worker Ember Service Worker
146. /service-worker index.js Ember Service Worker
147. Prediction
148. Prediction The plugin ecosystem will cover 90% of the use-cases with little to no configuration.
149. Prediction The plugin ecosystem will cover 90% of the use-cases with little to no configuration. The other 10% can be achieved by writing custom code or building private plugins.
151. Working with Service Workers exposes you to cache invalidation problems. You should thoroughly test before deploying to production.
152. The code isn't backed by a decent automated test- suite yet, this is because testing Service Workers is a new problem, that hasn't been done or documented that much.
153. The addon has not been widely tested yet, please install the addon and test it on your staging deploys and report issues.
157. Have at least a production ready solution before Safari ships Service Workers