Service workers - Forza lavoro al servizio della tua Performance

Turin Web Performance Group
Service Workers
Forza lavoro al servizio della tua Performance
con Piero Bellomo, @ptbello
performance-obsessed full stack dev

● Contesto
● Le PWA
● I Service Worker
● Service Worker Performance
● Fonti e approfondimenti
Indice

PWA
“Progressive Web Applications (PWAs) are web
applications that load like regular web pages or
websites but can offer functionality traditionally
available only to native apps.
PWAs combine the open standards of the web
to provide benefits of a rich mobile experience.”
Wikipedia
The Future
Native Apps
Progressive Web Apps
Contesto ➜ Le PWA

Native feel
● Add to Home screen
● Hardware access
● Notifiche push
● ...and the list goes on
Contesto ➜ Le PWA
PWA

Native feel
● Hardware access
● Notifiche push
Reliability
Modalità offline in
funzione della
connettività disponibile
Contesto ➜ Le PWA
PWA

Native feel
● Hardware access
● Notifiche push
Reliability
Modalità offline in
funzione della
connettività disponibile
Performance
Ooooh!
Caching!
Contesto ➜ Le PWA
PWA

Gli ingredienti di una PWA
● https://
● Manifest
Contesto ➜ Le PWA ➜ Ingredienti
● APIs
● SW

Manifest
Contesto ➜ Le PWA ➜ Ingredienti ➜ Manifest
…of the Communist Party?
Ahem, sorry, No Party.

Manifest
Un file Json con informazioni utili al (mobile) OS
per presentare l’App nelle diverse situazioni
Contesto ➜ Le PWA ➜ Ingredienti ➜ Manifest
<head>
...
<link rel="manifest" href="myapp.webmanifest">
...
</head>

APIs
Il Presente
● Audio/Video
● Background Sync
● Storage
○ LocalStorage (obsoleto)
○ IndexedDB
○ Cache API
● Fetch (XMLHttpRequest on crack)
● Geolocation
● Notifiche
Il Futuro
● Payment Request
● Web Speech
● Web Authentication
● Web Share
● Geofencing?
● Gamepad?
Contesto ➜ Le PWA ➜ Ingredienti ➜ APIs

Service Worker
Contesto ➜ Le PWA ➜ Ingredienti ➜ Service Worker
Il Cervello della banda

Cos’è un Service Worker
● Background Process
può essere idle o active
Contesto ➜ il Service Worker ➜ Cos’è

● Network Proxy
intercetta richieste con fetch

● Network Proxy
● No DOM access
ma accesso indiretto via postMessage e Clients

● Network Proxy
● No DOM access
ma accesso indiretto via postMessage e Clients
● Persistent Data Access
client-side storage con Cache

Registrazione
index.html
<head>
...
<script src="./app.js"></script>
...
</head>
if( 'serviceWorker' in navigator ) {
navigator.serviceWorker.register('./sw.js');
} else {
console.log('serviceWorker not available!);
}
add Event Listeners ➜
app.js
sw.js
Contesto ➜ il Service Worker ➜ Registrazione

self.addEventListener('install', function(e) {
//… do stuff that happens only once
// (will also fire if sw is updated)
// e.g. cache static assets
}
Lifecycle
Contesto ➜ il Service Worker ➜ Lifecycle

self.addEventListener('activate', function(e) {
//… do stuff that only need to happen
// when you updated to a newer version
// e.g. clear/amend cache
}
Lifecycle

Lifecycle
self.addEventListener('fetch', function (e) {
// intercept and manipulate every. single. request.
// this is where the magic happens
}

Service Worker Performance
Service Worker Cache API Browser cache via http headersvs
Consistency Consistency
Speed
Granularity Granularity
Speed
Service Worker Performance ➜ vs Browser cache

Service Worker Performance Tools
fetch(e.request).then(function (response) {
return response;
});
Service Worker Performance ➜ Tools ➜ Fetch
if( e.request.url.indexOf('static.myapp.com') !== -1 ) {
e.respondWith(
// some caching strategy
);
} else {
e.respondWith(
// some other caching strategy
);
}
});
fetch

Service Worker Performance Tools
caches.match(myRequest).then (function (r) {
return r;
});
caches.open('myCacheName').then(function(cache) {
return cache.match(myRequest).then (function (r) {
return r;
});
});
Service Worker Performance ➜ Tools ➜ Cache
cache(s)
caches.open('myCacheName').then(function (cache) {
cache.put(myRequest, myResponse);
…
cache.add(myURL);
…
cache.addAll(myURLsArray);
});

Caching strategies
if(navigator.onLine) {
return;
} else {
e.respondWith(
caches.match(e.request).then(function (r) {
return r })
);
}
});
Network first, fallback cache
Service Worker Performance ➜ Caching strategies

