我在我的服务工作者中一直遇到这个错误,它使我的页面无法在离线情况下运行。我已经进行了很多测试,我认为我已经找出了问题所在,但不知道为什么会出现这个问题。似乎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');
})
);
}
});