serviceworker: new game changer is coming!
DESCRIPTION
I believe ServiceWorker is one of most important specifications for the next web world. Offline and its technologies are very friendly concepts to native application developers. But, now I think front-end developers have to know that for stepping into new paradigm. With ServiceWorker, you can make your web application can run offline, and it also means you can make your web application load extremely fast. I've told about ServiceWorker very briefly in this slide. But you can understand how ServiceWorker runs on. If you want to know its usage, I highly recommend Topeka, which is a polymer demo application at google I/O 2014, that also includes material design and ServiceWorker in inside of it. If you want to know ServiceWorker some more or in detail, I'd like to recommend to read the following, written by Jungkee Song, one of authors of this spec. http://www.slideshare.net/jungkees/service-workersTRANSCRIPT
![Page 1: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/1.jpg)
Service WorkerNew game changer is coming :)
![Page 2: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/2.jpg)
Chang W. Doh
GDG WebTech OrganizerHTML5Rocks/KO Contributor/Coordinator
</hi><hi>
![Page 3: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/3.jpg)
App. Cache!!App. Cache!!Offline!!
Offline!!
Image: ‘Mission Impossible 4’ Movie
![Page 4: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/4.jpg)
We forgot something!But…what?
![Page 5: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/5.jpg)
● 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’!
![Page 6: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/6.jpg)
● 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...
![Page 7: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/7.jpg)
Yay,ServiceWorker!!
![Page 8: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/8.jpg)
● 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
![Page 9: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/9.jpg)
● 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
![Page 10: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/10.jpg)
● 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
![Page 11: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/11.jpg)
● Security○ Origin relativity○ Cross origin resource○ HTTPS only: preventing man-in-the-middle
attacks
Overview:Service Worker
http://www.slideshare.net/jungkees/service-workersa
![Page 12: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/12.jpg)
Typical network fetch:Sufficient response
http://www.slideshare.net/jungkees/service-workersa
![Page 13: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/13.jpg)
Typical network fetch:Insufficient response
http://www.slideshare.net/jungkees/service-workersa
![Page 14: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/14.jpg)
With ServiceWorker:Bring your own cache
http://www.slideshare.net/jungkees/service-workersa
![Page 15: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/15.jpg)
With ServiceWorker:Fallback to network
http://www.slideshare.net/jungkees/service-workersa
![Page 16: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/16.jpg)
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. :)
![Page 17: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/17.jpg)
● Type in the url box
● Check ‘enable’ like:
How to:enable ‘Service Worker’
chrome://flagsor
chrome://flags/#enable-service-worker
36+
![Page 18: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/18.jpg)
● Type in the url box:
● To see the registrations:
How to:know ‘Service Worker is working’
chrome://inspect/#service-workers
chrome://serviceworker-internals
![Page 20: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/20.jpg)
● 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); })); }));});
![Page 21: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/21.jpg)
● 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
![Page 22: ServiceWorker: New game changer is coming!](https://reader036.vdocuments.net/reader036/viewer/2022081323/540d69be8d7f72747e8b49a4/html5/thumbnails/22.jpg)
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