Video qui: https://www.youtube.com/watch?v=Vr0SiZnIlc4
Introduzione alle PWA e al ruolo dei Service Workers.
Approfondimento sull'uso dei Service Workers per migliorare la performance.
Appendice con fonti e risorse utili.
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Service workers - Forza lavoro al servizio della tua Performance
1. Turin Web Performance Group
Service Workers
Forza lavoro al servizio della tua Performance
con Piero Bellomo, @ptbello
performance-obsessed full stack dev
2. ● Contesto
● Le PWA
● I Service Worker
● Service Worker Performance
● Fonti e approfondimenti
Indice
3. 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
4. Native feel
● Add to Home screen
● Hardware access
● Notifiche push
● ...and the list goes on
Contesto ➜ Le PWA
PWA
5. Native feel
● Add to Home screen
● Hardware access
● Notifiche push
● ...and the list goes on
Reliability
Modalità offline in
funzione della
connettività disponibile
Contesto ➜ Le PWA
PWA
6. Native feel
● Add to Home screen
● Hardware access
● Notifiche push
● ...and the list goes on
Reliability
Modalità offline in
funzione della
connettività disponibile
Performance
Ooooh!
Caching!
Contesto ➜ Le PWA
PWA
7. Gli ingredienti di una PWA
● https://
● Manifest
Contesto ➜ Le PWA ➜ Ingredienti
● APIs
● SW
8. Manifest
Contesto ➜ Le PWA ➜ Ingredienti ➜ Manifest
…of the Communist Party?
Ahem, sorry, No Party.
9. 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>
10. 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
12. Cos’è un Service Worker
● Background Process
può essere idle o active
Contesto ➜ il Service Worker ➜ Cos’è
13. Cos’è un Service Worker
● Background Process
può essere idle o active
● Network Proxy
intercetta richieste con fetch
Contesto ➜ il Service Worker ➜ Cos’è
14. Cos’è un Service Worker
● Background Process
può essere idle o active
● Network Proxy
intercetta richieste con fetch
● No DOM access
ma accesso indiretto via postMessage e Clients
Contesto ➜ il Service Worker ➜ Cos’è
15. Cos’è un Service Worker
● Background Process
può essere idle o active
● Network Proxy
intercetta richieste con fetch
● No DOM access
ma accesso indiretto via postMessage e Clients
● Persistent Data Access
client-side storage con Cache
Contesto ➜ il Service Worker ➜ Cos’è
17. 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
19. Lifecycle
Contesto ➜ il Service Worker ➜ Lifecycle
self.addEventListener('fetch', function (e) {
// intercept and manipulate every. single. request.
// this is where the magic happens
}
20. Service Worker Performance
Service Worker Cache API Browser cache via http headersvs
Consistency Consistency
Speed
Granularity Granularity
Speed
Service Worker Performance ➜ vs Browser cache
21. Service Worker Performance Tools
fetch(e.request).then(function (response) {
return response;
});
Service Worker Performance ➜ Tools ➜ Fetch
self.addEventListener('fetch', function (e) {
if( e.request.url.indexOf('static.myapp.com') !== -1 ) {
e.respondWith(
// some caching strategy
);
} else {
e.respondWith(
// some other caching strategy
);
}
});
fetch
25. Caching strategies
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open('myCacheName').then(function (cache) {
for( let i = 0; i < myCacheData.length; i++ ) {
cache.add(myCacheData[i]);
}
// OR: cache.addAll(myCacheData);
})
);
});
self.addEventListener('fetch', function (e) {
e.respondWith(
caches.match(e.request).then(function (r) {
return r })
);
});
Service Worker Performance ➜ Caching strategies
Preload, then Offline
26. Misurare la Performance dei SW
Service Worker Performance ➜ Misurare
● Synthetic testing
● Real User Monitoring
27. 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
32. 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
33. 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
34. Turin Web Performance Group
Grazie!
https://twitter.com/ptbello
https://www.facebook.com/piero.bellomo
https://github.com/ptbello/