What is a Worker?

Browsers used to run everything in one thread

sequenceDiagram
    participant B as 🗔 Browser
    participant X
    B->X: HTTP requests, compute, DOM changes ...

🏋 Intensive Javascript

Workers runs Javascript in another thread

sequenceDiagram
    participant B as 🗔 Browser
    participant W as 📃 Worker
    B->>W: create

📓 Worker API

Then uses events to communicate

sequenceDiagram
    participant B as 🗔 Browser
    participant W as 📃 Worker
    B->>W: create
    loop events
        W--xB: message
        B--xW: 
    end

📯 postMessage

There are three kind of Workers

All run background scripts independently of any UI

• Web Workers since 2010, perform heavy computation, ex: pdfjs
• Shared Workers since 2010, shared across same origin webkit in 2015
• Service Workers since 2014, control HTTP requests from same origin

👷 Workers

Let's talk about Service workers

Definition

A service worker acts as a proxy between the browser (your web application) and the network

Main usages

• Offline access

  graph LR
    B("🗔") --> S("📃")
    S -.- N("☁")
    style B fill:none,stroke:none
    style S fill:none,stroke:none
    style N fill:none,stroke:none

• Push notifications

  graph RL
    N("🗨") --> S("📃")
    S -.- B("🗔")
    style B fill:none,stroke:none
    style S fill:none,stroke:none
    style N fill:none,stroke:none

• and more...

📖 Service Worker API

It uses recent async APIs

support: chrome, mozilla, android, opera, edge, safari

• Promises construction to execute code after a task is fulfilled
• postMessage method to communicate between contexts
• fetch function to make simple HTTP requests, successor of XHR

✓ Is Service Worker Ready

Runs under conditions

support: chrome, mozilla, android, opera, edge (development), safari (development)

• HTTPS only, same origin for security reason
• No DOM access no document, nor window
• Behind flag in Edge & Safari Technical Preview

❔ Can I Use Service Worker

How to use it?

Registration

support: chrome, mozilla, android, opera, edge (development), safari (development)

main.js

if (navigator.serviceWorker)
    navigator.serviceWorker
        .register('/service-worker.js', { scope: '/' })
        .then(registration => registration.state)

Multiple Service Workers must register distinct scopes

🍰 Getting Started

First install

support: chrome, mozilla, android, opera, edge (development), safari (development)

service-worker.js

self.addEventListener('install', event => 
    event.waitUntil(/* ready to activate */)
)

graph LR
    P["🗔 page"] -. register .-> I("⚙ install")
    I --> A("✔ activate")
    I --> E("⚠ error")
    style P fill:white
    style I fill:white,stroke:#41b6e8
    style A fill:white,stroke:green
    style E fill:white,stroke:red

⚙ Service Worker Lifecycle

Next visit

support: chrome, mozilla, android, opera, edge (development), safari (development)

• Activates only inside scope
• Skip the install event handler

graph LR
    P["🗔 page"] -. in scope .-> A("✔ activate")
    A -. control .-> P
    click P callback "in the Service Worker Scope"
    style P fill:white,stroke:lightgrey
    style A fill:white,stroke:green

👍 Service Worker: An Introduction

Upgrade process

support: chrome, mozilla, android, opera, edge (development), safari (development)

New Service Worker will wait deactivation of the old one before it activates

graph LR
    subgraph Old Service Worker
        O("✔ activate") --> D("☠ deactivate")
    end
    subgraph New Service Worker
        O("✔ activate") -. updatefound .-> I("⚙ install")
        I -. waiting .-> A("✔ activate")
    end
    style O fill:white,stroke:lightgrey
    style D fill:white,stroke:red
    style I fill:white,stroke:#41b6e8
    style A fill:white,stroke:green

✌ Service Worker Lifecycle

Emitted events

Main functional events

• fetch intercepted an HTTP request (made by main thread)
• message received a message via postMessage
• push received a push notification

🗱 Service Worker events

States & events flow

graph LR
    A("✔ Activated") --> D{"⌛ Idle"}
    D --> F("⚙ Handle event")
    F --> D
    D --> T["☠ Terminated"]
    T --> F
    style A fill:white,stroke:green
    style D fill:white
    style F fill:white,stroke:#41b6e8
    style T fill:white,stroke:red

Service worker may terminate at any time!

🌠 Using Service Workers

Avoid pitfalls

Persistence

You cannot rely on global state within a service worker

• No Local Storage
• But IndexedDB (use a wrapper!)
• Use the Cache interface

🖥 Localforage

Tips

• Beware of redirects, credentials, streams
• Avoid puting version in script URL
• Specific debug tools chrome://serviceworker-internals
• By default first run does not control the main Thread

⚠ Service Workers gotchas

Let's go offline!

Offline basics

support: chrome, mozilla, android, opera, edge (development), safari (development)

service-worker.js

const CACHE = 'my-awsome-pwa',
const FILES = ['/', '/styles.css', '/script.js']
self.addEventListener('install', event =>
    event.waitUntil(
        caches.open(CACHE)
            .then(cache => cache.addAll(FILES))
    )
)

📚 Service Worker specification

Cache first, fallback to network

support: chrome, mozilla, android, opera, edge (development), safari (development)

service-worker.js

self.addEventListener('fetch', event =>
    event.respondWith(
        caches.match(event.request)
            .then(response => response || fetch(event.request))
    )
)

📴 Offline cookbook

Caching strategies

• Cache only KISS Progressive Web Application
• Cache first, falling back to network static assets
• Network first, falling back to cache API resources
• etc

🗃 Workboxjs

Receive notifications

Web push notification

• Used to be complex vendor specific implementations
• Fully standardized browser provides push server
• Native notifications UI with user permission

🚨 Push Notifications in Web App

Subscription

support: chrome, mozilla, android, opera, edge (development), safari (development)

main.js

const registration = await navigator.serviceWorker.ready
const push = await registration.pushManager.subscribe()
sendToBackend(push.endpoint)

manifest.json (chrome only)

{ ..., "gcm_sender_id": "<Your Sender ID Here>" }

📲 Web Push Notifications

And more!

• Background sync wait for stable network connection (backoff)
• Periodic background sync scheduled synch (in design)
• Background fetch HTTP request outlives browser close

🐶 Background-fetching proposal

Thanks!

oodrive.github.io/ServiceWorker.md

• Written in Markdown with Cleaver
• Graphs with Mermaid, code with Highlights
• Theme Select, icons UTF8 with Symbola font
• Jake Archibald, author/advocate of specs
• Google developers website & MDN
• w3c & whatwg

👁 Slides sources

Life cycle example

sequenceDiagram
    participant B as 🗔 Browser
    participant W as 📃 Service Worker
    participant S as ➡ Push Server
    B->>W: register
    activate B
    activate W
    W--xB: message
    deactivate W
    B--xW: fetch
    activate W
    deactivate W
    deactivate B
    S--xW: notification
    activate W
    W--xB: 
    deactivate W