Service Worker

partners

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

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

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

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

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

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

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

Service Worker

A [gentle] introduction

What is a Worker?

Browsers used to run everything in one thread

Workers runs Javascript in another thread

Then uses events to communicate

There are three kind of Workers

Let's talk about Service workers

Definition

It uses recent async APIs

Runs under conditions

How to use it?

Registration

First install

Next visit

Upgrade process

Emitted events

States & events flow

Avoid pitfalls

Persistence

Tips

Let's go offline!

Offline basics

Cache first, fallback to network

Caching strategies

Receive notifications

Web push notification

Subscription

And more!

Thanks!

Life cycle example

I'm Adrien, frontend developer

https://oodrive.com

a.gibrat@oodrive.com