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
580
Ember Service Worker - EmberFest Edition
Marten
October 28, 2016
Tweet
Share
More Decks by Marten
See All by Marten
Ember.Object
martndemus
0
67
EmberJS Amsterdam - Closure Actions
martndemus
0
88
Other Decks in Programming
See All in Programming
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
110
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
color-scheme: light dark; を完全に理解する
uhyo
7
500
Jakarta EE meets AI
ivargrimstad
0
550
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
14
2.4k
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
19
4.2k
Better Code Design in PHP
afilina
0
180
良いコードレビューとは
danimal141
7
2.2k
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
Formの複雑さに立ち向かう
bmthd
1
940
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
521
39k
For a Future-Friendly Web
brad_frost
176
9.6k
Side Projects
sachag
452
42k
A Tale of Four Properties
chriscoyier
158
23k
Making Projects Easy
brettharned
116
6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
4 Signs Your Business is Dying
shpigford
183
22k
Navigating Team Friction
lara
183
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.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