Intro to Service Workers

Web Workers API

Typical Network Request

Request with Service Worker

Fetch event

addEventListener('fetch', fetchEvent => {
  // If fetch is successful, return results.
  // …
  // If fetch fails, return cached content.
  // …
});

Service Worker Lifecycle

Working asynchronously: Promise API

Creating a Promise

var promise = new Promise((resolve, reject) => {
  // Do something, e.g. fetch a file from the network.

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

Using a Promise

promise
.then(result => {
  console.log(result); // "It worked!"
})
.catch(error => {
  console.log(error); // Error: "It broke."
});

Promises can be chained

promise
.then(result => {
  console.log(result); // "It worked!"
})
.then(data => {
  console.log(data); // "Do something afterwards."
})
.catch(error => {
  console.log(error); // Error: "It broke."
});

Fetch API

fetch(request)
.then(responseFromFetch => {
  console.log(responseFromFetch); // "It fetched the thing!"
})
.catch(error => {
  console.log(error); // Error: "It failed."
});

Fetch user info from GitHub

fetch('https://api.github.com/users/amanire')
.then(response => {
  return response.json()
})
.then(data => {
  console.log(data);
})
.catch(err => {
  console.error(err);
})

Demo

Cache API

`Caches` property

(instance of CacheStorage)

caches.open(cacheName)
.then(cache => {
  // Do something with your cache
});

developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/caches

Add single offline HTML file to cache

caches.open(cacheName)
.then(cache => {
  return cache.add('offline.html');
})

Register Service Worker

/index.html

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/serviceworker.js');
}
</script>

No modern JavaScript here!

Scope

<script>
if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/serviceworker.js',
  {scope: '/app/'}
  );
}
</script>

Service Worker file

/serviceworker.js

Versioned cache name

const version = 'V0.1';
const cacheName = 'MySWCache' + version;

Events

addEventListener('install', installEvent => {// …});

addEventListener('activate', activateEvent => {// …});

addEventListener('fetch', fetchEvent => {// …});

addEventListener('install', installEvent => {
  // Cache stuff for later
});

addEventListener('activate', activateEvent => {
  // Cleanup caches
});

addEventListener('fetch', fetchEvent => {
  // Return fetched or cached stuff
});

Install event

addEventListener('install', installEvent => {
// Cache stuff for later
});

// cacheName == 'MySWCacheV0.1'

addEventListener('install', installEvent => {
  installEvent.waitUntil(
    caches.open(cacheName)
    .then(cache => {
      return cache.addAll([
        'offline.html',
        'styles.css'
      ]);
    })
  );
});

Activate event

addEventListener('activate', activateEvent => {
  // Cleanup caches
});

// Delete old cacheName != 'MySWCacheV0.1'

addEventListener('activate', function (event) {
  activateEvent.waitUntil(
  caches.keys()
  .then(cacheNames => {
    return Promise.all(
      cacheNames.map( cacheNameKey => {
        if (cacheNameKey != cacheName) {
          return caches.delete(cacheNameKey);
        }
      })
    );
  })
  );
});

Fetch event

Fresh HTML, cached assets

addEventListener('fetch', fetchEvent => {
  // - Fetch HTML file from network
  //   If error, return offline fallback
  //
  // - Get all other assets from cache
  //   If not in cache, fetch from network
});

addEventListener('fetch', fetchEvent => {
  // Fetch HTML file from network
  const request = fetchEvent.request;
  if(request.headers.get('Accept').includes('text/html')) {
    fetchEvent.respondWith(
      fetch(request)
      .then(responseFromFetch => {
        return responseFromFetch;
      })
      // If error, return offline fallback
      .catch(error => {
        return caches.match('/offline.html');
      })
    );
    return;
  }
  // …

  // Get all other assets from cache
  fetchEvent.respondWith(
    caches.match(request)
    .then(responseFromCache => {
      if(responseFromCache) {
        return responseFromCache;
      }
      // If not in cache, fetch from network
      return fetch(request);
    })
  )
});

An Introduction To

Service Workers