Uncaught (in promise) TypeError: Request failed

Question

I am creating a Progressive Web App for a university project, but when I checked the console I have this error:

Uncaught (in promise) TypeError: Request failed - serviceworker.js:1

I don't understand where this error is coming from.

The HTML and CSS are showing on as expected, but when I do a PWA audit from the Chrome Dev Tools, it's showing these failures. They are 'no service worker', 'no 200 when offline' and 'user not prompted to install web app'.

Any help is appreciated!

Thanks in advance!

var cache_name = 'gih-cache';
var cached_urls = [
  'offline.html',
  'fourohfour.html',
  'account.html',
  'altontowers.html',
  'bet365.html',
  'booking-altonTowers.html',
  'booking-manchesterAirport.html',
  'booking-northStaffsHotel.html',
  'bookings.html',
  'emmabridgewater.html',
  'freeportTalke.html',
  'index.html',
  'intupotteries.html',
  'search.html',
  'trenthamEstate.html',
  'style.css'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cache_name)
    .then(function(cache) {
      return cache.addAll(cached_urls);
    })
  );
});

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheName.startsWith('pages-cache-') && staticCacheName !== cacheName) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', function(event) {
    console.log('Fetch event for ', event.request.url);
    event.respondWith(
      caches.match(event.request).then(function(response) {
        if (response) {
          console.log('Found ', event.request.url, ' in cache');
          return response;
        }
        console.log('Network request for ', event.request.url);
        return fetch(event.request).then(function(response) {
          if (response.status === 404) {
            return caches.match('fourohfour.html');
          }
          return caches.open(cached_urls).then(function(cache) {
           cache.put(event.request.url, response.clone());
            return response;
          });
        });
      }).catch(function(error) {
        console.log('Error, ', error);
        return caches.match('offline.html');
      })
    );
  });

Answer 1

I had a typo in one of the filenames that I had added to cached_urls. It did not match the name of the real file so I kept getting the error

I found it by quickly setting cached_urls to an empty list and found that the error went away.