Verwenden Sie ServiceWorker-Cache nur, wenn offline

Question

Ich versuche, Service Worker in meine App zu integrieren, aber ich habe festgestellt, der Service Worker versucht, zwischengespeicherten Inhalt abrufen, auch wenn online, aber ich möchte, dass das Netzwerk in diesen Situationen. Wie kann ich das machen? Unten ist der Code, den ich jetzt habe, aber ich glaube nicht, dass es funktioniert. Der SW-Installationscode wird der Kürze halber weggelassen.

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

Dies scheint Warnungen zu führen wie The FetchEvent for "[url]" resulted in a network error response: an object that was not a Response was passed to respondWith(). ich Service-Mitarbeiter neu bin, so entschuldigen uns für die irren Terminologie oder schlechte Praktiken, irgendwelche Tipps begrüßen würde. Vielen Dank!

Answer 1

Ohne dies zu testen, meine Vermutung ist, dass Sie respondWith() nicht korrekt auflösen, wenn es keine Cache-Übereinstimmung gibt. According to MDN, soll der Code, der an respondWith() übergeben wird, "aufgelöst werden, indem ein Antwort- oder Netzwerkfehler zu Fetch zurückgegeben wird". Warum versuchen Sie es nicht einfach:

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