Pragmatist's Guide to Service Worker: Smashing NYC 2017

Pragmatist’s Guide to Service Worker I am Lyza Danger Gardner
I am an Open Web Engineer at Bocoup I can be found at @lyzadanger and https://www.lyza.com Smashing Conference NYC 2017

Hi! Service Worker

A Service Worker is a script…

A Service Worker consists of a script.

A Service Worker can act as a proxy.

without service worker…

Client (Browser) Network index.html ? index.html ! browser requests resources
from network…

Client Network

Network Client

Network Client Service Worker

Client Network

• Consists of a script (JavaScript file) • Acts as
a proxy between client (browser) and network A Service Worker: …and quite a lot more. • It can: • define and handle offline experiences • improve online web performance…

Who is this presentation for?

(Yep. There will be JavaScript.)

But there will also be wretchedly-drawn characters!

http://bit.ly/sw-smashing-nyc

• Consists of a script (JavaScript file) • Acts as
a proxy between client (browser) and network • It can: • define and handle offline experiences • improve online web performance… A Service Worker: …and quite a lot more. with regards to this…

Let’s Give it Context.

Notiﬁcations Background Sync Channel Messaging An ecosystem of related APIs

WebWorker

• An object created from within a context • Consists
of a JavaScript ﬁle • The code in that JavaScript ﬁle is run in a worker thread • A web worker has a different global context A Web Worker:

• An object created from within a context • Consists
of a JavaScript ﬁle • The code in that JavaScript ﬁle is run in a worker thread • A web worker has a different global context A Web Worker: ??? ???

worker browsing context e.g. a browser window showing a document
e.g. a ServiceWorker

ServiceWorkerGlobalScope window (worker) thread (execution) thread

ServiceWorkerGlobalScope window (worker) thread (execution) thread Channel Messaging, e.g.

ServiceWorkerGlobalScope window

This is starting to seem complicated.

Eeeek! Power and ﬂexibility involves some complexity.

Service worker is pretty chill.

async only all HTTPS A couple of across-the-board rules.

On its way https://jakearchibald.github.io/isserviceworkerready/ …

Let’s Do Something Basic.

Let’s Make a Service Worker that Accomplishes Nothing.

We’ll create a JavaScript ﬁle for a Service Worker that
will listen for fetch events and…do nothing for now.

listen for fetch events fetch

Service Worker Browser Fetch Event Network listen for fetch events

