The document discusses the introduction and potential of service workers as a significant advancement in web technology, enabling better control over offline resources, background processing, and network requests. It highlights key features, specifications, security considerations, and ways to implement and test service workers. Overall, service workers empower developers to manage caching and enhance user experience by improving loading times and enabling offline capabilities.

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