Сервис-работник бросает непонятные ошибки, когда сервер не работает

Question

Я использую средство кэширования рабочих служб, однако после обновления сайта кеш по-прежнему обслуживает старые данные при обновлении страницы.

Так, согласно ответу на this post я реализовал несвежий-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 

Я добавил улов на выборку(), чтобы попытаться обработать исключения, но она по-прежнему не удается (и улов не называется). Я добавил catch на caches.open() и replyWith(), но то же самое.

Я знаю, что может игнорировать эти ошибки, но я бы лучше справился с ними и ничего не делал (в том числе не выводя их на консоль), поэтому я могу видеть значимые вещи в консоли, которую я выводил.

Как я могу остановить сообщения об ошибках?

Ошибка, когда установка службы является менее пробной, но это также было бы неплохо поймать и проигнорировать.

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