Introduction to Service Workers | Matteo Manchi

Introduction to
Service Workers

What is a Service Worker?
● Javascript Worker
○ run in background
○ no DOM access
○ only localhost or HTTPS
● Programmable network proxy
○ control how network requests are handled
● Background Sync
● Push notification

How to install Service Worker
ServiceWorkerContainer.register(scriptUrl[, options]):Promise
● scriptUrl is the path to service worker script
● options: an object containing registration options
○ scope: what range of URLs a service worker can control
The default scope is the scriptUrl directory.
E.g. /example/sw.js -> /example/*

How to install Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
// Registration was successful
.then(registration => console.log(
'ServiceWorker registration successful with scope: ',
registration.scope
))
// registration failed :(
.catch(err => console.log(
'ServiceWorker registration failed: ',
err
));
}

Inside the Service Worker
importScripts('./myLib.js');
self.addEventListener('install', () => console.log('installed'));
self.addEventListener('activate', () => console.log('activate'));
self.addEventListener('fetch', () => console.log('fetch'));
self.addEventListener('sync', () => console.log('sync'));
self.addEventListener('push', () => console.log('push'));

Inside the Service Worker: Events
● Install: it’s called once per SW. Through this event you can cache everything
you need before being able to control clients using waitUntil() method.
● Activate: after installation. It is for cleanup of resources used in previous
versions of a Service worker script.
● Fetch: when SW is ready and the controlled client is fetching some
resources.

Inside the Service Worker: Cache
The caches object is available in sw scope as in window. It manages multiple
named cache.
● caches.open(cacheName):Promise(cache)
● caches.keys(): Array of cache names
● caches.has(cacheName)
● caches.delete(cacheName)
Ref: https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage

Inside the Service Worker: Cache
The cache object provides a storage mechanism for Request / Response object
pairs that are cached.
● cache.put(request, response):Promise
● cache.add(request):Promise
● cache.addAll([request]):Promise
● cache.delete(request):Promise
● cache.match(request):Promise<Response>
Ref: https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage

Inside the Service Worker: SW Event Install
self.addEventListener('install', event => {
console.log('V2 installing…');
// cache a horse SVG into a new cache, static-v2
event.waitUntil(
caches.open('static-v2').then(cache => cache.add('/horse.svg'))
);
});

Inside the Service Worker: SW Event Activate
self.addEventListener('activate', event => {
// delete any caches that aren't in expectedCaches which will get rid of static-v1
event.waitUntil(
caches.keys().then(keys => Promise.all(
keys.map(key => {
if (!expectedCaches.includes(key))
return caches.delete(key);
})
)).then(() => {
console.log('V2 now ready to handle fetches!');
})
);
});

Inside the Service Worker: SW Event Fetch
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
);
});

Offline Strategies: utilities
function getFromCache(request) {
return caches.open('v1')
.then(cache => cache.match(request));
}
function putInCache(request, response) {
return caches.open('v1')
.then(() => cache.put(request, response.clone()));
}
function fetchAndCache(request) {
return fetch(request).then(response => {
response.ok && putInCache(request, response);
return response;
}
}

Offline Strategies: only from cache
self.addEventListener('install', event =>
event.waitUntil(
caches.open('v1').then(cache => cache.add('/index.html'))
);
);
self.addEventListener('fetch', event =>
event.respondWith(
getFromCache(event.request)
);
);

Offline Strategies: cache, then network
event.respondWith(
caches.match(event.request)
.then(resp => resp || fetchAndCache(event.request));
);
);

Offline Strategies: network, then cache
event.respondWith(
fetchAndCache(event.request)
.then(
resp => resp.ok ? resp : getFromCache(event.request),
getFromCache(event.request)
)
);
);

Offline Strategies: cache, then refresh from network
self.addEventListener('fetch', event => {
event.respondWith(getFromCache(event.request));
event.waitUntil(
fetchAndCache(event.request).then(refresh);
)
});
function refresh(response) {
return self.clients.matchAll().then(clients =>
clients.forEach(client =>
client.postMessage(JSON.stringify({
type: 'refresh',
url: response.url,
}));
)
);
}

Background Sync
● sync event fired in SW in two case:
○ when you register an event if you’re online
registration.sync.register('send-outbox')
○ otherwise it’s queued if you’re offline and fired once online
● The queued events will be fired in SW also if there is no controlled window
● Period Sync will be available soon:
registration.periodicSync.register({
tag: 'get-latest-news', // default: ''
minPeriod: 12 * 60 * 60 * 1000, // default: 0
powerState: 'avoid-draining', // default: 'auto'
networkState: 'avoid-cellular' // default: 'online'
});

Push Notification
● Server to client communication
● Google Cloud Messaging
● It works without any controlled window
const applicationServerKey = urlB64ToUint8Array(serverPublicKey);
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
});

Push Notification
// main.js
const applicationServerKey = urlB64ToUint8Array(serverPublicKey);
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
});
// sw.js
self.addEventListener('push', function(event) {
console.log('[Service Worker] Push Received.');
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
const title = 'Push Notification';
const options = {
body: 'Hello world!', icon: 'images/icon.png', badge: 'images/badge.png'
};
event.waitUntil(self.registration.showNotification(title, options));
});

Useful resources
● https://developers.google.com/web/fundamentals/primers/service-workers/
● https://serviceworke.rs/
● https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
● https://github.com/goldhand/sw-precache-webpack-plugin

Introduction to Service Workers | Matteo Manchi

More Related Content

What's hot (20)

Similar to Introduction to Service Workers | Matteo Manchi (20)

More from Codemotion (20)

Recently uploaded (20)

Introduction to Service Workers | Matteo Manchi