작업 저장소 런타임 캐싱을 사용하면 요청이 Chrome의 캐시 저장소에 표시되지 않습니다.

Question

외부 호출을 캐싱하기 위해 작업 시간 런타임 캐싱을 사용하고 있습니다 (materialize.css 중 하나임). 내 네트워크 탭에서이 serviceWorker에서 오는 요청 (미세 모양) 것을 보여줍니다

그러나 캐시 저장소에 내 런타임 캐시가 비어 같습니다

당신이 볼 수있는 내 서비스 직원이 크롬의 애플리케이션 탭에 있습니다.이 웹 사이트는 다음과 같습니다. https://quack.surge.sh/

서비스 작업자 코드 :

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

예상되는 동작입니까? 나는 일하는 근로자들에게 아주 새로운데, 나는 옳은 결과가 무엇인지 확신 할 수 없다.

Answer 1

근본적인 문제는 이들이 opaque responses이며 기본적으로 cacheFirst 전략과 함께 사용되지 않는다는 것입니다. https://workboxjs.org/how_tos/cdn-caching.html

에서 몇 가지 배경이 이런 종류의 물건을 디버깅 할 수 있도록 연장 상자 로그인,하지만 그것은 시끄러운으로, 그것은 생산 빌드에서 기본적으로 사용되지 것 거기

.

당신은 작업 물건을 취득하기위한 몇 가지 옵션이 : 어느 당신의 importScripts() 전환하는 것은 (예를 들어 importScripts('https://unpkg.com/workbox-sw@2.0.3/build/importScripts/workbox-sw.dev.v2.0.3.js'), 또는 DevTools로에 가서 명시 적으로 workbox.LOG_LEVEL = 'debug'을 설정하는 것은 당신에게 다음과 같은 로그 메시지를 줄 것을 개발 빌드를 사용하는 당신은 예상대로 :.

• 변경은 오카있는 cacheFirst 전략에게 기본
• 에 의해 불투명 한 응답을 지원 workboxSW.strategies.staleWhileRevalidate()에 불투명 한 응답을 사용하는 경우 : workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}})
• 타사 CDN이 모두 CORS를 지원하는 것 같기 때문에 crossorigin 속성을 통해 CSS 및 이미지 요청에 대해 CORS 모드를 선택할 수 있으며 더 이상 불투명하지 않습니다. : <img src='https://cors.example.com/path/to/image.jpg' crossorigin='anonymous'> 또는 <link rel='stylesheet' href='https://cors.example.com/path/to/styles.css' crossorigin='anonymous'>