Service Worker - Out of the shadows – CSS day 2019

Leggera introduzione sui service worker. Tanto leggera da evitare la tipica sonnolenza post pranzo.
Andata sul palco il 15 marzo 2019 a Faenza durante il CSS day.

Transcript

1. Service
   workers
   O U T O F T H E S H A D O W S
   

   View Slide

2. Andrea
   De Carolis
   @DECAROLA
   @WEAREMO DO
   Foto: Francesco Ridolfi
   

   View Slide

3. Service
   worker
   O U T O F T H E S H A D O W S
   

   View Slide

4. View Slide

5. what’s
   Service
   Worker
   

   View Slide

6. TL;DR
   

   View Slide

7. Sono Script Che
   Intercettano
   Richieste Di Rete
   

   View Slide

8. 
   Request
   Response
   

   View Slide

9. 
   Request
   Response
   Request
   Response
   
   

   View Slide

10. 
    
    Request
    Response
    Request
    Response
    

    View Slide

11. 1. Gestire LA
    Ux Offline
    

    View Slide

12. Esempi
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. 2. Da Sito A Pwa
    

    View Slide

23. HTML CSS JS
    SW
    

    View Slide

24. SITO
    PWA
    

    View Slide

25. SITO
    SW
    

    View Slide

26. SITO PWA
    

    View Slide

27. Fattibile?
    

    View Slide

28. HTTPS
    Same-origin
    

    View Slide

29. View Slide

30. if (navigator.serviceWorker) {
    // $
    }
    

    View Slide

31. if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/sw.js');
    }
    

    View Slide

32. • Script che intercetta le richieste di rete
    • Gestisci la UX offline, sito → PWA
    • Supporto $
    

    View Slide

33. Codice
    

    View Slide

34. 1. Si scarica.
    2. Si installa (…).
    3. Si attiva.
    

    View Slide

35. 1. Si scarica.
    2. Si installa (…).
    3. Si attiva.
    

    View Slide

36. addEventListener('install', installEvent => {});
    

    View Slide

37. Stip ‘ca trov
    

    View Slide

38. Cache
    

    View Slide

39. const staticCacheName = 'staticfiles';
    caches.open(staticCacheName)
    .then( staticCache => {
    // Stip ‘ca trov!
    })
    

    View Slide

40. const staticCacheName = 'staticfiles';
    caches.open(staticCacheName)
    .then( staticCache => {
    staticCache.addAll([
    '/css/stylesheet.css',
    '/js/javascript.js',
    '/fonts/font.woff',
    '/images/icon.svg'
    ]);
    })
    

    View Slide

41. const staticCacheName = 'staticfiles';
    caches.open(staticCacheName)
    .then( staticCache => {
    return staticCache.addAll([
    '/css/stylesheet.css',
    '/js/javascript.js',
    '/fonts/font.woff',
    '/images/icon.svg'
    ]);
    })
    

    View Slide

42. 1.Si scarica.
    2.Si installa (…).
    3.Si attiva.
    

    View Slide

43. addEventListener('activate', fetchEvent =>{
    console.log('');
    });
    

    View Slide

44. 1.Si scarica.
    2.Si installa (…).
    3.Si attiva.
    

    View Slide

45. Fetch
    

    View Slide

46. addEventListener('fetch', fetchEvent => {
    const request = fetchEvent.request;
    });
    

    View Slide

47. if (request.headers.get('Accept').includes('text/html')){} // HTML?
    if (request.headers.get(‘Accept’).includes('image')){} // IMG?
    if (request.headers.get(‘Accept’).includes('pizza')){} //
    

    View Slide

48. if (request.headers.get('Accept').includes('text/html')){} // HTML?
    if (request.headers.get(‘Accept’).includes('image')){} // IMG?
    else {} // “Altro?”
    

    View Slide

49. STRATEGIE
    • Solo dalla rete/cache.
    • Prima dalla rete/cache.
    • Chi arriva prima.
    

    View Slide

50. View Slide

51. Prima La Cache,
    Poi La Rete.
    

    View Slide

52. Prima La Cache,
    Poi La Rete.
    Nel Caso,
    Stip 'Ca Trov.
    

    View Slide

53. addEventListener('fetch', fetchEvent => {
    const request = fetchEvent.request;
    });
    

    View Slide

54. if (request.headers.get('Accept').includes('image')) {
    fetchEvent.respondWith(
    // o
    );
    return;
    }
    

    View Slide

