JQuery UK Service Workers Talk

@thisNatasha
ServiceWorkers
on vacay...
Natasha Rooney
@thisNatasha
GSMA Web Technologist
W3C WebMob Co-Chair
www.w3.org/Mobile/IG/

@thisNatasha
Going on Vacation

@thisNatasha
I use apps, but I want the web!

@thisNatasha
ServiceWorker eh?
Offline Cache Worker
source: Chang W. Doh

@thisNatasha
ServiceWorker eh?
Navigation Controller

@thisNatasha
ServiceWorker eh?
Event Manager

@thisNatasha
Event Manager
ServiceWorker eh?

@thisNatasha
ServiceWorker eh?
Control request / response flow
Load a cached copy of a resource

@thisNatasha
ServiceWorker eh?
Push &
Background
Sync
Cache Control
/ Custom
Response
Faster Load
Time!

@thisNatasha
Ok fine, but what is it?
Worker: script
separate from the
webpage

@thisNatasha
Worker: script
separate from the
webpageDifferent
Lifecycle

@thisNatasha
Worker: script
separate from the
webpageDifferent
Lifecycle
Terminated when
not in use

@thisNatasha
Worker: script
separate from the
webpageDifferent
Lifecycle
“In terms of network control, it acts like a
proxy server sitting on the client, you get to
decide what to do on a request-by-request
basis. You can use this to make stuff work
faster, offline, or build new features.”
Jake Archibald
Terminated when
not in use

@thisNatasha
Lifecycle
Installs
Activates
Waits
Network fetch
detection
Terminated
source: html5rocks

@thisNatasha
Two APIs one interface representing a proxy for a value
not necessarily known when that thing is created… (um, Promises)
Fetch
Gives
ServiceWorkers
the powers to
manage network
requests and
return responses
for resources
https://fetch.spec.whatwg.org/
https://slightlyoff.github.io/ServiceWorke
r/spec/service_worker/index.html#cach
e-objects
Cache
Save fetched
responses, return
these responses
later, not part of
HTTP cache
+ Promises

@thisNatasha
Installation
Running [Status,
Start, Stop]
Sync / Push
States:

@thisNatasha
Register
Register your ServiceWorker in your main JavaScript file.
// filename: app.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful,
scope: ', registration.scope);
}).catch(function(err) {
// registration failed
console.log('ServiceWorker registration failed: ', err);
});
}
source: html5rocks

@thisNatasha
Register
// filename: app.js
});
}
source: html5rocks
app.js

@thisNatasha
Register
// filename: app.js
});
}
source: html5rocks
SW location

@thisNatasha
Register
// filename: app.js
});
}
source: html5rocks
Browser does
the rest!

@thisNatasha
Create sw.js
Or whatever you want to call your ServiceWorker javascript file...
// filename: sw.js
TIP: sw.js goes
in the root of
the domain

@thisNatasha
Install
Give assets you want to run offline
// filename: sw.js
// The files we want to cache
var shellcache = 'shell-v1';
var urlsToCache = [
'/',
'/app/css/dist/bootstrap.min.css',
'/app/js/dist/angular.min.js',
'/app/js/dist/jquery-1.11.2.min.js',
'/app/js/dist/bootstrap.min.js'
];
// INSTALL
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(shellcache) //our cache!
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache); //pass all our urls!
})
);
});

@thisNatasha
// filename: sw.js
var urlsToCache = [
'/',
];
// INSTALL
event.waitUntil(
})
);
});
Install
Setup and
populate
caches!

@thisNatasha
// filename: sw.js
var urlsToCache = [
'/',
];
// INSTALL
event.waitUntil(
})
);
});
Install
opened
cache!

@thisNatasha
// filename: sw.js
var urlsToCache = [
'/',
];
// INSTALL
event.waitUntil(
})
);
});
Install
pass in array
of files

@thisNatasha
// filename: sw.js
var urlsToCache = [
'/',
];
// INSTALL
event.waitUntil(
})
);
});
Install
TIP: everything
must cache at
install to be
successful!

@thisNatasha
TIP: Use an
incognito
window to test
your app!

@thisNatasha
Fetch
Detect network fetches
// detect fetches
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
…
})
);
});
1st Visit: Install
ServiceWorker
Later visits +
navigation:
worker kicks in!

@thisNatasha
Fetch
// detect fetches
event.respondWith(
…
})
);
});
Worker will
receive “fetch”
events

@thisNatasha
Fetch
// detect fetches
event.respondWith(
…
})
);
});
Worker will
receive “fetch”
events
fetch API allows
us to respond!

@thisNatasha
// detect fetches
event.respondWith(
…
})
);
});
Fetch
Worker will
receive “fetch”
events
Manual response,
Network fetch, or
cached resouce!

