Service WorkerNew game changer is coming :)

Chang W. Doh

GDG WebTech OrganizerHTML5Rocks/KO Contributor/Coordinator

</hi><hi>

App. Cache!!App. Cache!!Offline!!

Offline!!

Image: ‘Mission Impossible 4’ Movie

We forgot something!But…what?

● Truely controlling offline resources○ Application Cache? OMG!○ Everything managed by your webbrowser!

● Plus, background processing○ Remote Push Notification, Alarm,

Background-update of resources, ...○ Everything run on your webpage!

Mission Impossible:before the ‘ServiceWorker’!

● Truely controlling offline/network stack○ Programmable cache control○ Custom response

● Plus, background processing○ Remote Push Notification○ Task Scheduler(e.g. Local Notification)○ BackgroundSync○ ...

Mission completed:‘ServiceWorker’ solves...

Yay,ServiceWorker!!

● Specification is worked in progress. But,○ Installed

■ https://slightlyoff.github.io/ServiceWorker/spec/service_worker/

○ Activating■ http://www.w3.org/TR/service-workers/

● See also: Is Service Worker ready?○ https://jakearchibald.github.

io/isserviceworkerready/

Is Service Worker available?

http://www.slideshare.net/jungkees/service-workersa

● Event-driven scripts○ that run independently of web pages

● ServiceWorker has○ Access to domain-wide events such as

network fetches○ scriptable caches○ The ability to respond to network requests

from certain web pages via script■ A way for applications to "go offline"

Overview:Service Worker

http://www.slideshare.net/jungkees/service-workersa

● Principles & terms○ Run on same origin○ Registration keyed by URL scope○ Document is controlled by matching

SeviceWorker upon navigation○ Successfully installed worker is considered

worker in waiting○ Lifecycle events○ Functional events

Overview:Service Worker

http://www.slideshare.net/jungkees/service-workersa

● Security○ Origin relativity○ Cross origin resource○ HTTPS only: preventing man-in-the-middle

attacks

Overview:Service Worker

http://www.slideshare.net/jungkees/service-workersa

Typical network fetch:Sufficient response

http://www.slideshare.net/jungkees/service-workersa

Typical network fetch:Insufficient response

http://www.slideshare.net/jungkees/service-workersa

With ServiceWorker:Bring your own cache

http://www.slideshare.net/jungkees/service-workersa

With ServiceWorker:Fallback to network

http://www.slideshare.net/jungkees/service-workersa

What can we do with ServiceWokers?

● Eliminating loading time○ 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.

○ Your page will be loaded in an instant!!!

● Other features come and see us soon. :)

● Type in the url box

● Check ‘enable’ like:

How to:enable ‘Service Worker’

chrome://flagsor

chrome://flags/#enable-service-worker

36+

● Type in the url box:

● To see the registrations:

How to:know ‘Service Worker is working’

chrome://inspect/#service-workers

chrome://serviceworker-internals

Demo from Google I/O 2014:Topeka

● Install

Demo from Google I/O 2014: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); })); }));});

● fetchthis.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; });

// ...

Demo from Google I/O 2014:Topeka

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