Mit Laufzeitcaching der Workbox werden keine Anforderungen im Cache-Speicher auf chrome angezeigt

Question

Ich verwende Workbox-Laufzeit-Caching, um externe Aufrufe zwischenzuspeichern (materialize.css ist einer dieser). In meinem Netzwerk Registerkarte zeigt es, dass die Anforderung von Serviceworker kommt (sieht gut aus):

Aber auf Cache-Speicher meiner Laufzeit-Cache sieht leer:

Sie können sehen, meine Service-Mitarbeiter auf Chromes Registerkarte Anwendung, und das ist die Website: https://quack.surge.sh/

Service-Arbeiter-Code:

const workboxSW = new self.WorkboxSW(); 
workboxSW.precache(fileManifest); 
workboxSW.router.registerNavigationRoute("/index.html");workboxSW.router.registerRoute(/^https:\/\/res.cloudinary.com\/dc3dnmmpx\/image\/upload\/.*/, workboxSW.strategies.cacheFirst({}), 'GET'); 
workboxSW.router.registerRoute('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css', workboxSW.strategies.cacheFirst({}), 'GET'); 
workboxSW.router.registerRoute('https://res.cloudinary.com/dc3dnmmpx/image/upload/(.*)', workboxSW.strategies.cacheFirst({}), 'GET'); 

Ist das das erwartete Verhalten? Ich bin ziemlich neu für Service-Mitarbeiter und ich bin mir nicht sicher, was das richtige Ergebnis ist.

Answer 1

Das zugrunde liegende Problem ist, dass diese opaque responses sind, und standardmäßig werden sie nicht mit einer cacheFirst Strategie verwendet.

Es gibt einige Hintergrundinformationen bei https://workboxjs.org/how_tos/cdn-caching.html

Es ist in Workbox Anmeldung debuggen diese Art der Sache zu helfen, aber wie es laut ist, es ist nicht standardmäßig in der Produktion Build aktiviert. Entweder Ihr importScripts() Schalten der Entwicklung bauen zu verwenden (zB importScripts('https://unpkg.com/workbox-sw@2.0.3/build/importScripts/workbox-sw.dev.v2.0.3.js'), oder gehen in DevTools und explizit workbox.LOG_LEVEL = 'debug' Einstellung würde Ihnen eine Log-Nachricht wie folgt aus:

Sie haben ein paar Möglichkeiten, um Dinge arbeiten wie Sie es erwarten:

• Wechsel zu workboxSW.strategies.staleWhileRevalidate(), die standardmäßig undurchsichtige Antwort unterstützt
• Sagen Sie der cacheFirst Strategie, die du bist oka. Verwenden Sie opake Antworten: workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}})
• Da Ihre CDNs von Drittanbietern CORS zu unterstützen scheinen, können Sie über die Eigenschaft crossorigin in den CORS-Modus für Ihre CSS- und Bildanfragen wechseln, und die Antworten sind nicht mehr undurchsichtig : <img src='https://cors.example.com/path/to/image.jpg' crossorigin='anonymous'> oder <link rel='stylesheet' href='https://cors.example.com/path/to/styles.css' crossorigin='anonymous'>