@thisNatasha
Fetch
// detect fetches
event.respondWith(
…
})
);
});
Worker will
receive “fetch”
events
gives info
about request

@thisNatasha
// sw.js
event.respondWith(
if (response) {
return response; // cache hit! return response
}
// IMPORTANT: Clone the request.
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// IMPORTANT: Clone the response.
var responseToCache = response.clone();
caches.open(CACHE_NAME)
cache.put(event.request, responseToCache);
Caching
Detected fetches, return match if so or get from network as fallback
pass promise
caches.match

@thisNatasha
// sw.js
event.respondWith(
if (response) {
}
return response;
}
Caching
hmmm, any
matches in my
caches?

@thisNatasha
Caching
// sw.js
event.respondWith(
if (response) {
}
return response;
}
Got it! Awesome,
so return it!

@thisNatasha
Caching
// sw.js
event.respondWith(
if (response) {
}
return response;
}
Aw nothing in
cache, get from
network

@thisNatasha
Caching
Got it from the network? Why not add to the cache?
// sw.js
return response;
}
// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have 2 stream.
});
return response;
}
);
})
);
});

@thisNatasha
Caching
// sw.js
if(!response || response.status !== 200
|| response.type !== 'basic') {
return response;
}
});
return response;
}
);
})
);
check response

@thisNatasha
Caching
// sw.js
return response;
}
});
return response;
}
);
})
);
clone response

@thisNatasha
Caching
// sw.js
return response;
}
});
return response;
}
);
})
);
add to cache

@thisNatasha
Update
Updating your ServiceWorker
// sw.js
self.addEventListener('activate', function(event) {
//var cacheWhitelist = ['shell-v1', 'blog-posts-cache-v1'];
var cacheWhitelist = ['shell-v1'];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
console.log('deleting: ' + cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});

@thisNatasha
Update
// sw.js
event.waitUntil(
return Promise.all(
}
})
);
})
);
});
Edit and save
me

@thisNatasha
Update
// sw.js
event.waitUntil(
return Promise.all(
}
})
);
})
);
});
Edit and save
me
TIP: completely
close the
application!

@thisNatasha
Update
// sw.js
event.waitUntil(
return Promise.all(
}
})
);
})
);
});
Open app and
new SW should
kick in!

@thisNatasha
Update
Check caches need deleting or keeping
// sw.js
event.waitUntil(
return Promise.all(
}
})
);
})
);
});
Let’s do some
cache
management!
activate
callback
source: html5rocks

@thisNatasha
Update
// sw.js
var cacheWhitelist = ['shell-v1', 'blog-posts-cache-v1'];
event.waitUntil(
return Promise.all(
}
})
);
})
);
});
Let’s do some
cache
management!
defined in
install step
source: html5rocks

@thisNatasha
Update
// sw.js
var cacheWhitelist = ['shell-v1', 'blog-posts-cache-v1'];
event.waitUntil(
return Promise.all(
}
})
);
})
);
});
Let’s do some
cache
management!
loop through
and delete!
source: html5rocks

@thisNatasha
Cool Other Stuff!
What more can I do?
Push / Background Sync
Mess around with fallbacks
Pass in weird and wonderful
responses!

@thisNatasha
Ok I see how this
works, anything else I
should know?
TIP: Github
pages are
served over
HTTPS

@thisNatasha
[1] ServiceWorkers
mandate HTTPS
TIP: Github
pages are
served over
HTTPS

@thisNatasha
[2] So, can we
use ServiceWorkers
today?

@thisNatasha
New Questions
http://caniuse.com/#feat=serviceworkers

@thisNatasha
New Questions
https://jakearchibald.github.io/isserviceworkerready/

@thisNatasha
https://github.com/w3c-webmob/ServiceWorkersDemos

@thisNatasha
https://code.google.com/p/chromium/issues/

@thisNatasha
http://discourse.specifiction.org/

@thisNatasha
New Questions
Super new! What else do we need to know!?
How does this scale?
Does SW improve
performance?
How complex does
development become?

@thisNatasha
Some things we couldn’t cover...
[1] Extensible Web Manifesto
[2] Impacted APIs

@thisNatasha
Info and Links
Info and Links

@thisNatasha
ありがとう！
Natasha Rooney
@thisNatasha
GSMA Web Technologist
W3C WebMob Co-Chair
www.w3.org/Mobile/IG/
Thanks to:
Matt Gaunt & Jake Archibald for their previous
written work on ServiceWorker!

JQuery UK Service Workers Talk

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to JQuery UK Service Workers Talk

Similar to JQuery UK Service Workers Talk (20)

More from Natasha Rooney

More from Natasha Rooney (13)

Recently uploaded

Recently uploaded (20)

JQuery UK Service Workers Talk