サーバーがダウンしたときにService Workerでキャッチされないエラーが発生する

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 

私は例外をしようとして処理するためにフェッチ（）でキャッチを追加しましたが、それはまだ失敗（とキャッチが呼び出されません）。私はcaches.open（）とrespondWith（）でもキャッチを追加しました。

私が知っているのは、これらのエラーを無視しても、私はむしろそれらを処理し、コンソールに出力しないなど何もしないので、出力しているコンソールに意味のあるものを見ることができます。

どのようにエラーメッセージを停止できますか？

サービスのインストール時のエラーはprobemではありませんが、キャッチして無視するのも良いでしょう。おそらく

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()に追加しようとしたことを述べたが、知っている：

Answer 1

あなたfetch()約束鎖の末端にノーオペレーション.catch()に追加すると、記録されてからUncaught (in promise) TypeError: Failed to fetchメッセージを防止しなければなりませんそれはチェーンの正しい部分に位置していませんでしたか？

Failed to load resource: net::ERR_CONNECTION_REFUSEDメッセージがログに記録されるのを防ぐ方法はありません。これはChromeのネイティブネットワークコードから直接得られるものです。あなたがJavaScriptから "扱う"ことはできません。

Answer 2

私はあなたが持っていた所にキャッチを置きましたが、私はもう一度試しましたが、それでもエラーがありました。キーはthen（）呼び出しの第2の関数であることが判明しました。

これは最終的に動作するコードでした。私がカットアンドペーストしたポストからの初期応答処理にもバグがありました。これは私のために働く。

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; 
     }); 
    })); 
});