Caching strategies
e.respondWith(
if(r) {
return r;
} else {
if(navigator.onLine) {
fetch(e.request).then(function (response) {
cache.put(e.request, response.clone());
});
return response;
});
}
}
}));
});
Cache first, fallback Network then Add to Cache

Caching strategies
self.addEventListener('install', function (e) {
e.waitUntil(
for( let i = 0; i < myCacheData.length; i++ ) {
cache.add(myCacheData[i]);
}
// OR: cache.addAll(myCacheData);
})
);
});
e.respondWith(
return r })
);
});
Preload, then Offline

Misurare la Performance dei SW
Service Worker Performance ➜ Misurare
● Synthetic testing
● Real User Monitoring

Synthetic testing
SW supported
SW in document
No SW support
SW in document
SW supported
No SW in document
No SW support
No SW in document
Service Worker Performance ➜ Synthetic testing
First visit Repeat visit

Real User Monitoring
Browser
supports
SW?
Unsupported
Controlled
Supported
SW
controls
page?
Service Worker Performance ➜ Real User Monitoring
'serviceWorker' in navigator?
navigator.serviceWorker.controller?

Impatto
Service Worker Performance ➜ Impatto
da “Measuring the Real-world Performance Impact of Service Workers” by Philip Walton, Google

Impatto
Service Worker Performance ➜ Impatto

Fonti e approfondimenti
Fonti e approfondimenti ➜ 1/2
Requisito: familiarità con vanilla javascript e l’oggetto promise
●plainJS - The Vanilla JavaScript Repository
●MDN: Promise
PWA
●Google: Your First Progressive Web App
●MDN: Progressive Web Apps
●MDN: Web APIs
●MDN: Manifest
●Manifest generator tool
SW
●MDN: Service Worker API
●Google: Intro to Service Workers
●Google: Service Worker Lifecycle
●Google: Debugging Service Workers
Fetch
●MDN: Using fetch
●MDN: Fetch API
●MDN: FetchEvent
Cache(s)
●Google: Caching Files with Service Worker
●MDN: Cache
●MDN: CacheStorage
Storage limits
●Google: Live Data in the Service Worker
●html5rocks: Working with quota on mobile browsers
●Browser Storage abuser tool

Fonti e approfondimenti ➜ 2/2
On vs. http header caching
●Google: High-performance service worker loading
●Facebook: Web performance: Cache efficiency exercise
Performance
●Google: Measuring the Real-world Performance Impact of Service Workers
●Baqend: Rethinking Web Performance with Service Workers
●PWAStats (fonte inesauribile di dati reali)
Bonus
●MDN: The Service Worker Cookbook (da non perdere la sezione Caching Strategies)
●geddski & Google: Service Workies (un gioco per imparare I Service Workers!)
Fonti e approfondimenti

Turin Web Performance Group
Grazie!
https://twitter.com/ptbello
https://www.facebook.com/piero.bellomo
https://github.com/ptbello/

Service workers - Forza lavoro al servizio della tua Performance

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Service workers - Forza lavoro al servizio della tua Performance

Similar to Service workers - Forza lavoro al servizio della tua Performance (20)

Recently uploaded

Recently uploaded (20)

Service workers - Forza lavoro al servizio della tua Performance