self.addEventListener('fetch', event => { // Do something about it });
service-worker.js Adding an event listener for ‘fetch’ events

That’s seriously it for the moment…

Registering our Useless Service Worker

We need to add some JavaScript to a web page
to register the Service Worker. <script> //… </script> index.html service-worker.js

A Service Worker is registered against a scope.

Is a path or a pattern, relative to the service
worker script’s location, you know, e.g.: ./ ./foo ./foo/bar/baz Scope:

I want to register the service worker located at service-worker.js
against the scope ./blog index.html <script> //… </script>

I want to register the service worker located at service-worker.js
against the scope ./blog index.html blog service-worker.js

<!doctype html> <html> <head>  </head> <body> <script>
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js'); } </script> </body> </html> index.html Register a service worker

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js'); } index.html detail Feature
detection for service worker support

navigator.serviceWorker …provides an object…including facilities to register, unregister and update
service workers, and access the state of service workers and their registrations. Sincerely, The Service Worker Speciﬁcation [ServiceWorkerContainer]

.register( ) navigator.serviceWorker scriptURL,options

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js'); } index.html detail

Wait a minute: what happened to scope?

navigator.serviceWorker.register(scriptURL, options) Scope (String) can be passed as second argument

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js', './'); } code example

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js'); } index.html detail Default
scope is ‘./’

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js'); } self.addEventListener('fetch', event =>
{ // Do something about it }); index.html detail service-worker.js

Let’s enhance the uselessness.

self.addEventListener('fetch', event => { // Do something about it });
service-worker.js

FetchEvent

Things in FetchEvent…

request respondWith(…) FetchEvent object

Respond with…with…? self.addEventListener('fetch', event => { event.respondWith( ); }); FetchEvent.respondWith(…)
service-worker.js

The fetch API

Request Response

fetch( ) Request Response Network fetch a request, then (we
hope) get a response

Response FetchEvent.respondWith( )

service-worker.js FetchEvent self.addEventListener('fetch', event => { });

service-worker.js self.addEventListener('fetch', event => { event.respondWith( ); }); FetchEvent.respondWith()

fetch( ) Request Response

service-worker.js self.addEventListener('fetch', event => { event.respondWith( fetch(event.request) ); }); FetchEvent.request
respondWith the Promise returned by fetch

Service Worker Browser Fetch Event Network I need ‘./foo.gif’

JavaScript Promises in 60 seconds

Promise

= fetch( ) Promise Request

Fulﬁlled Pending

Rejected Pending

Pending OR Settled: Fulﬁlled Settled: Rejected

A Service Worker that Does Something!

We’ll extend our Service Worker so that it shows a
custom ofﬂine message to a user when they are ofﬂine.

Client Network Online

<!doctype html> <html> <head> </head> <body> <p>If you see this,
you are online</p> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js', './'); } </script> </body> </html> index.html

Network Client Service Worker Oﬄine

self.addEventListener('fetch', event => { event.respondWith( fetch(event.request) ); }); service-worker.js Network
The Happy (Online) Path

fetch( ) Promise Request Response Network The Happy (Online) Path

fetch( ) Request Oﬄine! Network The Sad (Oﬄine) Path

fetch( ) Request Oﬄine! Network .catch( ) The Sad (Oﬄine)
Path

event.respondWith( fetch(event.request).catch(error => { // Do something about it })
); service-worker.js (detail) handle the ofﬂine situation in the catch

Response need a web-page-like Response!

new Response(body, init)

event.respondWith( fetch(event.request).catch(error => { return new Response( ); }) );
service-worker.js (detail)

event.respondWith( fetch(event.request).catch(error => { return new Response('<p>Oh, dear.</p>’, ); })
); service-worker.js (detail)

service-worker.js (detail) event.respondWith( fetch(event.request).catch(error => { return new Response('<p>Oh, dear.</p>',
{ headers: { 'Content-Type': 'text/html' } }); }) );

There’s a problem with this.

Ofﬂine: we’re responding to all fetches with a janky web
page.

event.request.mode

event.request.mode === ‘navigate’

event.request.method === 'GET' && In browsers that don’t support request.mode

event.request.method === 'GET' && event.request.headers.get(‘accept').includes('text/html')) In browsers that don’t support
request.mode

self.addEventListener('fetch', event => { if (event.request.mode === 'navigate') { event.respondWith(
fetch(request).catch(error => { return new Response('<p>Oh, dear.</p>', { headers: { 'Content-Type': 'text/html' } }); }) ); } }); service-worker.js

index.html service-worker.js self.addEventListener('fetch', event => { if (event.request.mode === 'navigate')
{ event.respondWith( fetch(request).catch(error => { return new Response('<p>Oh, dear.</p>', { headers: { 'Content-Type': 'text/html' } }); }) ); } }); <!doctype html> <html> <head> </head> <body> <p>If you see this, you are online</p> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js', './'); } </script> </body> </html>

Now we have an oﬄine message.

We can do better.

Let’s use our SW to serve an ofﬂine page.

fetch(request).catch(error => { return new Response('<p>Oh, dear.</p>', { headers: { 'Content-Type': 'text/html' } }); }) ); } }); service-worker.js Let’s not do this…

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Registering a Service Worker</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/default.css" rel="stylesheet" title="Default Style"> </head> <body> <h1>Offline Fallback Test</h1> <p class="error">If you see this, you are offline</p> </body> </html> ofﬂine.html instead, let’s use a real HTML page

We’ll extend our Service Worker so that it provides a
custom ofﬂine page when navigation requests are made and the network is unavailable.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Registering a Service Worker</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/default.css" rel="stylesheet" title="Default Style"> </head> <body> <h1>Offline Fallback Test</h1> <p class="error">If you see this, you are offline</p> </body> </html> offline.html Gotta stash the offline page first!

Service Worker lifecycle

parsed Service Worker state

parsed installing Service Worker state

parsed installing installed Service Worker state

install phase

self.addEventListener('install', event => { // Stash offline page in a
cache }); service-worker.js (detail)

Install Event

ExtendableEvent

ExtendableEvent.waitUntil(promise)

self.addEventListener('install', event => { event.waitUntil( // ... ); }); service-worker.js
(detail)

The Cache API

cache offline-items

You have complete control over caches

CacheStorage caches

methods ServiceWorkerGlobalScope properties fetch caches

Caching Oﬄine Page

.open(‘ofﬂine’) caches

new Request( ) ‘ofﬂine.html’ ofﬂine need both a Request and
Response to put in cache…

new Response(body, init) fetch We want the Response to represent
the ofﬂine.html page…

self.addEventListener('install', event => { var offlineURL = 'offline.html'; event.waitUntil( );
}); service-worker.js (install event handler detail)

self.addEventListener('install', event => { var offlineURL = 'offline.html'; event.waitUntil( );
}); service-worker.js (install event handler detail) service-worker.js (install event handler detail)

self.addEventListener('install', event => { var offlineURL = 'offline.html'; event.waitUntil( fetch(new
Request(offlineURL)).then(response => { }) ); }); Step 1 service-worker.js (install event handler detail)

Request(offlineURL)).then(response => { return caches.open('offline').then(cache => { }); }) ); }); Step 2 service-worker.js (install event handler detail)

cache.put(request, response)

Request(offlineURL)).then(response => { return caches.open('offline').then(cache => { return cache.put(new Request(offlineURL), response); }); }) ); }); Step 3 service-worker.js (install event handler detail)

offline caches.open( ) fetch( ) cache.put( , ) ‘offline.html’ offline
Step 1 Step 2 Step 3

Serving the oﬄine page.

fetch(request).catch(error => { return new Response('<p>Oh, dear.</p>', { headers: { 'Content-Type': 'text/html' } }); }) ); } }); service-worker.js (fetch event handler detail) instead of…

