Uncaught (In Promise) TypeError: Failed to Fetch - In Service worker when offline

Question

I keep getting this error in my service worker that is stopping my page from working offline, Iv'e done a lot of testing and I think Iv'e figured out where the problem is but not why it is happening. There seems to be a problem with the fetch function, so when it tries to fetch the 'Index.html' page, it returns the error of 'uncaught promise'. I only think this because when I remove the piece of code that fetches the pages, and reupload it to git, there doesn't seem to be any errors, but I could also be wrong. Below is the code I'm using to get this to work. I haven't uploaded all of it, as it would be a lot of code to sieve through, I've only put in the code where I think the problem is, I can put the rest of the code in if anyone wants to see it though. Any help would be really appreciated as this is driving me insane! Thankyou.

var BASE_PATH = "/assignment-real-final/";
var TEMP_IMAGE_CACHE_NAME = 'temp-cache-v1';
var CACHE_NAME = 'gih-cache-v7';
var newsAPIJSON = "https://newsapi.org/v1/articles?source=bbc-news&apiKey=c5b2ba3cfb4c4717852bf328348da961";
var CACHED_URLS = [
// HTML
  BASE_PATH +'index.html',
  BASE_PATH +'staffs-uni.html',
  BASE_PATH +'sign-up.html',
];


self.addEventListener('fetch', function(event) {
var requestURL = new URL(event.request.url);
// Handle requests for index.html
if (requestURL.pathname === BASE_PATH + 'index.html') { // WHERE I THINK THE PROBLEM IS
    event.respondWith(
        caches.open(CACHE_NAME).then(function(cache) {
            return cache.match('index.html').then(function(cachedResponse) {
                var fetchPromise = fetch('index.html').then(function(networkResponse) {
                    cache.put('index.html', networkResponse.clone());
                    return networkResponse;
                });
                return cachedResponse || fetchPromise;
            });
        })
    );
} else if (requestURL.pathname === BASE_PATH + 'staffs-uni.html') { // WHERE I THINK THE PROBLEM IS
    event.respondWith(
        caches.open(CACHE_NAME).then(function(cache) {
            return cache.match('staffs-uni.html').then(function(cachedResponse) {
                var fetchPromise = fetch('staffs-uni.html').then(function(networkResponse) {
                    cache.put('staffs-uni.html', networkResponse.clone());
                    return networkResponse;
                });
                return cachedResponse || fetchPromise;
            });
        })
    );

    // Handle requests for Google Maps JavaScript API file
} else if (requestURL.href === googleMapsAPIJS) {
    event.respondWith(
        fetch(
            googleMapsAPIJS+'&'+Date.now(),
            { mode: 'no-cors', cache: 'no-store' }
        ).catch(function() {
            return caches.match('offline-map.js');
        })
    );
}
});

Answer 1

Based on your service worker, the URLs for your HTML documents seem to be /assignment-real-final/index.html, etc. Those are absolute URLs.

Inside your fetch handler, you pass relative URLs like index.html to your cache.match() and fetch() calls. Those are relative URLs, and the location of the service worker file will be used as the base when translating them to absolute URLs.

So, if your service worker file is located at /sw.js, the relative URL index.html will be translated to the absolute URL /index.html, instead of /assignment-real-final/index.html.

That's my best guess as to why there would be a cache miss and a network failure—you're using the wrong URLs.