服务工作者 - 未捕获（承诺）类型错误：无法获取答案

【问题标题】：Service Worker - Uncaught (in promise) TypeError: Failed to fetch服务工作者 - 未捕获（承诺）类型错误：无法获取
【发布时间】：2017-11-21 13:24:00
【问题描述】：

我制作了一个网络应用程序，并在我的应用程序中使用了服务工作者。上网时一切正常。当我们第一次运行应用程序时，这些文件都被缓存了。但是当它离线时我得到了这个错误。

Uncaught (in promise) TypeError: Failed to fetch

不知道为什么会出现这个错误！

我使用 pwabuilder.com 将 service worker 和 manifest 添加到 web 应用程序。

这是 pwabuilder-sw.js 文件：

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
        }
    });
});
};

这是 pwabuilder-sw-register.js 文件：

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);
  });
}

有什么线索吗？！

【问题讨论】：

对于哪个缓存的 url，您会收到此错误？适合所有人？

标签： javascript angularjs firebase service-worker

【解决方案1】：

我在尝试缓存整个目录而不是单个文件时遇到了同样的错误。我的猜测是您有一个无法缓存的 URL，因此整个缓存操作都失败了，并且缓存是原子含义：如果单个 URL 失败，则整个缓存都会失败。

【讨论】：