Service worker uncaught in promise not sure where

Viewed 3704

I'm building my web app offline first based on this video:

https://www.youtube.com/watch?v=cmGr0RszHc8

And I'm running into trouble with the service worker. Here is my sw.js code:

const FILES_TO_CACHE = [
"/js/app.js", 
"/js/authenticate.js", 
"/js/forms.js", 
"/js/head-scripts.js", 
"/js/remember.js", 
"/js/style.js", 
"/style/style.css", 
"/index.html", 
"/tracker/index.html", 
"/assets/LongShineLogo.png", 
"/assets/shineSolarLogo.png", 
"/assets/ShineSunburst.png",
"/error/404.html",
"https://fonts.googleapis.com/css?family=Roboto",
"https://use.fontawesome.com/releases/v5.2.0/css/all.css"
];

const CACHE_NAME = "static-cache-v1";

// Caching files in the cache
self.addEventListener("install", event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
        .then(function(cache) {
            return cache.addAll(FILES_TO_CACHE)
        })
    );
});

self.addEventListener("fetch", event => {

    // Getting URL
    const url = new URL(event.request.url);

    // Responding from cache if possible. If not, respond with the network or other cached content
    if (url.origin === location.origin && url.pathname === "/") {
        event.respondWith(caches.match("/index.html"));
        return;
    } else if (url.pathname === "/tracker/") {
        event.respondWith(caches.match("/tracker/index.html"));
        return;
    } else {
        event.respondWith(caches.match("/error/404.html"));
    }

    event.respondWith(
        caches.match(event.request)
        .then(response => response || fetch(event.request))
    );

});

The error message I'm getting is:

Uncaught (in promise) TypeError: Request failed

And it's throwing that error message after the service worker is successfully registered (based on a console.log during my initial install phase of my main javascript file), on line 1 of my service worker file. As you can see, line one is just me declaring the constant variable. I've tried putting a try catch block around everything I can think, but I still get an uncaught error.

How can I track this error down better?

-- EDIT --

So I have tracked down the error somewhat. Based on the second to last answer to this question: Uncaught (in promise) TypeError: Request failed
I painstakingly went through every url in the FILES_TO_CACHE array, and tracked the problem down to the /error/404.html page. I can't figure out what's wrong, because I've gone through three times and checked that the file exists, there is something in the file, and that I have the path right.

Any thoughts???

0 Answers
Related