当服务器关闭时，Service Worker 会抛出未捕获的错误答案

【问题标题】：Service Worker throws uncaught errors when the server is down当服务器关闭时，Service Worker 会抛出未捕获的错误
【发布时间】：2016-12-22 13:55:40
【问题描述】：

我正在使用服务工作者的缓存工具，但是，在更新站点后，当我刷新页面时，缓存仍然提供旧数据。

所以根据this post 中的答案，我实施了stale-while-revalidate：

self.addEventListener('fetch', function(event) {
    event.respondWith(caches.open(CACHE_NAME).then(function(cache) {
        return cache.match(event.request).then(function(response) {
            var fetchPromise = fetch(event.request).then(function(networkResponse) {
                // if we got a response from the cache, update the cache
                if (response) {
                    console.log("cached page: " + event.request.url);
                    cache.put(event.request, networkResponse.clone());
                }
                return networkResponse;
            });

            // respond from the cache, or the network
            return response || fetchPromise;
        });
    }));
});

连接后，一切正常，我可以看到控制台日志消息。

当我停止服务器并刷新页面时，会出现大量异常。

Uncaught (in promise) TypeError: Failed to fetch
Failed to load resource: net::ERR_CONNECTION_REFUSED

我在 fetch() 上添加了一个 catch 来尝试处理异常，但它仍然失败（并且未调用 catch）。我在 caches.open() 和 respondWith() 上添加了一个捕获但同样的东西。

我知道我可以忽略这些错误，但我宁愿处理它们而不做任何事情（包括不将它们输出到控制台），这样我就可以在我输出的控制台中看到有意义的东西.

如何停止错误消息？

服务安装时的错误不是问题，但也可以很好地捕捉和忽略。

【问题讨论】：

标签： caching service-worker

【解决方案1】：

在 fetch() 承诺链的末尾添加无操作 .catch() 应该可以防止 Uncaught (in promise) TypeError: Failed to fetch 消息被记录：

var fetchPromise = fetch(event.request).then(function(networkResponse) {
    // if we got a response from the cache, update the cache
    if (response) {
      console.log("cached page: " + event.request.url);
      cache.put(event.request, networkResponse.clone());
    }
    return networkResponse;
}).catch(function() {
  // Do nothing.
});

我知道您提到您尝试添加 .catch()，但它可能没有位于链的正确部分？

我不知道有什么方法可以阻止记录 Failed to load resource: net::ERR_CONNECTION_REFUSED 消息，因为它直接来自 Chrome 的本机网络代码。 JavaScript 没有任何东西可以“处理”。

【讨论】：

是的，这似乎是您无法隐藏网络状态警报的共识 :( 捕获仍然没有工作，但我确实让它工作了。请参阅我的最终代码。感谢您的帮助。

【解决方案2】：

我确实把catch放在你有它的地方，我什至又试了一次，但仍然出错。关键是 then() 调用的第二个函数。

这是最终工作的代码。我剪切和粘贴的帖子的初始响应处理也存在错误。这个对我有用。

self.addEventListener('fetch', function(event) {
    event.respondWith(caches.open(CACHE_NAME).then(function(cache) {
        return cache.match(event.request).then(function(response) {
            //console.log("cache request: " + event.request.url);
            var fetchPromise = fetch(event.request).then(function(networkResponse) {
                // if we got a response from the cache, update the cache
                //console.log("fetch completed: " + event.request.url, networkResponse);
                if (networkResponse) {
                    //console.debug("updated cached page: " + event.request.url, networkResponse);
                    cache.put(event.request, networkResponse.clone());
                }
                return networkResponse;
            }, function (e) {
                // rejected promise - just ignore it, we're offline
                //console.log("Error in fetch()", e);
                ;
            });

            // respond from the cache, or the network
            return response || fetchPromise;
        });
    }));
});

【讨论】：