sw.js

const addResourcesToCache = async (resources) => {
  const cache = await caches.open('v1');
  await cache.addAll(resources);
};

const putInCache = async (request, response) => {
  const cache = await caches.open('v1');
  await cache.put(request, response);
};

const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
  // First try to get the resource from the cache
  const responseFromCache = await caches.match(request);
  if (responseFromCache) {
    return responseFromCache;
  }

  // Next try to use the preloaded response, if it's there
  const preloadResponse = await preloadResponsePromise;
  if (preloadResponse) {
    console.info('using preload response', preloadResponse);
    putInCache(request, preloadResponse.clone());
    return preloadResponse;
  }

  // Next try to get the resource from the network
  try {
    const responseFromNetwork = await fetch(request.clone());
    // response may be used only once
    // we need to save clone to put one copy in cache
    // and serve second one
    putInCache(request, responseFromNetwork.clone());
    return responseFromNetwork;
  } catch (error) {
    const fallbackResponse = await caches.match(fallbackUrl);
    if (fallbackResponse) {
      return fallbackResponse;
    }
    // when even the fallback response is not available,
    // there is nothing we can do, but we must always
    // return a Response object
    return new Response('Network error happened', {
      status: 408,
      headers: { 'Content-Type': 'text/plain' },
    });
  }
};

const enableNavigationPreload = async () => {
  if (self.registration.navigationPreload) {
    // Enable navigation preloads!
    await self.registration.navigationPreload.enable();
  }
};

self.addEventListener('activate', (event) => {
  event.waitUntil(enableNavigationPreload());
});

self.addEventListener('install', (event) => {
  event.waitUntil(
    addResourcesToCache([
      './',
      './index.html',
      './favicon.ico',
      './assets/css/bootstrap.min.css',
      './assets/css/fontawesome.min.css',
      './assets/css/adminlte.css',
      './assets/css/OverlayScrollbars.min.css',
      './assets/css/notifications.css',
      './assets/img/user2-160x160.jpg',
      './assets/img/skyline/sf-bridge.png',
      './assets/img/skyline/sf-skyline.png',
      './assets/img/skyline/sf-trees.png',
      './assets/img/skyline/sf-foreground.png',
      './assets/img/sfnight.jpg',
      './assets/img/santa.png',
      './assets/js/jquery.min.js',
      './assets/js/jquery-ui.min.js',
      './assets/js/adminlte.min.js',
      './home.html',
      './about.html',
      './contact.html',
      './doodles.html',
      './fun.html',
      './games.html',
      './tools.html',
      './work.html',
      './blog/index.html',
      "./assets/img/sfnight2.jpg",
      "./nav/nav.json",
      "./nav/links.json",
      "./nav/resume.json",
      "./nav/work.json",
      "./nav/blog.json",
      "./nav/fun.json",
      "./nav/doodles.json",
      "./nav/games.json",
      "./nav/resume.json",
      "./nav/tools.json",
      "./confetti.js",
      "./assets/fontawesome-free-6.4.0-web/webfonts/fa-solid-900.woff2",
      "./assets/fontawesome-free-6.4.0-web/webfonts/fa-regular-400.woff2",
      "./assets/fontawesome-free-6.4.0-web/webfonts/fa-brands-400.woff2",
      "./assets/css/Raleway.css",
      "./main.js"
    ])
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    cacheFirst({
      request: event.request,
      preloadResponsePromise: event.preloadResponse,
      fallbackUrl: './thelist.html',
    })
  );
});