PWA looking shabby sometimes until page reload

I’ve made a progressive web app to practice math here: https://www.mathmammoth.com/practice/

The problem is, sometimes it starts looking all shabby until I reload the page. To reproduce this problem, go to that page. It looks fine now, but when you reload it, it looks really shabby – the CSS and JavaScript somehow fail to load. It also flashes this “This site can’t be reached” error (It might show something different in your browser, that’s just for Chrome). This only happens for the first time you visit the page. It can happen at different times, I think it does when I change the service worker too.

Here is the service worker file:

var CACHE_VERSION = 48;
var CACHE_STATIC_NAME = 'static-v' + CACHE_VERSION;
var CACHE_DYNAMIC_NAME = 'dynamic-v' + CACHE_VERSION;

self.addEventListener('install', function(event) {
  self.skipWaiting();
  console.log(
    '[Service Worker] Installing Service Worker ...',
    event
  );
  event.waitUntil(
    caches.open(CACHE_STATIC_NAME).then(function(cache) {
      console.log('[Service Worker] Precaching App Shell...');
      cache.addAll([
        '/practice/',
        '/practice/favicon.ico',
        '/practice/index.php',
        '/practice/practice.css',
        '/practice/multiply-with-zeros.php',
        '/practice/exponents.php',
        '/practice/divide-numbers-ending-in-zeros.php',
        '/practice/multiplication.php',
        '/practice/fact-families.php',
        '/practice/addition-single-digit.php',
        '/practice/addition-subtraction-two-digit.php',
        '/practice/factorfind.php',
        '/practice/division.php',
        '/practice/division-remainder.php',
        '/practice/app.js',
        '/practice/bootstrap.min.css',
        '/practice/bootstrap.min.js',
        '/practice/jquery-3.3.1.min.js'
      ]);
    })
  );
});

self.addEventListener('activate', function(event) {
  console.log(
    '[Service Worker] Activating Service Worker ....',
    event
  );
  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(
        keyList.map(function(key) {
          if (key != CACHE_STATIC_NAME && key != CACHE_DYNAMIC_NAME) {
            console.log(
              '[Service Worker] Removing old cache...',
              key
            );
            return caches.delete(key);
          }
        })
      );
    })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches
      .match(event.request)
      .then(res => {
        if (res) {
          return res;
        } else {
          return fetch(event.request)
            .then(function(res) {
              caches.open(CACHE_DYNAMIC_NAME).then(function(cache) {
                cache.put(event.request, res.clone());
                return res;
              });
            })
            .catch(function() {});
        }
      })
      .catch(() => {
        return fetch(event.request)
          .then(function(res) {
            caches.open(CACHE_DYNAMIC_NAME).then(function(cache) {
              cache.put(event.request, res.clone());
              return res;
            });
          })
          .catch(function() {});
      })
  );
});

Thanks for any help!

Caleb

I found the problem. I forgot to return the caches.open call in two places.