Web workers allow running scripts in parallel to the main page thread using message passing. Service workers are a specific type of web worker that enable persistent background processing and features like push notifications and offline caching. They have a lifecycle that is independent of pages and provide event-driven processing and version management. While dedicated and shared workers are created and controlled at runtime, service workers are installed in the browser and provide persistent background processing capabilities even when pages aren't active.

1. Service Worker 101
@cwdoh, GDE for Web
1

2. Web Worker
2

3. What will happen from the following code:
var till = Date.now() + 5000;
while(Date.now() < till) {}
3

4. Freeeee...eeeeze!!!
Can't do anything such as scroll, click, ...
4

5. Your JavaScipt codes runs on UI thread
It means that your code always try to block rendering
under your control. :‒p
5

6. Long queue makes others unhappy. 6

7. Web Worker will rescue your browser
Yeah, if you wrote right codes, and find nice customers
using modern browser...probably...
7

8. Web Workers
An API that allows to spawn background workers
running scripts in parallel to their main page.
This allows for thread‒like operation with message‒
passing as the coordination mechanism.
8

9. Web Worker is a browser feature for
Running scripts:
thread‒likely
in Background
with message‒passing
9

10. Common rules of Web Worker
Has own global scope
Can't directly manipulate the DOM
Can't use all of properties and method in window scope
10

11. Code
Thread‒like operation with message‒passing
fetch('my‐encryped‐doc.txt').then(function(res) {
// spawn worker
var worker = new Worker('decorder.js');
worker.onmessage = function(e) {
console.log('Decoded: ' + e.data);
};
// decode blob data with worker
worker.postMessage([res.clone().blob()]);
});
decorder.js
onmessage = function(e) {
// decode...
postMessage(decodedResult);
};
11

12. Shared Worker
12

13. Shared Worker
A specific kind of worker that can be accessed from
several browsing contexts, such as several windows,
iframes or even workers.
They implement an interface different than dedicated
workers and have a different global scope,
SharedWorkerGlobalScope.
13

14. Shared Worker is a specific kind of worker:
Accessible from several browsing contexts
Different interface
Different global scope
14

15. Usally we call dedicated worker , if it's not shared.
15

16. Service Worker
16

17. W3C Specification:
A method that enables applications to take advantage of
persistent background processing, including hooks to
enable bootstrapping of web applications while offline.
17

18. The core of this system is an event‒driven Web
Worker, which responds to events dispatched from
documents and other sources.
18

19. A system for managing installation, versions, and
upgrades is provided.
19

20. The service worker is a generic entry point for
event‒driven background processing in the Web
Platform that is extensible by other specifications.
20

21. Service Worker is another type of worker
for persistent background processing
Having an event‒driven model
Managing installation, versions and upgrades
Generic entry point for other specifications
21

22. Dedicated/Shared Worker vs Service
Worker
22

23. Dedicated Worker & Shared Worker: Runtime ,
Creation , Browsing context
A thread‒like things can be created at runtime.
You should create Worker and control it at runtime.
Only available when page is loaded and created it.
You should create it at every time when wanna use it
again.
23

24. ServiceWorker: Persistent , installation , browser
Daemon‒like thing can be install on system aka browser.
Lifecycle is independent from webpage or browser.
Provide version control for update from system
Nicely fit as entry‒point to Remote Notification,
Background Sync. and so on.
24

25. REMINDER:
Persistent background processing is a goal of service
worker, and it decided all of service worker mechanism
25

26. Why event‒driven model?
Promised events enable Persistent background processing
even if page isn't loading.
It helps of implementing features that need something
more than pages.
26

27. Spawn? No, install!
spawn would be executed at runtime.
27

28. Lifecycle
28

29. 2.1.1 lifetime
The lifetime of a service worker is tied to the execution
lifetime of events, not references held by service worker
clients to the ServiceWorker object.
The user agent may terminate service workers at any
time it has no event to handle or detects abnormal
operation such as infinite loops and tasks exceeding
imposed time limits, if any, while handling the events.
29

30. ServiceWorkerState
enum ServiceWorkerState {
"installing",
"installed",
"activating",
"activated",
"redundant"
};
30

31. 31

32. Sevice Worker families
32

33. Offline Cache
Make your own dinosaurs! :‒p
33

34. Remote Push Notification
A long time ago in a galaxy far, far away...there are spams
34

35. Background Sync.
Browser let you know perfect time to connect to server.
35

36. ❤ HTTPS
For avoiding man‒in‒the‒middle‒attack
However you can use 127.0.0.1 aka localhost without
certificate for testing your module.
36

37. Show me the money code!
Simple Demo: random image for same request. :‒p
37

38. Pros. and Cons.
What do we have to think about before adopting SW?
38

39. There's no Polyfills!
Everything has two sides.
We don't need to manage polyfills and check our
codes run well on cross‒browsing environments. :‒)
We don't use polyfill for using SW features on
unsupport browsers. :‒/
39

40. Adopting it progressively
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
// registered your services depend on SW. :‐)
if (enableServiceWorkerFeatures(registration)) {
// show some helpful message.
showSomeToastMessage();
}
});
}
40

41. Links [1/2]
Specifications
Service Worker
Push API
Notification API
Fetch API
Some articles
Offline cookbook
2016 ‒ the year of web streams
Push notifications on the open Web
Web Push Encryption
Is service worker ready?
41

42. Links [2/2]
Case studies
Production case studies @developers.google.com
Codes
Service Worker 101 simple demo code
Simple Push Demo by @gauntface
Tools
sw‒precache
sw‒toolbox
42

43. Thank you!
43