Usa ServiceWorker cache quando collegato

Question

Sto cercando di integrare i lavoratori dei servizi nella mia app, ma ho trovato l'operaio di servizio tenta di recuperare il contenuto della cache anche quando online, ma voglio che preferiscono la rete in queste situazioni. Come posso fare questo? Di seguito è riportato il codice che ho ora, ma non credo che funzioni. Il codice di installazione SW è omesso per brevità.

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

Questo sembra portare ad avvertimenti come The FetchEvent for "[url]" resulted in a network error response: an object that was not a Response was passed to respondWith(). Sono nuovo di lavoratori dei servizi, in modo da scuse per qualsiasi terminologia sbagliate o cattive pratiche, accoglierebbero eventuali suggerimenti. Grazie!

Answer 1

Senza prova questo fuori, la mia ipotesi è che non si sta risolvendo respondWith() correttamente nel caso in cui non v'è alcuna corrispondenza cache. According to MDN, il codice passato a respondWith() si suppone che "risolvere restituendo un errore di risposta o di rete per Fetch." Quindi, perché non provare a fare questo:

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