The document discusses the implementation and lifecycle of service workers in web applications, detailing phases such as registration, installation, activation, and handling fetch events. It illustrates how to leverage caching, IndexedDB, and fetch requests to create an efficient web application architecture. The text also mentions upcoming features like push notifications and geofencing while highlighting that support for service workers is improving over time.

1. ServiceWorker
discover the next web game changer

2. AppCache is bad
Unable to determinate low connectivity state.
Local files used even if there is connection.

3. Remember Shared Web Worker?
browser sessions
a-domain.com
a-domain.com
a-domain.com
b-domain.net
c-domain.biz
a-domain.com
swworker.js
target.postMessage('msg');

4. Welcome Service Worker!
browser sessions
a-domain.com
a-domain.com
a-domain.com
b-domain.net
c-domain.biz
a-domain.com
sworker.js
the net
some cache
https requests

5. Phase #1: register
Install or update the Service Worker.
navigator.serviceWorker
.register('./worker.js', {scope: './'})
.then(
function(registration){ /* installed */ },
function(){ /* fail! */ }
);
on index.html

6. Phase #2: oninstall, onactivate
Install or update the Service Worker.
oninstall = function(){
/* setup cache, init database */
};
onactivate = function(){
/* clear cache, update database */
};
on worker.js

7. A Service Worker life cycle
a.k.a. why we need activate
index.html UA w.js
w.js (v2)
register install installing
reload
ok installed
activating activate
register install
ok redundant
installing
installed
close activate
ok activating
activated
ok activated

8. Phase #3: fetch
Called on each HTTP request.
onfetch = function(evt){
evt.respondWith(
on worker.js
new Response(new Blob(
['Custom HTML'], {type : 'text/html'}),
{ headers: {"Content-Type": "text/html"}}
));};

9. Using Caches
similar to ES6 Map, still not supported by any browser
oninstall = function(evt){
e.waitUntil(
caches.create("shell-v1").then(
function(cache) {
return cache.addAll(["/app.html"])
}););};
on worker-cache.js

10. Using Caches / 2
onfetch = function(evt){
evt.respondWith(
caches.match(e.request).catch(function() {
return e.default();
}).catch(function() {
return caches.match("/fallback.html");
}));};
on worker-cache.js

11. Using fetch
var youtube = "https://gdata.youtube.com/feeds/api/videos?alt=json";
onfetch = function(evt){
evt.respondWith(
fetch(youtube + '&q=' + evt.request.url.match(/?(.+)$/)[1])
.then(function(res){return res.json();})
.then(function(data){
var imgs = data.feed.entry.map(function(entry){
var url = entry['media$group']['media$thumbnail'][0].url;
return "<img src='" + url + "'>";
}).join("<br>");
return new Response(new Blob([imgs], {type : 'text/html'}), {
headers: {"Content-Type": "text/html"}
});}));};

12. Using IndexedDB
var db;
oninstall = function(evt){
evt.waitUntil(
new Promise(function(resolve){
var request = indexedDB.open('simple-cache');
request.onupgradeneeded = function(){
request.result.createObjectStore('pages',
{keyPath: 'url', autoIncrement: false});
};
request.onsuccess = function(){
db = request.result;
resolve();
};}));};

13. onfetch = function(evt){
evt.respondWith(
new Promise(function(resolve){
var pageStore = db.transaction('pages').objectStore('pages');
pageStore.get(evt.request.url).onsuccess = function(e){
if(e.target.result){
resolve(
new Response(new Blob([e.target.result.body], {type : 'text/html'}), {
headers: {"Content-Type": "text/html"}
})
);
}else{
fetch(evt.request.url).then(function(res){
res.text().then(function(text){
db.transaction('pages','readwrite').objectStore('pages')
.add({url: evt.request.url, body: text})
.onsuccess = function(){
resolve(res);
};});});}};}));};

14. Proof-Of-Concept
A Service Worker powered Wiki Engine
onfetch = function(){
e.respondWith(
new Promise(function(resolve) {
if(//savepage?/.test(e.request.url)){
// - save the page on idDB
// - forge a 'done' response
}else{
// if the page exists on idDB return it
// otherwise forge a form that points to /savepage
}}));};

15. Support? Meh!
But it’s getting better every day.
https://jakearchibald.github.io/isserviceworkerready/

16. Upcoming features
push notifications
geofencing

17. Thanks!
@sandropaganotti
github.com/sandropaganotti/service-worker-wiki