javascript - 未捕获( promise 中)类型错误 : Failed to Fetch - In Service worker when offline

Question

我的服务人员不断收到这个错误，它阻止我的页面离线工作，我做了很多测试，我想我已经弄清楚问题出在哪里，但不知道为什么会发生。 fetch 函数似乎有问题，所以当它尝试获取 'Index.html' 页面时，它会返回 'uncaught 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');
        })
    );
}
});

Answer 1

根据您的服务人员，您的 HTML 文档的 URL 似乎是 /assignment-real-final/index.html等。这些是绝对 URL。
在您的fetch 内处理程序，您传递相对 URL，例如 index.html给您的cache.match()和 fetch()来电。这些是相对 URL，在将它们转换为绝对 URL 时，服务 worker 文件的位置将用作基础。
所以，如果你的 service worker 文件位于 /sw.js , 相对 URL index.html将被翻译为绝对 URL /index.html , 而不是 /assignment-real-final/index.html .
这是我对为什么会出现缓存未命中和网络故障的最佳猜测——您使用了错误的 URL。