Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ember Service Worker - EmberFest Edition
Search
Marten
October 28, 2016
Programming
5
590
Ember Service Worker - EmberFest Edition
Marten
October 28, 2016
Tweet
Share
More Decks by Marten
See All by Marten
Ember.Object
martndemus
0
71
EmberJS Amsterdam - Closure Actions
martndemus
0
93
Other Decks in Programming
See All in Programming
新世界の理解
koriym
0
140
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
130
新しいモバイルアプリ勉強会(仮)について
uetyo
1
260
Go製CLIツールをnpmで配布するには
syumai
2
1.2k
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
500
Introduction to Git & GitHub
latte72
0
110
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
690
令和最新版手のひらコンピュータ
koba789
14
7.8k
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
2
480
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.9k
A Gopher's Guide to Vibe Coding
danicat
0
150
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
620
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Embracing the Ebb and Flow
colly
86
4.8k
Transcript
A pluggable approach to Service Workers
Marten Schilstra @martndemus
None
None
None
None
A pluggable approach to Service Workers
None
PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
Progressive Web Apps PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
Progressive Web Apps a Service Worker ➡ Ember PWA &
Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
Progressive Web Apps a Service Worker ➡ Ember ember-service-worker PWA
& Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
Progressive Web Apps
Progressive Web Apps Web apps that feel like native apps
by means of progressive enhancement
Service Workers Web App Manifest & Progressive Web Apps
Service Workers Web App Manifest Progressive Web Apps
Service Workers Web App Manifest Offline Progressive Web Apps
Service Workers Web App Manifest Offline Push Notifications Progressive Web
Apps
Service Workers Web App Manifest Offline Push Notifications Background Sync
Progressive Web Apps
Service Workers Web App Manifest Offline Push Notifications Background Sync
Add to home screen Progressive Web Apps
Service Workers Web App Manifest Offline Push Notifications Background Sync
Add to home screen Display mode Progressive Web Apps
https://developers.google.com/web/showcase/
https://developers.google.com/web/showcase/
Still not convinced? http://bit.ly/pwa-talk
Still not convinced? http://bit.ly/pwa-talk
Still not convinced? http://bit.ly/pwa-talk
Still not convinced? http://bit.ly/pwa-talk
Progressive Web Apps
Progressive Web Apps PWA & Ember
PWA & Ember “Ember’s size disqualifies it for mobile use”
PWA & Ember EmberConf 2016: “Instant Web Apps”
PWA & Ember
PWA & Ember FastBoot
PWA & Ember FastBoot Svelte Builds
PWA & Ember FastBoot Svelte Builds Engines
PWA & Ember FastBoot Svelte Builds Engines Service Workers
PWA & Ember Image from: EmberCamp 2016 Keynote by Yehuda
Katz & Tom Dale
PWA & Ember Image from: EmberCamp 2016 Keynote by Yehuda
Katz & Tom Dale
PWA & Ember Deliver the raw HTML content by server-side
rendering with FastBoot Image from: EmberCamp 2016 Keynote by Yehuda Katz & Tom Dale
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
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
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
Progressive Web Apps PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
Serv•ice Work•er (sûrˈvĭs wûrˈkər)
Serv•ice Work•er (sûrˈvĭs wûrˈkər)
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)
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)
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)
Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events
Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events
Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install
Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install Activate
Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install Activate
Fetch
Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install Activate
Fetch Message
Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install Activate
Fetch Message Push
Serv•ice Work•er (sûrˈvĭs wûrˈkər) Lifecycle events Functional Events Install Activate
Fetch Message Push Sync
None
None
None
Serv•ice Work•er (sûrˈvĭs wûrˈkər)
None
Register Origin dockyard.com Scope / sw.js
Install app.js app.css index.html Cache
Activate claim documents cleanup caches ask for permissions
Fetch
Fetch doug.jpg
Fetch doug.jpg
Fetch doug.jpg
Fetch doug.jpg
None
None
None
None
None
None
Push
Push
Sync
Sync
Sync
Sync
Sync
Sync
Sync
Progressive Web Apps PWA & Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
Progressive Web Apps a Service Worker ➡ Ember PWA &
Ember Serv•ice Work•er (sûrˈvĭs wûrˈkər)
B.Y.O. Build your own
public/sw.js if ('serviceWorker' in navigator) { navigator.serviceWorker.register(‘/sw.js’); } app/index.html
No ES6+, Modules, Minification
ember-cli-build.js
ember-cli-build.js
ember-cli-build.js plugin
Awww yeah!
Awww yeah!
Awww yeah! You just wasted someone’s money
Awww yeah! You just wasted someone’s money
Re-solving well-solved, common problems is a waste of resources.
Re-solving well-solved, common problems is a waste of resources. -
Edward Faulkner
Re-solving well-solved, common problems is a waste of resources. -
Edward Faulkner https://github.com/emberjs/rfcs/pull/143
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
Shared solutions
Shared solutions
Shared solutions
Shared solutions
Shared solutions
Shared solutions
Broccoli Service Worker
Broccoli Service Worker
Broccoli Service Worker
None
Great solution, but not flexible enough Broccoli Service Worker
Shared Solution Pyramid of Flexibility
Shared Solution Pyramid of Flexibility common boilerplate
Shared Solution Pyramid of Flexibility common boilerplate common use cases
Shared Solution Pyramid of Flexibility common boilerplate common use cases
custom code
Shared Solution Pyramid of Flexibility common use cases custom code
ember
Shared Solution Pyramid of Flexibility custom code ember addon addon
addon
Ember Service Worker Introducing:
A pluggable approach to Service Workers
Ember Service Worker common boilerplate common use cases custom code
Ember Service Worker service worker compilation and registration common use
cases custom code
Ember Service Worker Common Boilerplate
Ember Service Worker Common Boilerplate Discover all Service Worker plugins
Ember Service Worker Common Boilerplate Discover all Service Worker plugins
Compile all SW code into one file using Babel and Rollup
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
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
None
Ember Service Worker service worker compilation and registration common use
cases custom code
Ember Service Worker service worker compilation and registration plugin plugin
plugin custom code
Ember Service Worker Plugin Examples
Ember Service Worker Plugin Examples Offline first assets
Ember Service Worker Plugin Examples Offline first assets Push notifications
Ember Service Worker Plugin Examples Offline first assets Offline first
API with background sync Push notifications
Ember Service Worker Plugin Examples Offline first assets Offline first
API with background sync Push notifications Asset Diff Patching
Offline first API with background sync
Offline first API with background sync
Offline first API with background sync
Offline first API with background sync
Synchronization? Offline first API with background sync
Service Worker! Offline first API with background sync
Ember Service Worker service worker compilation and registration plugin plugin
plugin custom code
None
None
Ember Service Worker service worker compilation and registration plugin plugin
plugin custom code
/service-worker Ember Service Worker
/service-worker index.js Ember Service Worker
Prediction
Prediction The plugin ecosystem will cover 90% of the use-cases
with little to no configuration.
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.
None
Working with Service Workers exposes you to cache invalidation problems.
You should thoroughly test before deploying to production.
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.
The addon has not been widely tested yet, please install
the addon and test it on your staging deploys and report issues.
None
None
None
Have at least a production ready solution before Safari ships
Service Workers
None