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
65
EmberJS Amsterdam - Closure Actions
martndemus
0
80
Other Decks in Programming
See All in Programming
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
110
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
800
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
470
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
実践!難読化ガイド
mitchan
0
200
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
790
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
GoのIteratorに詳しくなってしまう
inatonix
1
200
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
459
32k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
The Cult of Friendly URLs
andyhume
76
6k
Into the Great Unknown - MozCon
thekraken
29
1.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Adopting Sorbet at Scale
ufuk
73
8.9k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
In The Pink: A Labor of Love
frogandcode
139
22k
A Modern Web Designer's Workflow
chriscoyier
691
190k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
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