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

Service Workers

Service Workers

Service workers bring amazing new capabilities to the web. They make fully offline web apps possible, improve performance, and bring more resilience and stability to any site. In this talk, you'll learn how these man-in-the-middle attacks on your own site work, different approaches you can use, and how they might replace many of our current best practices.

Chris Ferdinandi

May 04, 2021
Tweet

More Decks by Chris Ferdinandi

Other Decks in Programming

Transcript

  1. Start End 1 What service workers are
 (and how they

    work) Cool things you can do 3 Strategies 2
  2. // Initialize the service worker
 //(load this with the rest

    of your JS) if (navigator && navigator.serviceWorker) { navigator.serviceWorker.register('/sw.js'); }
  3. addEventListener('fetch', (event) => { let request = event.request; request.respondWith( fetch(request).then((response)

    => { let copy = response.clone(); event.waitUntil(caches.open('app').then((cache) => { return cache.put(request, copy); })); return response; }).catch((error) => { return caches.match(request).then((response) => { return response; }); }) ); });
  4. addEventListener('fetch', (event) => { let request = event.request; request.respondWith( fetch(request).then((response)

    => { let copy = response.clone(); event.waitUntil(caches.open('app').then((cache) => { return cache.put(request, copy); })); return response; }).catch((error) => { return caches.match(request).then((response) => { return response; }); }) ); });
  5. addEventListener('fetch', (event) => { let request = event.request; request.respondWith( fetch(request).then((response)

    => { let copy = response.clone(); event.waitUntil(caches.open('app').then((cache) => { return cache.put(request, copy); })); return response; }).catch((error) => { return caches.match(request).then((response) => { return response; }); }) ); });
  6. addEventListener('fetch', (event) => { let request = event.request; request.respondWith( fetch(request).then((response)

    => { let copy = response.clone(); event.waitUntil(caches.open('app').then((cache) => { return cache.put(request, copy); })); return response; }).catch((error) => { return caches.match(request).then((response) => { return response; }); }) ); });
  7. addEventListener('fetch', (event) => { let request = event.request; request.respondWith( caches.match(request).then((response)

    => { return response || fetch(request).then((response) => { let copy = response.clone(); event.waitUntil(caches.open('app').then((cache) => { return cache.put(request, copy); })); return response; }); }) ); });
  8. addEventListener('fetch', (event) => { let request = event.request; request.respondWith( caches.match(request).then((response)

    => { return response || fetch(request).then((response) => { let copy = response.clone(); event.waitUntil(caches.open('app').then((cache) => { return cache.put(request, copy); })); return response; }); }) ); });
  9. addEventListener('fetch', (event) => { let request = event.request; request.respondWith( caches.match(request).then((response)

    => { return response || fetch(request).then((response) => { let copy = response.clone(); event.waitUntil(caches.open('app').then((cache) => { return cache.put(request, copy); })); return response; }); }) ); });
  10. addEventListener('fetch', (event) => { let request = event.request; request.respondWith( caches.match(request).then((response)

    => { return response || fetch(request).then((response) => { let copy = response.clone(); event.waitUntil(caches.open('app').then((cache) => { return cache.put(request, copy); })); return response; }); }) ); });
  11. addEventListener('install', (event) => { event.waitUntil(caches.open('app').then((cache) => { cache.add(new Request('/offline/')); return

    cache; })); }); // Inside the fetch event… catch((error) => { return caches.match(request).then((response) => { return response || caches.match('/offline/'); }); });
  12. Lil’ Rhody Seafood Looks like you're offline. Here's the important

    stuff… 401-555-5555 123 Lobster Drive Narragansett, RI Weekly Specials Clam Cakes - $5 Lobster Rolls - $7 Calamari - $7 Clam Chowder - $5/$8 Del’s Lemonade - $3 Show critical info when offline • Restaurants • Conferences • Hotels