Question

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

根据this post中的答案，我实施了陈旧的重新验证：

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（）上添加了一个catch但同样的东西。

我知道我可以忽略这些错误，但我宁愿处理它们并且什么都不做（包括不将它们输出到控制台）所以我可以在控制台中看到有意义的东西我正在输出

如何停止错误消息？

服务安装时的错误不是一个探测器，但捕获和忽略也很好。

Answer 1

在免费.catch()中添加fetch()保证链的末尾应该可以防止记录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“处理”。

Answer 2

我确实把捕获物放在你所拥有的地方，我甚至再试过，但仍然是错误。密钥结果是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;
        });
    }));
});

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

2 个答案: