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处理程序中，您将index.html之类的相对URL传递给cache.match()和fetch()调用。这些是相对URL，将服务工作者文件的位置转换为绝对URL时将以此为基础。

因此，如果您的服务工作者文件位于/sw.js，则相对URL index.html将转换为绝对URL /index.html，而不是/assignment-real-final/index.html。

关于为什么会出现缓存丢失和网络故障，这是我的最佳猜测-您使用的URL错误。

未捕获（In Promise）TypeError：无法获取 - 脱机时在Service worker中

1 个答案: