Uncaught (In Promise) TypeError: Failed to Fetch - In Service Worker 离线时答案

【问题标题】：Uncaught (In Promise) TypeError: Failed to Fetch - In Service worker when offlineUncaught (In Promise) TypeError: Failed to Fetch - In Service Worker 离线时
【发布时间】：2017-04-28 18:32:53
【问题描述】：

我的 Service Worker 中不断出现此错误，导致我的页面无法离线工作，我已经进行了大量测试，我认为我已经找出问题所在，但不知道为什么会发生。 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');
        })
    );
}
});

【问题讨论】：

标签： javascript git offline service-worker

【解决方案1】：

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

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

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

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

【讨论】：