service worker Uncaught (in promise) TypeError: Failed to fetch in VueJS PWA

I’ve been trying to implement a service worker for my Vuejs PWA, and the code I have throws this error in the console right after the fetch event for my localhost URL, http://localhost:8080/

Uncaught (in promise) TypeError: Failed to fetch

This is my code in the sw.js file, which I have in the root folder (/public) along with index.html and manifest.js.

self.addEventListener("install", function(event) {
    event.waitUntil(preLoad());
});

var preLoad = async function(){
    // console.log("Installing web app");
    return caches.open("offline").then(function(cache) {
        // console.log("caching index and important routes");
        return cache.addAll(["/"]);
    });
};

self.addEventListener("fetch", function(event) {
    // console.log('Fetching:', event.request.url);
    event.respondWith(checkResponse(event.request).catch(function() {
        // console.log(event.request);
        return returnFromCache(event.request);
    }));
    event.waitUntil(addToCache(event.request));
});
  
var checkResponse = function(request){
    return new Promise(function(fulfill, reject) {
        fetch(request).then(function(response){
            if(response.status !== 404) {
                fulfill(response);
            } else {
                reject();
            }
        }, reject);
    });
};
  
var addToCache = async function(request){
    return caches.open("offline").then(function (cache) {
        return fetch(request).then(function (response) {
            // console.log(response.url + " was cached");
            return cache.put(request, response);
        });
    });
};
  
var returnFromCache = async function(request){
    return caches.open("offline").then(function (cache) {
        return cache.match(request).then(function (matching) {
            if(!matching || matching.status == 404) {
                return cache.match("offline.html");
            } else {
                return matching;
            }
        });
    });
};

This is the index.html file:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="theme-color" content="#296f9c"/>
    <meta name="description" content="Descubre más de 160 recetas de cócteles en el app de coctelería del Cantinero Kentubano.">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/cantinero-logo-apple-touch.png">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <title>Cantinero App</title>
  </head>
  <body>
    <script>
      if (!navigator.serviceWorker.controller) {
        navigator.serviceWorker.register("/sw.js").then(function(reg) {
          console.log("Service worker has been registered for scope: " + reg.scope);
        });
      }
    </script>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

Anyone know why this is happening and how I can fix it?

Thanks!

Source: Ask Javascript Questions

LEAVE A COMMENT