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

Ember Service Worker - EmberFest Edition

9d28829b6426bc1b94fd3f55e7bdeb19?s=47 Marten
October 28, 2016

Ember Service Worker - EmberFest Edition

9d28829b6426bc1b94fd3f55e7bdeb19?s=128

Marten

October 28, 2016
Tweet

Transcript

  1. A pluggable approach to Service Workers

  2. Marten Schilstra @martndemus

  3. None
  4. None
  5. None
  6. None
  7. A pluggable approach to Service Workers

  8. None
  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
  57. None
  58. None
  59. None
  60. Serv•ice Work•er (sûrˈvĭs wûrˈkər)

  61. None
  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

  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  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

  110. None
  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
  127. None
  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
  142. None
  143. None
  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.
  150. None
  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.
  154. None
  155. None
  156. None
  157. Have at least a production ready solution before Safari ships

    Service Workers
  158. None