cache.match(request) ﬁnd the ofﬂine page in cache…

fetch(event.request).catch(error => { return caches.open('offline').then(cache => { }); }) ); } }); service-worker.js (fetch event handler detail)

fetch(event.request).catch(error => { return caches.open('offline').then(cache => { return cache.match('offline.html'); }); }) ); } }); service-worker.js (fetch event handler detail) You can use URL in place of Request here…

return cache.match(new Request('offline.html')); return cache.match('offline.html'); is same effect as:

Client Network Online

Network Client Service Worker Oﬄine

Network Strategies

We can make a Service Worker that implements different network
strategies for different types of requests.

HTML network caches 1 2 network-first strategy

image network caches 1 2 cache-first strategy

1 2 Determining what kind of request a given fetch
represents. Getting stuff into caches so it’s there for later.

self.addEventListener('fetch', event => { if (event.request.mode === 'navigate') { event.respondWith(/*
network-first strategy */); } }); 1 service-worker.js (fetch handler detail)

self.addEventListener('fetch', event => { if (event.request.mode === 'navigate') { event.respondWith(/*
network-first strategy */); } else if (event.request.headers.get('Accept').indexOf('image') !== -1) { event.respondWith(/* cache-first strategy */); } }); 1 service-worker.js (fetch handler detail)

1 2 Determining what kind of request a given fetch
represents. Getting stuff into caches so it’s there for later.

Network-First Strategy

Part I: Online Behavior (a.k.a. the “happy path”)

assets caches.open( ) fetch( ) cache.put( , ) assets network-first
strategy Step 1 Step 2 Step 3 Network

Read-through caching 2 if (event.request.mode === 'navigate') { event.respondWith(fetch(event.request) .then(response
=> { }) ); } service-worker.js (fetch handler detail)

Response.ok if (event.request.mode === 'navigate') { event.respondWith(fetch(event.request) .then(response => {
if (response.ok) { } }) ); } service-worker.js (fetch handler detail) 2

