Service Worker 
New game changer is coming :)
Chang W. Doh 
<hi> </hi> 
GDG WebTech Organizer 
HTML5Rocks/KO Contributor/Coordinator 
http://cwdoh.com
Offline!! App. Cache!! 
App. Cache!! 
Offline!! 
Image: ‘Mission Impossible 4’ Movie
We forgot something! 
But…what?
Mission Impossible: 
before the ‘ServiceWorker’! 
● Truely controlling offline resources 
o Application Cache? OMG! 
o Eve...
Mission completed: 
‘ServiceWorker’ solves... 
● Truely controlling offline/network stack 
o Programmable cache control 
o...
Yay, 
ServiceWorker!!
Is Service Worker available? 
● Specification is worked in progress. But, 
o Installed 
§ https://slightlyoff.github.io/S...
Overview: 
● Event-driven scripts 
Service Worker 
o that run independently of web pages 
● ServiceWorker has 
o Access to...
Overview: 
● Principles & terms 
Service Worker 
o Run on same origin 
o Registration keyed by URL scope 
o Document is co...
Overview: 
● Security 
Service Worker 
o Origin relativity 
o Cross origin resource 
o HTTPS only: preventing man-in-the-m...
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 
o Developer knows what is most important 
resource in our...
How to: 
enable ‘Service Worker’ 
● Type in the url box 
chrome://flags 
or 
chrome://flags/#enable-service-worker 
● Chec...
How to: 
know ‘Service Worker is working’ 
● Type in the url box: 
chrome://inspect/#service-workers 
● To see the registr...
Demo from Google I/O 2014: 
Topeka
Demo from Google I/O 2014: 
● Install 
Topeka 
// ServiceWorker is ‘Installed’!!! 
this.addEventListener("install", functi...
Demo from Google I/O 2014: 
● fetch 
this.addEventListener("fetch", function(e) { 
var request = e.request; 
if (this.scop...
References 
1. ServiceWorker first draft published 
2. Specification 
3. Explainer 
4. Implemetation Considerations 
5. Se...
Upcoming SlideShare
Loading in …5
×

ServiceWorker: New game changer is coming!

2,759 views

Published on

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-workers

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,759
On SlideShare
0
From Embeds
0
Number of Embeds
455
Actions
Shares
0
Downloads
14
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

ServiceWorker: New game changer is coming!

  1. 1. Service Worker New game changer is coming :)
  2. 2. Chang W. Doh <hi> </hi> GDG WebTech Organizer HTML5Rocks/KO Contributor/Coordinator http://cwdoh.com
  3. 3. Offline!! App. Cache!! App. Cache!! Offline!! Image: ‘Mission Impossible 4’ Movie
  4. 4. We forgot something! But…what?
  5. 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. 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. 7. Yay, ServiceWorker!!
  8. 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. 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. 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. 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. 12. Typical network fetch: Sufficient response http://www.slideshare.net/jungkees/service-workersa
  13. 13. Typical network fetch: Insufficient response http://www.slideshare.net/jungkees/service-workersa
  14. 14. With ServiceWorker: Bring your own cache http://www.slideshare.net/jungkees/service-workersa
  15. 15. With ServiceWorker: Fallback to network http://www.slideshare.net/jungkees/service-workersa
  16. 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. 17. How to: enable ‘Service Worker’ ● Type in the url box chrome://flags or chrome://flags/#enable-service-worker ● Check ‘enable’ like: 36+
  18. 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. 19. Demo from Google I/O 2014: Topeka
  20. 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. 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. 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

×