Service Worker - Uncaught (in promise) TypeError: Failed to fetch

Question

I have made a web app and have used service worker in my app. It's all working fine when online. The files are all cached when we run the app for the first time. But I get this error when it goes offline.

Uncaught (in promise) TypeError: Failed to fetch

I don't know why this error is occurring!

I have used pwabuilder.com for adding service worker and manifest to the web app.

This is the pwabuilder-sw.js file:

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

var preLoad = function() {
console.log('[PWA Builder] Install Event processing');
return caches.open('pwabuilder-offline').then(function(cache) {
    console.log('[PWA Builder] Cached index and offline page during 
Install');
    return cache.addAll([
        '/manup.js',
        'pwabuilder-sw-register.js',
        'pwabuilder-sw.js',
        'manifest.json',
        '/js/angular.min.js',
        '/js/script.js',
        '/js/materialize.min.js',
        '/css/materialize.min.css',
        '/css/style.css',
        '/offline.html',
        '/index.html'
    ]);
});
}

self.addEventListener('fetch', function(event) {
console.log('The service worker is serving the asset.');
event.respondWith(checkResponse(event.request).catch(function() {
    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 = function(request) {
return caches.open('pwabuilder-offline').then(function(cache) {
    return fetch(request).then(function(response) {
        console.log('[PWA Builder] add page to offline' + response.url)
        return cache.put(request, response);
    });
});
};

var returnFromCache = function(request) {
return caches.open('pwabuilder-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 pwabuilder-sw-register.js file:

if (navigator.serviceWorker.controller) {
  console.log('[PWA Builder] active service worker found, no need to register')
} else {
  //Register the ServiceWorker
  navigator.serviceWorker.register('pwabuilder-sw.js', {
    scope: './'
  }).then(function (reg) {
    console.log('Service worker has been registered for scope:' +
      reg.scope);
  });
}

Any clues?!

Answer 1

I found a scenario that this error occurs.

Certain ad block extension blocks the google analytics js file, it would cause the service worker break when fetching.

Disabling the ad block extension could prevent this.

Answer 2

I got the same error has I was trying to cache an entire directory instead of a single file. My guess is that you have a URL that fails to cache and so the entire caching operation fails as well as the cache is atomic meaning: If a single URL fails the entire cache fail.