Response.clone() if (event.request.mode === 'navigate') { event.respondWith(fetch(event.request) .then(response => {
if (response.ok) { caches.open('assets').then(cache => { cache.put(event.request, response.clone()); }); } }) ); } service-worker.js (fetch handler detail) 2

2 if (event.request.mode === 'navigate') { event.respondWith(fetch(event.request) .then(response => {
if (response.ok) { caches.open('assets').then(cache => { cache.put(event.request, response.clone()); }); } return response; }) ); } service-worker.js (fetch handler detail)

Part II: Offline Behavior (a.k.a. the fallback path)

caches.match( ) fetch( ) network-first strategy Network

caches.match( )

vs. undefined caches.match( ) cache.match( ) when no match found,
Promise resolves to undeﬁned

if (event.request.mode === 'navigate') { event.respondWith(fetch(event.request) .then(response => { if
(response.ok) { caches.open('assets').then(cache => { cache.put(event.request, response.clone()); }); } return response; }) ); } service-worker.js (fetch handler detail)

if (event.request.mode === 'navigate') { event.respondWith(fetch(event.request) .then(response => { })
); } service-worker.js (fetch handler detail) fold happy path out of the way…

.catch(() => { }) ); } service-worker.js (fetch handler detail)

.catch(() => { return caches.match(event.request).then(response => { }); }) ); } service-worker.js (fetch handler detail)

.catch(() => { return caches.match(event.request).then(response => { if (!response) { throw Error(`${request.url} not found in cache`); } }); }) ); } service-worker.js (fetch handler detail)

.catch(() => { return caches.match(event.request).then(response => { if (!response) { throw Error(`${request.url} not found in cache`); } return response; }); }) ); } service-worker.js (fetch handler detail)

Part IIa: Offline Behavior (a.k.a. the fallback fallback path)

caches.match( ) fetch( ) cache.match( ) offline caches.open(‘offline’) ‘offline.html’

.catch(() => { return caches.match(event.request).then(response => { if (!response) { throw Error(`${request.url} not found in cache`); } return response; }); }) ); } service-worker.js (fetch handler detail) service-worker.js (fetch handler detail)

.catch(() => { }) ); } service-worker.js (fetch handler detail) service-worker.js (fetch handler detail)

.catch(() => { }) .catch(() => { }) ); } service-worker.js (fetch handler detail) service-worker.js (fetch handler detail)

.catch(() => { }) .catch(() => { return caches.open('offline').then(cache => { return cache.match('offline.html'); }); }) ); } service-worker.js (fetch handler detail) service-worker.js (fetch handler detail)

caches.match( ) fetch( ) network-first strategy

caches.match( ) fetch( ) cache-first strategy undefined

assets caches.open( ) fetch( ) cache.put( , ) assets read-through
caching

cache.put(request, response) cache.add(requestOrURL) “ ”

cache.addAll(urls) “ ” cache.add(requestOrURL)

Application Shell

Need to precache app shell assets during install…

1 2 Put assets into cache during install phase. Later,
respond to fetches for static assets with a cache-ﬁrst strategy.

const cacheFiles = [ '', 'default.css', 'static-assets/cloud-1.jpg', 'static-assets/cloud-2.jpg', 'static-assets/cloud-3.jpg', 'static-assets/cloud-4.jpg',
'static-assets/cloud-5.jpg', 'static-assets/cloud-6.jpg', 'static-assets/cloud-7.jpg', 'static-assets/cloud-8.jpg', 'static-assets/cloud-9.jpg', 'static-assets/cloud-10.jpg' ]; service-worker.js (detail) 1

self.addEventListener('install', event => { event.waitUntil( caches.open('static').then(cache => { }) );
}); service-worker.js (install handler detail) 1

self.addEventListener('install', event => { event.waitUntil( caches.open('static').then(cache => { return cache.addAll(cacheFiles);
}) ); }); 1 service-worker.js (install handler detail)

