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
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
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
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
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.
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
71. Cowabunga! @decarola https://modo.md jobs@modo.md
73. F.A.Q.
74. Cache HTTP?
75. Quanto spazio a disposizione?
78. AppCache
79. F#k AppCache
80. Grazie. Grafica E Poster By @Emmaboshi +,-