2. Jungkee Song Github: https://github.com/jungkees Twitter:
@jungkees Google+: +JungkeeSong Facebook:
https://www.facebook.com/jungkees See the animated version
here!
3. Service Workers solve Offline Usage Offline-first Sorry, no
magic. Create your own! Programmable cache control Write your own
HTTP request proxy Background Processing Wanna do things while your
browser is not running? Push messages, System alarm,
BackgroundSync
4. Standard W3C first published working draft
5. Standard Please check out the editors draft!
https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html
https://github.com/slightlyoff/ServiceWorker
6. Principles and terms Runs on same origin Registration keyed
by URL scope Document is controlled by matching SW upon navigation
Installed worker is considered worker in waiting Lifecycle events:
install, activate Functional events: fetch and more to come
7. Are you online? Page Navigation/Resource request Network
fetch Response
8. Are you sufficiently online? Page Navigation/Resource
request Network fetch 4XX 5XX Timeout DNS failure
9. Offline-first Have a Service Worker? fetch event
Navigation/Resource request onfetch Page SW e.respondWith!
(Promise) Promise Cache self.caches.match(url) IDB new Response({!
status: 200,! body: { }! })
14. Installation Registration triggers installation of the SW
Browser fires install event to the installing SW Event handlers may
extend the lifetime of SW for preparing its caches
15. Installation: oninstall In the SW context // caching.js!
this.addEventListener("install", function(e) {! e.waitUntil(! //
Create a cache and add resources!
caches.create(shell-v1).then(function(cache) {! cache.addAll([!
"/app.html",! "/assets/v1/base.css",! "/assets/v1/app.js",!
"/assets/v1/logo.png",! "/assets/v1/intro_video.webm"! ])! })! );!
});
16. Programmable cache control Via Cache / CacheStorage
interfaces [Constructor]! interface Cache {! Promise !
match((Request or ScalarValueString) request, optional
CacheQueryOptions options);! Promise> ! matchAll((Request or
ScalarValueString) request, optional CacheQueryOptions options);!
Promise! add((Request or ScalarValueString) request);! Promise>
! addAll(sequence requests);! Promise! put((Request or
ScalarValueString) request, Response response);! Promise !
delete((Request or ScalarValueString) request, optional
CacheQueryOptions options);! Promise>! keys(optional (Request or
ScalarValueString) request, optional CacheQueryOptions options);!
}; caches.create(myCache).then(function(cache) { })
17. Have a controller yet? Worker in waiting Once
self.oninstall ends So to speak, the installation is successfully
done Not yet controlling the document in scope
navigator.serviceWorker.controller When all the documents in scope
unload The worker in waiting becomes active worker event.replace()
works
18. Handle a fetch: onfetch In the SW context
this.addEventListener("fetch", function(e) {! // No "onfetch"
events are dispatched to the ServiceWorker until it! //
successfully installs.! ! // All operations on caches are async,
including matching URLs, so we use! // Promises heavily.
e.respondWith() even takes Promises to enable this:!
e.respondWith(! caches.match(e.request).catch(function() {! return
e.default();! }).catch(function() {! return
caches.match("/fallback.html");! })! );! });
23. Security Origin relativity Cross origin resource HTTPS-only
Protect end users from man-in-the-middle attacks Existing
playground services (e.g. github.io) now work with HTTPS HTTPS is
coming across much more of the web quickly Devtools can loosen the
restriction for development
24. Performance Event-driven workers Free to shutdown the
worker when handlers done Write your workers as though they will
die after every request Keep the onactivate short Platform
considerations Enhance matching navigation Events implicitly filter
Enhance startup
25. Is it ready for you? Chrome 35+ Partial under flag
chrome://flags/enable-service-worker Firefox nightly Under
consideration IE Partial under flag about:config >
dom.serviceWorkers.enabled Stay alerted! Jakes Is ServiceWorker
ready?
26. References and practices Service Worker - first draft
published - Jake Archibald Specification Githubs explainer Githubs
implementation considerations