Chrome installieren Service Worker addAll konnte nicht abgerufen werden

Question

Ich verwende einen Service Worker, um die Ressourcen meiner Site (HTML, JS, CSS) zwischenzuspeichern.

Wenn ich Firefox verwende, wird mein sw.js korrekt installiert und die erforderlichen Dateien zwischengespeichert. Wenn ich in den Offline-Modus gehe, bekomme ich die Website korrekt formatiert mit allem, was vorhanden ist, aber den Daten (was korrekt ist, da die Daten nicht zwischengespeichert werden).

Allerdings, wenn ich Chrome verwende, bekomme ich einen TypeError: Failed to fetch Fehler. Ich bin mir nicht sicher, warum ich diesen Fehler bekomme, da er in Firefox funktioniert. Außerdem wird derselbe Fehler ausgelöst, wenn das Ereignis fetch ausgelöst wird, und die Anforderung für ein Asset, das sich nicht im Cache befindet (und die Fetch-Funktion aufgerufen wird).

Wenn ich ein leeres Array an die cache.addAll Funktion übergeben bekomme ich keine Fehler bis zu versuchen, tatsächlich das Fetch-Ereignis zu behandeln.

Es ist vielleicht erwähnenswert, dass keine der Dateien, die ich im Cache bin, alle von localhost stammen und nicht von einem anderen Ursprung, also kann ich nicht sehen, dass dies ein domänenübergreifendes Problem ist.

---

Dies ist die Ausgabekonsole, wenn die Servicemitarbeiter der Installation:

Dies ist die Konsole ausgegeben werden, wenn die Seite aktualisieren, nachdem die Servicemitarbeiter der Installation:

---

Dies ist der Code für meinen Servicearbeiter:

const CACHE_NAME = 'webapp-v1'; 
const CACHE_FILES = [ 
    '/', 
    '/public/app.css', 
    '/public/img/_sprites.png', 
    '/public/js/app.min.js', 
    '/public/js/polyfills.min.js' 
]; 

self.addEventListener('install', event => { 
    console.log("[sw.js] Install event."); 
    event.waitUntil(
     caches.open(CACHE_NAME) 
      .then(cache => cache.addAll(CACHE_FILES)) 
      .then(self.skipWaiting()) 
      .catch(err => console.error("[sw.js] Error trying to pre-fetch cache files:", err)) 
    ); 
}); 

self.addEventListener('activate', event => { 
    console.log("[sw.js] Activate event."); 
    event.waitUntil(
     self.clients.claim() 
    ); 
}); 

self.addEventListener('fetch', event => { 
    if (!event.request.url.startsWith(self.location.origin)) return; 
    console.log("[sw.js] Fetch event on", event.request.url); 
    event.respondWith(
     caches.match(event.request).then(response => { 
      console.info("[sw.js] Responded to ", event.request.url, "with", response ? "cache hit." : "fetch."); 
      return response || fetch(event.request); 
     }).catch(err => { 
      console.error("[sw.js] Error with match or fetch:", err); 
     }) 
    ); 
}); 

Jede Hilfe wäre großartig.

Answer 1

cache.addAll(CACHE_FILES) 

wird fehlschlagen, wenn 1 der Datei nicht zugänglich ist (HTTP 400.401 etc, auch 5XX und 3XX manchmal) alle Fehler zu vermeiden, wenn 1 in einer Karte Schleife einzelne catch-Anweisung nicht verwenden, wie hier https://github.com/GrosSacASac/server-in-the-browser/blob/master/client/js/service_worker.js#L168

Die Tatsache, dass es mit einem leeren Array nicht fehlschlägt, bedeutet wahrscheinlich, dass Sie in CACHE_FILES eine Ressource haben, auf die nicht zugegriffen werden kann.

Vielleicht ist Firefox weniger restrective und speichert den Körper der 400 Antwort.

In Ihrem Fetch-Handler versuchen Sie, caches.match direkt zu verwenden, aber ich denke, das ist nicht legal. Sie müssen zuerst die Caches öffnen und dann von einem geöffneten Cache können Sie cache.match tun. Siehe https://github.com/GrosSacASac/server-in-the-browser/blob/master/client/js/service_worker.js#L143