Использовать кеш ServiceWorker только в автономном режиме

Question

Я пытаюсь интегрировать сервис-работников в свое приложение, но я обнаружил, что работник службы пытается получить кешированный контент даже в Интернете, но я хочу, чтобы он предпочитал сеть в этих ситуациях. Как я могу это сделать? Ниже приведен код, который у меня есть сейчас, но я не думаю, что он работает. SW Код установки для краткости опущен.

var CACHE_NAME = 'my-cache-v1'; 
var urlsToCache = [ 
    /* my cached file list */ 
]; 

self.addEventListener('install', function(event) { 
    // Perform install steps 
    event.waitUntil(
    caches.open(CACHE_NAME) 
     .then(function(cache) { 
     console.log('Opened cache'); 
     return cache.addAll(urlsToCache); 
     }) 
); 
}); 

/* request is being made */ 
self.addEventListener('fetch', function(event) { 
    event.respondWith(
    //first try to run the request normally 
    fetch(event.request).catch(function() { 
     //catch errors by attempting to match in cache 
     return caches.match(event.request).then(function(response) { 
     // Cache hit - return response 
     if (response) { 
      return response; 
     } 
     }); 
    }) 
); 
}); 

Это, кажется, ведет к предупреждениям, как The FetchEvent for "[url]" resulted in a network error response: an object that was not a Response was passed to respondWith(). Я новичок работникам сферы обслуживания, поэтому приносит извинение за любую ошибочную терминологию или плохой практику, будет приветствовать любые советы. Спасибо!

Answer 1

Не проверяя это, я предполагаю, что вы не правильно разрешаете respondWith() в случае, если совпадение кэша отсутствует. According to MDN, код, переданный в respondWith(), должен «разрешать, возвращая ответ или сетевую ошибку для извлечения». Так почему бы не попробовать просто сделать это:

self.addEventListener('fetch', function(event) { 
    event.respondWith(
    fetch(event.request).catch(function() { 
     return caches.match(event.request); 
    }) 
); 
});