Service worker issue: page never loads when page is refreshed with "update on reload" checked

Demo:

I followed along with Udacity's Offline Web Applications course in order to get my app working offline. Here is my code:

main.js

// other stuff above
if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/service-worker.js').catch(function() {
    console.log('Service worker registration failed.');
  });
}

service-worker.js

let currCacheName = 'premium-poker-tools-1';

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(currCacheName).then(function(cache) {
      return cache.addAll([
        '/',
        'app.js',
        'static/logo.png',
        'static/favicon.png',
        'static/cards/ace-of-clubs.png',
      ]);
    }).catch(function () {
      console.error('Error with caches.open or cache.addAll');
    })
  );
});

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys()
      .then(function getOldCachesThatBeginWithPremiumPokerToolsDash (cacheNames) {
        return cacheNames.filter(function (cacheName) {
          return cacheName.startsWith('premium-poker-tools-') && (cacheName !== currCacheName);
        });
      })
      .then(function removeOldCachesThatBeginWithPremiumPokerToolsDash (oldCachesThatBeginWithPremiumPokerToolsDash) {
        let removeCachePromises = [];

        oldCachesThatBeginWithPremiumPokerToolsDash.forEach(function (oldCacheThatBeginsWithPremiumPokerToolsDash) {
          removeCachePromises.push(caches.delete(oldCacheThatBeginsWithPremiumPokerToolsDash));
        });

        return Promise.all(removeCachePromises);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      if (response) {
        return response;
      }

      return fetch(event.request);
    }).catch(function () {
      console.error('Error trying to match event request to cache.');
    })
  );
});

The issue comes when I am in a state where I have a service worker installed and active, and I have all of my stuff cached. When I have the dev tools open and have "update on reload" checked in Chrome, if I reload, the page looks the same, but has the spinner indicating that it is still loading. In the dev tools, it shows that a new service worker is "waiting to activate" even though I didn't make any changes. In the network tab, it shows that the request to http://localhost:8080/ is continually pending.

But if I press the "x" in Chrome to tell it to stop loading, and then refresh again, it loads perfectly.

I can't seem to figure out what is wrong. / is in the premium-poker-tools-1 cache, so shouldn't the request hit the service worker and return the cached HTML? And even if it doesn't find it there, shouldn't it be sending a request out to the server to get the response? How is it getting hung up?

And what's the deal with the dev tools showing a new service worker waiting to activate? Shouldn't it just be using the old service worker?

Edit: When I add in the following to the fetch listener such that it is cached, I don't see either statement being logged. Then when I click the x in Chrome to stop the page from loading and then refresh, I do see "Found / in cache." logged.

if (event.request.url === 'http://localhost:8080/') {
  caches.match(event.request).then(function () {
    console.log('Found / in cache.');
  }).catch(function () {
    console.log('Didn\'t find / in cache.');
  });
}

from Service worker issue: page never loads when page is refreshed with "update on reload" checked