未捕获（在Promise中）类型错误：离线时在Service Worker中获取失败

Question

我在我的服务工作者中一直遇到这个错误，它使我的页面无法在离线情况下运行。我已经进行了很多测试，我认为我已经找出了问题所在，但不知道为什么会出现这个问题。似乎fetch功能存在问题，因此当它尝试获取“Index.html”页面时，会返回“未捕获的Promise”错误。我只是这样认为，因为当我删除获取页面的代码片段并重新上传到git时，似乎没有任何错误，但我可能也是错的。以下是我用来让它工作的代码。我没有上传全部代码，因为需要筛选的代码太多了，我只放置了我认为存在问题的代码片段，如果有人想查看其余的代码，我可以将其放入。非常感谢您的任何帮助，因为这让我感到疯狂！谢谢。

var BASE_PATH = "/assignment-real-final/";
var TEMP_IMAGE_CACHE_NAME = 'temp-cache-v1';
var CACHE_NAME = 'gih-cache-v7';
var newsAPIJSON = "https://newsapi.org/v1/articles?source=bbc-news&apiKey=c5b2ba3cfb4c4717852bf328348da961";
var CACHED_URLS = [
// HTML
  BASE_PATH +'index.html',
  BASE_PATH +'staffs-uni.html',
  BASE_PATH +'sign-up.html',
];


self.addEventListener('fetch', function(event) {
var requestURL = new URL(event.request.url);
// Handle requests for index.html
if (requestURL.pathname === BASE_PATH + 'index.html') { // WHERE I THINK THE PROBLEM IS
    event.respondWith(
        caches.open(CACHE_NAME).then(function(cache) {
            return cache.match('index.html').then(function(cachedResponse) {
                var fetchPromise = fetch('index.html').then(function(networkResponse) {
                    cache.put('index.html', networkResponse.clone());
                    return networkResponse;
                });
                return cachedResponse || fetchPromise;
            });
        })
    );
} else if (requestURL.pathname === BASE_PATH + 'staffs-uni.html') { // WHERE I THINK THE PROBLEM IS
    event.respondWith(
        caches.open(CACHE_NAME).then(function(cache) {
            return cache.match('staffs-uni.html').then(function(cachedResponse) {
                var fetchPromise = fetch('staffs-uni.html').then(function(networkResponse) {
                    cache.put('staffs-uni.html', networkResponse.clone());
                    return networkResponse;
                });
                return cachedResponse || fetchPromise;
            });
        })
    );

    // Handle requests for Google Maps JavaScript API file
} else if (requestURL.href === googleMapsAPIJS) {
    event.respondWith(
        fetch(
            googleMapsAPIJS+'&'+Date.now(),
            { mode: 'no-cors', cache: 'no-store' }
        ).catch(function() {
            return caches.match('offline-map.js');
        })
    );
}
});

- seanrs97

Answer 1

根据您的服务工作者，HTML文档的URL似乎是/assignment-real-final/index.html等绝对URL。在您的fetch处理程序中，您将相对URL（例如index.html）传递给cache.match()和fetch()调用。这些是相对URL，并且服务工作者文件的位置将用作将它们转换为绝对URL时的基础。因此，如果您的服务工作者文件位于/sw.js，则相对URL index.html将被转换为绝对URL /index.html，而不是/assignment-real-final/index.html。这是我最好的猜测，为什么会出现缓存未命中和网络故障 - 您正在使用错误的URL。

- Jeff Posnick