sw.js

var CACHE_NAME = "my-site-cache-v1";
var urlsToCache = [
  //'/',
  //'/dist/main.css',
  //'/dist/main.js',
  //'/articles/',
  //'/portfolio/',
  //'/about/',
  //'/terms/',
];

self.addEventListener("install", function (event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME).then(function (cache) {
      console.log("Opened cache");
      return cache.addAll(urlsToCache);
    })
  );
});

self.addEventListener("activate", function (event) {
  // Use this to delete previous caches!
  // Whitelists caches to keep.
  var cacheWhitelist = ["my-site-cache-v1"];

  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames.map(function (cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      // Cache hit - return response
      if (response) {
        return response;
      }
      // Not in Cache - fetch from Server
      return fetch(event.request).then(function (response) {
        // Check if we received a valid response
        if (!response || response.status !== 200 || response.type !== "basic") {
          // response is invalid
          return response;
        }

        // IMPORTANT: Clone the response. A response is a stream
        // and because we want the browser to consume the response
        // as well as the cache consuming the response, we need
        // to clone it so we have two streams.
        var responseToCache = response.clone();

        caches
          .open(CACHE_NAME)
          .then(function (cache) {
            cache.put(event.request, responseToCache);
          })
          .catch(function (err) {
            console.log(err);
          });

        return response;
      });
    })
  );
});