未捕获(In Promise)TypeError:无法获取 - 脱机时在Service worker中

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

根据您的 Service Worker，您的 HTML 文档的 URL 似乎是 等/assignment-real-final/index.html。这些是绝对 URL。

\n

在处理程序内部fetch，您可以将相对 URL 传递index.html给您的cache.match()和fetch()调用。这些是相对 URL，在将它们转换为绝对 URL 时，将使用 Service Worker 文件的位置作为基础。

\n

因此，如果您的 Service Worker 文件位于/sw.js，相对 URLindex.html将被转换为绝对 URL /index.html，而不是/assignment-real-final/index.html。

\n

这是我对为什么会出现缓存未命中和网络故障的最佳猜测\xe2\x80\x94你使用了错误的URL。

\n