Service Worker - Out of the shadows – CSS day 2019

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.

Eaf6bcd3b320c1167f2522470d0e3e26?s=128

decarola

March 15, 2019
Tweet

Transcript

  1. Service workers O U T O F T H E

    S H A D O W S
  2. Andrea De Carolis @DECAROLA @WEAREMO DO Foto: Francesco Ridolfi

  3. Service worker O U T O F T H E

    S H A D O W S
  4. None
  5. what’s Service Worker

  6. TL;DR

  7. Sono Script Che Intercettano Richieste Di Rete

  8. Request Response

  9. Request Response Request Response

  10. Request Response Request Response

  11. 1. Gestire LA Ux Offline

  12. Esempi

  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. 2. Da Sito A Pwa

  23. HTML CSS JS SW

  24. SITO PWA

  25. SITO SW

  26. SITO PWA

  27. Fattibile?

  28. HTTPS Same-origin

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

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

  32. • Script che intercetta le richieste di rete • Gestisci

    la UX offline, sito → PWA • Supporto $
  33. Codice

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

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

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

  37. Stip ‘ca trov

  38. Cache

  39. const staticCacheName = 'staticfiles'; caches.open(staticCacheName) .then( staticCache => { //

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

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

    staticCache.addAll([ '/css/stylesheet.css', '/js/javascript.js', '/fonts/font.woff', '/images/icon.svg' ]); })
  42. 1.Si scarica. 2.Si installa (…). 3.Si attiva.

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

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

  45. Fetch

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

  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')){}

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

    // “Altro?”
  49. STRATEGIE • Solo dalla rete/cache. • Prima dalla rete/cache. •

    Chi arriva prima.
  50. None
  51. Prima La Cache, Poi La Rete.

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

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

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

  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; }
  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
  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; }
  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; }
  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; }
  60. Ottimismo!

  61. SW-TOOLBOX BY GO OGLE

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

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

  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
  65. Referenze

  66. GOING OFFLINE JEREMY KEITH A B OOK APART

  67. The Service Worker Cookbook H T T P S :

    / / S E R V I C E W O R K E . R S /
  68. Ci siamo…

  69. Stiamo assumendo

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

  72. None
  73. F.A.Q.

  74. Cache HTTP?

  75. Quanto spazio a disposizione?

  76. None
  77. None
  78. AppCache

  79. F#k AppCache

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