Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

decarola

March 15, 2019
Tweet

More Decks by decarola

Other Decks in Programming

Transcript

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

    la UX offline, sito → PWA • Supporto $
  2. const staticCacheName = 'staticfiles'; caches.open(staticCacheName) .then( staticCache => { staticCache.addAll([

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

    staticCache.addAll([ '/css/stylesheet.css', '/js/javascript.js', '/fonts/font.woff', '/images/icon.svg' ]); })
  4. if (request.headers.get('Accept').includes('image')) { fetchEvent.respondWith( caches.match(request) // Cerca nella cache .then(responseFromCache

    => { if (responseFromCache) { return responseFromCache; } }) ); // fetchEvent.respondWith return; }
  5. 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
  6. 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; }
  7. 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; }
  8. 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; }
  9. • 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
  10. The Service Worker Cookbook H T T P S :

    / / S E R V I C E W O R K E . R S /