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

admin管理员组

文章数量:1292173

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 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?!

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. 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?!

• javascript
• angularjs
• firebase
• service-worker

Share Improve this question Follow edited Sep 14, 2018 at 13:44 n1stre 6,08644 gold badges2323 silver badges4242 bronze badges asked Jun 19, 2017 at 10:54 Litson ThomasLitson Thomas 15122 gold badges33 silver badges66 bronze badges 1

• for which of the cached url do you get this error? for all? – Stef Chäser Commented Jun 23, 2017 at 14:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

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.

本文标签： javascriptService WorkerUncaught (in promise) TypeError Failed to fetchStack Overflow