Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Turin Web Performance Group
Service Workers
Forza lavoro al servizio della tua Performance
con Piero Bellomo, @ptbello
per...
● 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 f...
Native feel
● Add to Home screen
● Hardware access
● Notifiche push
● ...and the list goes on
Contesto ➜ Le PWA
PWA
Native feel
● Add to Home screen
● Hardware access
● Notifiche push
● ...and the list goes on
Reliability
Modalità offline...
Native feel
● Add to Home screen
● Hardware access
● Notifiche push
● ...and the list goes on
Reliability
Modalità offline...
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 PW...
APIs
Il Presente
● Audio/Video
● Background Sync
● Storage
○ LocalStorage (obsoleto)
○ IndexedDB
○ Cache API
● Fetch (XMLH...
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’è
Cos’è un Service Worker
● Background Process
può essere idle o active
● Network Proxy
intercetta richieste con fetch
Conte...
Cos’è un Service Worker
● Background Process
può essere idle o active
● Network Proxy
intercetta richieste con fetch
● No ...
Cos’è un Service Worker
● Background Process
può essere idle o active
● Network Proxy
intercetta richieste con fetch
● No ...
Registrazione
index.html
<head>
...
<script src="./app.js"></script>
...
</head>
if( 'serviceWorker' in navigator ) {
navi...
self.addEventListener('install', function(e) {
//… do stuff that happens only once
// (will also fire if sw is updated)
//...
self.addEventListener('activate', function(e) {
//… do stuff that only need to happen
// when you updated to a newer versi...
Lifecycle
Contesto ➜ il Service Worker ➜ Lifecycle
self.addEventListener('fetch', function (e) {
// intercept and manipula...
Service Worker Performance
Service Worker Cache API Browser cache via http headersvs
Consistency Consistency
Speed
Granula...
Service Worker Performance Tools
fetch(e.request).then(function (response) {
return response;
});
Service Worker Performan...
Service Worker Performance Tools
caches.match(myRequest).then (function (r) {
return r;
});
caches.open('myCacheName').the...
Caching strategies
self.addEventListener('fetch', function (e) {
if(navigator.onLine) {
return;
} else {
e.respondWith(
ca...
Caching strategies
self.addEventListener('fetch', function (e) {
e.respondWith(
caches.match(e.request).then(function (r) ...
Caching strategies
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open('myCacheName').then(function (...
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...
Real User Monitoring
Browser
supports
SW?
Unsupported
Controlled
Supported
SW
controls
page?
Service Worker Performance ➜ ...
Impatto
Service Worker Performance ➜ Impatto
da “Measuring the Real-world Performance Impact of Service Workers” by Philip...
Impatto
Service Worker Performance ➜ Impatto
Impatto
Service Worker Performance ➜ Impatto
Fonti e approfondimenti
Fonti e approfondimenti ➜ 1/2
Requisito: familiarità con vanilla javascript e l’oggetto promise
●p...
Fonti e approfondimenti ➜ 2/2
On vs. http header caching
●Google: High-performance service worker loading
●Facebook: Web p...
Turin Web Performance Group
Grazie!
https://twitter.com/ptbello
https://www.facebook.com/piero.bellomo
https://github.com/...
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

Service workers - Forza lavoro al servizio della tua Performance

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Service workers - Forza lavoro al servizio della tua Performance

  1. 1. Turin Web Performance Group Service Workers Forza lavoro al servizio della tua Performance con Piero Bellomo, @ptbello performance-obsessed full stack dev
  2. 2. ● Contesto ● Le PWA ● I Service Worker ● Service Worker Performance ● Fonti e approfondimenti Indice
  3. 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. 4. Native feel ● Add to Home screen ● Hardware access ● Notifiche push ● ...and the list goes on Contesto ➜ Le PWA PWA
  5. 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. 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. 7. Gli ingredienti di una PWA ● https:// ● Manifest Contesto ➜ Le PWA ➜ Ingredienti ● APIs ● SW
  8. 8. Manifest Contesto ➜ Le PWA ➜ Ingredienti ➜ Manifest …of the Communist Party? Ahem, sorry, No Party.
  9. 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. 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
  11. 11. Service Worker Contesto ➜ Le PWA ➜ Ingredienti ➜ Service Worker Il Cervello della banda
  12. 12. Cos’è un Service Worker ● Background Process può essere idle o active Contesto ➜ il Service Worker ➜ Cos’è
  13. 13. Cos’è un Service Worker ● Background Process può essere idle o active ● Network Proxy intercetta richieste con fetch Contesto ➜ il Service Worker ➜ Cos’è
  14. 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. 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’è
  16. 16. 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
  17. 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
  18. 18. 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 Contesto ➜ il Service Worker ➜ Lifecycle
  19. 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. 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. 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
  22. 22. 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); });
  23. 23. Caching strategies self.addEventListener('fetch', function (e) { 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
  24. 24. Caching strategies self.addEventListener('fetch', function (e) { e.respondWith( caches.match(e.request).then(function (r) { if(r) { return r; } else { if(navigator.onLine) { fetch(e.request).then(function (response) { caches.open('myCacheName').then(function (cache) { cache.put(e.request, response.clone()); }); return response; }); } } })); }); Service Worker Performance ➜ Caching strategies Cache first, fallback Network then Add to Cache
  25. 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. 26. Misurare la Performance dei SW Service Worker Performance ➜ Misurare ● Synthetic testing ● Real User Monitoring
  27. 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
  28. 28. Real User Monitoring Browser supports SW? Unsupported Controlled Supported SW controls page? Service Worker Performance ➜ Real User Monitoring 'serviceWorker' in navigator? navigator.serviceWorker.controller?
  29. 29. Impatto Service Worker Performance ➜ Impatto da “Measuring the Real-world Performance Impact of Service Workers” by Philip Walton, Google
  30. 30. Impatto Service Worker Performance ➜ Impatto
  31. 31. Impatto Service Worker Performance ➜ Impatto
  32. 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. 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. 34. Turin Web Performance Group Grazie! https://twitter.com/ptbello https://www.facebook.com/piero.bellomo https://github.com/ptbello/
  • MarcoMocca

    Nov. 28, 2018

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.

Views

Total views

522

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

5

Shares

0

Comments

0

Likes

1

×