1. Service Worker
New game changer is coming :)

2. Chang W. Doh
<hi> </hi>
GDG WebTech Organizer
HTML5Rocks/KO Contributor/Coordinator
http://cwdoh.com

3. Offline!! App. Cache!!
App. Cache!!
Offline!!
Image: ‘Mission Impossible 4’ Movie

4. We forgot something!
But…what?

5. Mission Impossible:
before the ‘ServiceWorker’!
● Truely controlling offline resources
o Application Cache? OMG!
o Everything managed by your webbrowser!
● Plus, background processing
o Remote Push Notification, Alarm,
Background-update of resources, ...
o Everything run on your webpage!

6. Mission completed:
‘ServiceWorker’ solves...
● Truely controlling offline/network stack
o Programmable cache control
o Custom response
● Plus, background processing
o Remote Push Notification
o Task Scheduler(e.g. Local Notification)
o BackgroundSync
o ...

7. Yay,
ServiceWorker!!

8. Is Service Worker available?
● Specification is worked in progress. But,
o Installed
§ https://slightlyoff.github.io/ServiceWorker/
spec/service_worker/
o Activating
§ http://www.w3.org/TR/service-workers/
● See also: Is Service Worker ready?
o https://jakearchibald.github.io/
isserviceworkerready/
http://www.slideshare.net/jungkees/service-workersa

9. Overview:
● Event-driven scripts
Service Worker
o that run independently of web pages
● ServiceWorker has
o Access to domain-wide events such as
network fetches
o scriptable caches
o The ability to respond to network requests
from certain web pages via script
§ A way for applications to "go offline"
http://www.slideshare.net/jungkees/service-workersa

10. Overview:
● Principles & terms
Service Worker
o Run on same origin
o Registration keyed by URL scope
o Document is controlled by matching
SeviceWorker upon navigation
o Successfully installed worker is considered
worker in waiting
o Lifecycle events
o Functional events
http://www.slideshare.net/jungkees/service-workersa

11. Overview:
● Security
Service Worker
o Origin relativity
o Cross origin resource
o HTTPS only: preventing man-in-the-middle
attacks
http://www.slideshare.net/jungkees/service-workersa

12. Typical network fetch:
Sufficient response
http://www.slideshare.net/jungkees/service-workersa

13. Typical network fetch:
Insufficient response
http://www.slideshare.net/jungkees/service-workersa

14. With ServiceWorker:
Bring your own cache
http://www.slideshare.net/jungkees/service-workersa

15. With ServiceWorker:
Fallback to network
http://www.slideshare.net/jungkees/service-workersa

16. What can we do with
ServiceWokers?
● Eliminating loading time
o Developer knows what is most important
resource in our webpages.
§ We can control ‘request/response flow’ and
‘cache’ with ServiceWorker.
§ and Front-end developers just write their code
without other libraries to control cache-flow.
o Your page will be loaded in an instant!!!
● Other features come and see us soon. :)

17. How to:
enable ‘Service Worker’
● Type in the url box
chrome://flags
or
chrome://flags/#enable-service-worker
● Check ‘enable’ like:
36+

18. How to:
know ‘Service Worker is working’
● Type in the url box:
chrome://inspect/#service-workers
● To see the registrations:
chrome://serviceworker-internals

19. Demo from Google I/O 2014:
Topeka

20. Demo from Google I/O 2014:
● Install
Topeka
// ServiceWorker is ‘Installed’!!!
this.addEventListener("install", function(e) {
e.waitUntil( caches.create("core") // Creating Cache ‘core’!
.then(function(core) {
var resourceUrls = [
"",
"?offline",
"components/core-ajax/core-ajax.html",
// ...
];
return Promise.all(resourceUrls.map(function(relativeUrl) {
// Add resource to cache ‘core’
return core.add(baseUrl + relativeUrl);
}));
}));});

21. Demo from Google I/O 2014:
● fetch
this.addEventListener("fetch", function(e) {
var request = e.request;
if (this.scope.indexOf(request.origin) == -1) { return; }
// Basic read-through caching.
e.respondWith(
caches.match(request, "core").then(
function(response) { return response; },
function() {
// we didn't have it in the cache, so add it to the cache and return it
return caches.get("core").then(
function(core) { log("runtime caching:", request.url);
// FIXME(slighltyoff): add should take/return an array
return core.add(request).then(
function(response) {
return response;
});
// ...
Topeka

22. References
1. ServiceWorker first draft published
2. Specification
3. Explainer
4. Implemetation Considerations
5. Service Workers: Bring your own magic
6. Topeka Demo @Google I/O 2014