Użyj pamięci podręcznej ServiceWorker tylko w trybie offline.

Question

Próbuję zintegrować pracowników serwisu z moją aplikacją, ale zauważyłem, że pracownik serwisu próbuje pobrać buforowaną zawartość nawet w trybie online, ale chcę, aby preferowała sieć w takich sytuacjach. Jak mogę to zrobić? Poniżej znajduje się kod, który mam teraz, ale nie wierzę, że działa. Kod instalacyjny SW jest pominięty dla zwięzłości.

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

To wydaje się prowadzić do ostrzeżenia jak The FetchEvent for "[url]" resulted in a network error response: an object that was not a Response was passed to respondWith(). Jestem nowy na pracowników usług, więc przepraszam za każdym błędnej terminologii lub złych praktyk, będą wdzięczne za wszelkie wskazówki. Dziękuję Ci!

Answer 1

Bez testowania tego, domyślam się, że nie rozwiązujesz poprawnie respondWith() w przypadku, gdy nie ma zgodności pamięci podręcznej. According to MDN, kod przekazywany do respondWith() ma "rozwiązać przez zwrócenie odpowiedzi lub błędu sieci do pobrania." Dlaczego więc nie spróbować tego po prostu:

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