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) {

var preLoad = async function(){
    // console.log("Installing web app");
    return"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);
var checkResponse = function(request){
    return new Promise(function(fulfill, reject) {
            if(response.status !== 404) {
            } else {
        }, reject);
var addToCache = async function(request){
    return"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"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">
    <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="" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <title>Cantinero App</title>
      if (!navigator.serviceWorker.controller) {
        navigator.serviceWorker.register("/sw.js").then(function(reg) {
          console.log("Service worker has been registered for scope: " + reg.scope);
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    <div id="app"></div>

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


Source: Ask Javascript Questions