Service Worker 101@cwdoh, GDE for Web

1

Web Worker

2

What will happen from the following code:

var till = Date.now() + 5000; 

while(Date.now() < till) {} 

3

Freeeee...eeeeze!!!

Can't do anything such as scroll, click, ...

4

Your JavaScipt codes runs on UI thread

It means that your code always try to block renderingunder your control. :‒p

5

Long queue makes others unhappy. 6

Web Worker will rescue your browser

Yeah, if you wrote right codes, and find nice customersusing modern browser...probably...

7

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

Web Worker is a browser feature for

Running scripts:

thread‒likelyin Backgroundwith message‒passing

9

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

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

Shared Worker

12

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

Shared Worker is a specific kind of worker:

Accessible from several browsing contextsDifferent interfaceDifferent global scope

14

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

15

Service Worker

16

W3C Specification:

A method that enables applications to take advantage ofpersistent background processing, including hooks toenable bootstrapping of web applications while offline.

17

The core of this system is an event‒driven WebWorker, which responds to events dispatched fromdocuments and other sources.

18

A system for managing installation, versions, andupgrades is provided.

19

The service worker is a generic entry point forevent‒driven background processing in the WebPlatform that is extensible by other specifications.

20

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

Dedicated/Shared Worker vs ServiceWorker

22

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

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

REMINDER:

Persistent background processing is a goal of serviceworker, and it decided all of service worker mechanism

25

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

Spawn? No, install!

 spawn  would be executed at runtime.

27

Lifecycle

28

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

ServiceWorkerState

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

30

31

Sevice Worker families

32

Offline Cache

Make your own dinosaurs! :‒p

33

Remote Push Notification

A long time ago in a galaxy far, far away...there are spams

34

Background Sync.

Browser let you know perfect time to connect to server.

35

❤  HTTPS

For avoiding man‒in‒the‒middle‒attack However you can use  127.0.0.1  aka  localhost  withoutcertificate for testing your module.

36

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

37

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

38

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

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

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

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

Thank you!

43