This snippet shows how to cache website assets

caching-assets.js

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

//When a browser runs a service worker for the first time, an event is fired within it, 'install'. This can be used
//to trigger functions to download assets and save them to the cache, using the Cache API

self.addEventListener('install', function(event) {
  var urlsToCache = [
    '/',
    'js.main.js',
    'css/main.css',
    'imgs/icon.png',
    'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
    'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
  ];

  //waitUntil signals to the browser the progress of the event, it takes a Promise as an argument
  event.waitUntil(
    //Open a new cache called 'my-cache-v1'. The versioning will help when updating the service worker in the future
    caches.open('my-cache-v1').then(function(cache) {
      //Add all the urls to the cache
      return cache.addAll(urlsToCache);
    })
  );
});