I am learning about PWAs/service workers and most tutorials either use the offline mode in the application or network tab to toggle the online state. They seem to have no issues yet when I toggle it offline, my service worker is still fetching from the server. The only true way I can get my fallback HTML to load is to stop my express server. I have also tried without any node environment and use live-server as a vscode extension but that too gives me the same result. I have to stop the live-server for it to realize I'm offline.

I've checked my fetch event code in sw.js which matches the tutorial so I don't see any reason for it not to work like others.

// fetch event
self.addEventListener('fetch', function onFetchReceived(evt) {
  // console.log(`Fetch event received`, evt);
  evt.respondWith(
    caches.match(evt.request).then(function fulfilled(cacheResponse) {
      return (
        cacheResponse ||
        fetch(evt.request)
          .then((fetchResponse) => {
            console.log('not found in cache, getting from server');
            return caches.open(dynamicCacheName).then((cache) => {
              cache.put(evt.request.url, fetchResponse.clone());
              return fetchResponse;
            });
          })
          .catch(() => {
            console.log('offline, unable to retrieve from server.');
            return caches.match('/pages/offline.html');
          })
      );
    })
  );
});