Download - Service Worker 101 (en)
![Page 2: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/2.jpg)
Web Worker
2
![Page 3: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/3.jpg)
What will happen from the following code:
var till = Date.now() + 5000;
while(Date.now() < till) {}
3
![Page 4: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/4.jpg)
Freeeee...eeeeze!!!
Can't do anything such as scroll, click, ...
4
![Page 5: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/5.jpg)
Your JavaScipt codes runs on UI thread
It means that your code always try to block renderingunder your control. :‒p
5
![Page 6: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/6.jpg)
Long queue makes others unhappy. 6
![Page 7: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/7.jpg)
Web Worker will rescue your browser
Yeah, if you wrote right codes, and find nice customersusing modern browser...probably...
7
![Page 8: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/8.jpg)
Web Workers
An API that allows to spawn background workersrunning scripts in parallel to their main page.This allows for thread‒like operation with message‒passing as the coordination mechanism.
8
![Page 9: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/9.jpg)
Web Worker is a browser feature for
Running scripts:
thread‒likelyin Backgroundwith message‒passing
9
![Page 10: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/10.jpg)
Common rules of Web Worker
Has own global scopeCan't directly manipulate the DOMCan't use all of properties and method in window scope
10
![Page 11: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/11.jpg)
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
![Page 12: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/12.jpg)
Shared Worker
12
![Page 13: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/13.jpg)
Shared Worker
A specific kind of worker that can be accessed fromseveral browsing contexts, such as several windows,iframes or even workers. They implement an interface different than dedicatedworkers and have a different global scope,SharedWorkerGlobalScope.
13
![Page 14: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/14.jpg)
Shared Worker is a specific kind of worker:
Accessible from several browsing contextsDifferent interfaceDifferent global scope
14
![Page 15: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/15.jpg)
Usally we call dedicated worker , if it's not shared.
15
![Page 16: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/16.jpg)
Service Worker
16
![Page 17: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/17.jpg)
W3C Specification:
A method that enables applications to take advantage ofpersistent background processing, including hooks toenable bootstrapping of web applications while offline.
17
![Page 18: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/18.jpg)
The core of this system is an event‒driven WebWorker, which responds to events dispatched fromdocuments and other sources.
18
![Page 19: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/19.jpg)
A system for managing installation, versions, andupgrades is provided.
19
![Page 20: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/20.jpg)
The service worker is a generic entry point forevent‒driven background processing in the WebPlatform that is extensible by other specifications.
20
![Page 21: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/21.jpg)
Service Worker is another type of workerfor persistent background processing
Having an event‒driven modelManaging installation, versions and upgradesGeneric entry point for other specifications
21
![Page 22: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/22.jpg)
Dedicated/Shared Worker vs ServiceWorker
22
![Page 23: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/23.jpg)
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 itagain.
23
![Page 24: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/24.jpg)
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 systemNicely fit as entry‒point to Remote Notification,Background Sync. and so on.
24
![Page 25: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/25.jpg)
REMINDER:
Persistent background processing is a goal of serviceworker, and it decided all of service worker mechanism
25
![Page 26: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/26.jpg)
Why event‒driven model?
Promised events enable Persistent background processing even if page isn't loading. It helps of implementing features that need somethingmore than pages.
26
![Page 27: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/27.jpg)
Spawn? No, install!
spawn would be executed at runtime.
27
![Page 28: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/28.jpg)
Lifecycle
28
![Page 29: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/29.jpg)
2.1.1 lifetime
The lifetime of a service worker is tied to the executionlifetime of events, not references held by service workerclients to the ServiceWorker object.
The user agent may terminate service workers at anytime it has no event to handle or detects abnormaloperation such as infinite loops and tasks exceedingimposed time limits, if any, while handling the events.
29
![Page 30: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/30.jpg)
ServiceWorkerState
enum ServiceWorkerState { "installing", "installed", "activating", "activated", "redundant" };
30
![Page 31: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/31.jpg)
31
![Page 32: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/32.jpg)
Sevice Worker families
32
![Page 33: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/33.jpg)
Offline Cache
Make your own dinosaurs! :‒p
33
![Page 34: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/34.jpg)
Remote Push Notification
A long time ago in a galaxy far, far away...there are spams
34
![Page 35: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/35.jpg)
Background Sync.
Browser let you know perfect time to connect to server.
35
![Page 36: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/36.jpg)
❤ HTTPS
For avoiding man‒in‒the‒middle‒attack However you can use 127.0.0.1 aka localhost withoutcertificate for testing your module.
36
![Page 38: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/38.jpg)
Pros. and Cons.What do we have to think about before adopting SW?
38
![Page 39: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/39.jpg)
There's no Polyfills!
Everything has two sides.
We don't need to manage polyfills and check ourcodes run well on cross‒browsing environments. :‒)We don't use polyfill for using SW features onunsupport browsers. :‒/
39
![Page 40: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/40.jpg)
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
![Page 41: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/41.jpg)
Links [1/2]
Specifications
Service WorkerPush APINotification APIFetch API
Some articles
Offline cookbook2016 ‒ the year of web streamsPush notifications on the open WebWeb Push EncryptionIs service worker ready?
41
![Page 42: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/42.jpg)
Links [2/2]
Case studies
Production case studies @developers.google.com
Codes
Service Worker 101 simple demo codeSimple Push Demo by @gauntface
Tools
sw‒precachesw‒toolbox
42
![Page 43: Service Worker 101 (en)](https://reader034.vdocuments.mx/reader034/viewer/2022042723/58ee81011a28abc12b8b4675/html5/thumbnails/43.jpg)
Thank you!
43