self.addEventListener('fetch', event => { var url = new URL(event.request.url); if
(cacheFiles.indexOf(url.pathname) !== -1) { event.respondWith( ); } }); 2 service-worker.js (fetch handler detail) responding to fetch events for app shell assets

(cacheFiles.indexOf(url.pathname) !== -1) { event.respondWith( caches.match(event.request).then(response => { if (!response) { throw Error(`${event.request.url} not found in cache`); } return response; }) ); } }); 2 service-worker.js (fetch handler detail)

(cacheFiles.indexOf(url.pathname) !== -1) { event.respondWith( caches.match(event.request).then(response => { if (!response) { throw Error(`${event.request.url} not found in cache`); } return response; }).catch(() => fetch(event.request)) ); } }); 2 service-worker.js (fetch handler detail)

Service Worker state parsed installing installed

parsed installing installed Service Worker state activating

parsed installing installed Service Worker state activating activated

service-worker.js (NEW!) parsed installing installed activating activated

parsed installing installed activating activated service-worker.js (NEW!) ?

parsed installing installed activating activated service-worker.js (NEW!) X If no
previous SW, activation starts automatically

parsed installing installed activating activated service-worker.js (NEW!) X

parsed installing installed activating activated service-worker.js (NEW!)

parsed installing installed activating activated service-worker.js (NEW!) ?

parsed installing installed activating activated service-worker.js (NEW!) ! If previous
SW, activation does not happen until…

service-worker.js (NEW!) (waiting)

service-worker.js (NEW!) (waiting) All controlled clients close…

}) ); }); service-worker.js (install handler detail)

}).then(() => self.skipWaiting()) ); }); service-worker.js (install handler detail) Make SW activate immediately

methods ServiceWorkerGlobalScope properties fetch caches skipWaiting

Versioning a Service Worker

cleaning up after old SW caches and versions

activate event

ExtendableEvent

self.addEventListener('activate', event => { event.waitUntil( // Clean up after old
service worker versions ); });

const cachePrefix = 'thisIsMyVersion'; Update the version string each time
you change the service worker

Use the preﬁx caches.open(`${cachePrefix}-static`)

[ ] , , caches.keys()

self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(cacheKeys => { }) );
}); service-worker.js (activate handler detail)

self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(cacheKeys => { var oldCacheKeys
= cacheKeys.filter(key => { return (key.indexOf(cachePrefix) !== 0); }); }) ); }); service-worker.js (activate handler detail) Array.prototype.ﬁlter

= cacheKeys.filter(key => { return (key.indexOf(cachePrefix) !== 0); }); var deletePromises = oldCacheKeys.map(oldKey => { return caches.delete(oldKey); }); }) ); }); Array.prototype.map service-worker.js (activate handler detail)

= cacheKeys.filter(key => { return (key.indexOf(cachePrefix) !== 0); }); var deletePromises = oldCacheKeys.map(oldKey => { return caches.delete(oldKey); }); return Promise.all(deletePromises); }) ); }); service-worker.js (activate handler detail)

methods ServiceWorkerGlobalScope properties fetch caches skipWaiting clients

clients.claim()

= cacheKeys.filter(key => { return (key.indexOf(cachePrefix) !== 0); }); var deletePromises = oldCacheKeys.map(oldKey => { return caches.delete(oldKey); }); return Promise.all(deletePromises); }).then(() => self.clients.claim()) ); }); Make SW take control immediately

That’s it for today

But that’s not all!

bit.ly/sw-smashing-nyc

• Recipes for: • creating an ofﬂine image • Using
an external JSON ﬁle for managing application shell asset URLs • Links to resources and documentation Repository also includes:

Pragmatist’s Guide to Service Worker I am Lyza Danger Gardner
I am an Open Web Engineer at Bocoup I can be found at @lyzadanger and https://www.lyza.com Smashing Conference NYC 2017 http://bit.ly/sw-smashing-nyc

Pragmatist's Guide to Service Worker: Smashing ...

Pragmatist's Guide to Service Worker: Smashing NYC 2017

More Decks by Lyza Gardner

Other Decks in Technology

Featured

Transcript