55. if (request.headers.get('Accept').includes('image')) {
    fetchEvent.respondWith(
    caches.match(request) // Cerca nella cache
    .then(responseFromCache => {
    if (responseFromCache) {
    return responseFromCache;
    }
    })
    ); // fetchEvent.respondWith
    return;
    }
    

    View Slide

56. caches.match(request) // Cerca nella cache
    .then(responseFromCache => {
    if (responseFromCache) {
    return responseFromCache;
    }
    return fetch(request) // Vai con la rete
    .then(responseFromFetch => {
    // Stip 'ca trov
    const copy = responseFromFetch.clone();
    fetchEvent.waitUntil(
    caches.open(imageCacheName)
    .then(imageCache => {
    return imageCache.put(request, copy);
    })
    );
    return responseFromFetch;
    });
    }) // end match then
    ); // end respondWith
    

    View Slide

57. if (request.headers.get('Accept').includes('image')) { // Solo immagini
    fetchEvent.respondWith(
    caches.match(request)
    .then(responseFromCache => { // Controlla la cache
    if (responseFromCache) {
    return responseFromCache;
    }
    return fetch(request)
    .then(responseFromFetch => { // Altrimenti dalla rete
    const copy = responseFromFetch.clone();
    fetchEvent.waitUntil(
    caches.open(imageCacheName) // Stip 'ca trov
    .then(imageCache => {
    return imageCache.put(request, copy);
    })
    );
    return responseFromFetch;
    });
    })
    );
    return;
    }
    

    View Slide

58. if (request.headers.get('Accept').includes('image')) { // Solo immagini
    fetchEvent.respondWith(
    caches.match(request)
    .then(responseFromCache => { // Controlla la cache
    if (responseFromCache) {
    return responseFromCache;
    }
    return fetch(request)
    .then(responseFromFetch => { // Altrimenti dalla rete
    const copy = responseFromFetch.clone();
    fetchEvent.waitUntil(
    caches.open(imageCacheName) // Stip 'ca trov
    .then(imageCache => {
    return imageCache.put(request, copy);
    })
    );
    return responseFromFetch;
    });
    })
    );
    return;
    }
    

    View Slide

59. if (request.headers.get('Accept').includes('image')) { // Solo immagini
    fetchEvent.respondWith(
    caches.match(request)
    .then(responseFromCache => { // Controlla la cache
    if (responseFromCache) {
    return responseFromCache;
    }
    return fetch(request)
    .then(responseFromFetch => { // Altrimenti dalla rete
    const copy = responseFromFetch.clone();
    fetchEvent.waitUntil(
    caches.open(imageCacheName) // Stip 'ca trov
    .then(imageCache => {
    return imageCache.put(request, copy);
    })
    );
    return responseFromFetch;
    });
    })
    );
    return;
    }
    

    View Slide

60. Ottimismo!
    

    View Slide

61. SW-TOOLBOX
    BY GO OGLE
    

    View Slide

62. toolbox.router.get('/index.html', toolbox.networkFirst);
    

    View Slide

63. toolbox.router.default = toolbox.networkFirst;
    

    View Slide

64. • networkOnly – only fetch from network
    • cacheOnly – only fetch from cache
    • fastest – fetch from both, and respond with whichever
    comes first
    • networkFirst – fetch from network, if that fails, fetch
    from cache
    • cacheFirst – fetch from cache, but also fetch from
    network and update cache
    

    View Slide

65. Referenze
    

    View Slide

66. GOING
    OFFLINE
    JEREMY KEITH
    A B OOK APART
    

    View Slide

67. The Service Worker Cookbook
    H T T P S : / / S E R V I C E W O R K E . R S /
    

    View Slide

68. Ci siamo…
    

    View Slide

69. Stiamo
    assumendo
    

    View Slide

70. View Slide

71. Cowabunga!
    @decarola
    https://modo.md
    jobs@modo.md
    

    View Slide

72. View Slide

73. F.A.Q.
    

    View Slide

74. Cache
    HTTP?
    

    View Slide

75. Quanto spazio
    a disposizione?
    

    View Slide

76. View Slide

77. View Slide

78. AppCache
    

    View Slide

79. F#k
    AppCache
    

    View Slide

80. Grazie.
    Grafica E Poster By @Emmaboshi +,-
    

    View Slide