runtimeCaching으로 구성된 sw-precache가 sw-toolbox를로드하지 않습니다.

Question

sw-precache 설명서의 내용에 따르면 sw-precache에 대한 런타임 캐싱 구성을 포함하여 https://github.com/GoogleChrome/sw-precache#runtime-caching은 동적 콘텐츠의 런타임 캐싱을 위해 sw-toolbox를 포함해야합니다. 나는 sw-precache의 CLI뿐만 아니라 grunt-sw-precache와 함께 이것을 사용하려고 시도했다. 그랑 트에 대한 내 구성은 다음과 같습니다 :

grunt.initConfig({ 
'sw-precache': { 
    build: { 
    baseDir: './public', 
    workerFileName: 'service-worker.js', 
    appendTimestamp: true, 
    cacheId: 'cnbc-polymer-cache-20', 
    clientsClaim: true, 
    directoryIndex: 'index.html', 
    navigateFallback: 'index.html', 
    skipWaiting: true, 
    maximumFileSizeToCacheInBytes: (1024000 * 20), 
    staticFileGlobs: [ 
     '/src/**/*', 
     '/index.html', 
     '/manifest.json', 
     '/bower_components/**/*', 
     '/images/**/*.*', 
     '/favicon.ico' 
    ], 
    verbose: true, 
    runtimeCaching: [{ 
     urlPattern: /franchise/, 
     handler: 'cacheFirst', 
     options: { 
      debug: true, 
      cache: { 
      maxEntries: 10, 
      name: 'franchise-cache', 
      maxAgeSeconds: 180 
      } 
     } 
     }, { 
     urlPattern: /story/, 
     handler: 'cacheFirst', 
     options: { 
      debug: true, 
      cache: { 
      maxEntries: 10, 
      name: 'story-cache', 
      maxAgeSeconds: 180 
      } 
     } 
     }] 
    } 
} 

}});

그리고 CLI를 시도 할 때 내가 사용하는 다음과 같은 SW-미리 캐시-config.js 다음 runtimeCaching 옵션에 비해

module.exports = { 
    baseDir: './public', 
    workerFileName: 'service-worker.js', 
    appendTimestamp: true, 
    cacheId: 'cnbc-polymer-cache-20', 
    clientsClaim: true, 
    directoryIndex: 'index.html', 
    navigateFallback: 'index.html', 
    skipWaiting: true, 
    maximumFileSizeToCacheInBytes: (1024000 * 20), 
    staticFileGlobs: [ 
     '/src/**/*', 
     '/index.html', 
     '/manifest.json', 
     '/bower_components/**/*', 
     '/images/**/*.*', 
     '/favicon.ico' 
    ], 
    verbose: true, 
    runtimeCaching: [{ 
     urlPattern: /franchise/, 
     handler: 'cacheFirst', 
     options: { 
      debug: true, 
      cache: { 
       maxEntries: 10, 
       name: 'franchise-cache', 
       maxAgeSeconds: 180 
      } 
     } 
     }, { 
      urlPattern: /story/, 
      handler: 'cacheFirst', 
      options: { 
       debug: true, 
       cache: { 
        maxEntries: 10, 
        name: 'story-cache', 
        maxAgeSeconds: 180 
       } 
      } 
     }] 
}; 

모든 구성 옵션 다른 하나는 생성 된 서비스 worker.js 파일에 적용되고있다.

내 package.json은 sw-precache의 "^ 4.2.3"및 sw-toolbox의 "^ 3.4.0"을 사용하도록 구성됩니다.

다른 누구도이 문제에 관해 언급하지 않았습니다. 누구든지 sw - precache가 내 runtimeCaching 옵션을 존중하지 못하게하는 문제가 무엇인지에 대해 의견을 말할 수 있습니까?

Answer 1

Grunt Installation을 확인하십시오.

grunt.loadNpmTasks('grunt-sw-precache');

:

$ npm install grunt-sw-precache --save-dev

이 당신의 Gruntfile에 다음을 추가하여 grunt-sw-precache을 활성화 :

• 꿀꿀-SW-미리 캐시는 다음 명령을 사용하여 설치할 수 있습니다

그런 다음 handler: 'cacheFirst' 대신 handler: 'networkFirst'을 사용해 볼 수 있습니다. 이 tutorial에서 언급 한 바와 같이

,

봅니다 네트워크에서 인출하여 요청을 처리합니다. 성공하면 캐시에 응답을 저장하십시오. 그렇지 않으면 캐시에서 요청을 수행하십시오. 기본 읽기 통과 캐싱에 사용하는 전략입니다. 어떻게 캐싱 전략에 대한 자세한 내용은 함께 또한 The offline cookbooksw-precache 및 sw-toolbox 라이브러리를 사용하는 거라고 왜

당신은에 대한 자세한 내용은이 GitHub post를 방문 할 수 있습니다.

Answer 2

슬프게도 grunt-sw-precache은 최신의 sw-precache (runtimeCaching 옵션 및 기타 개선 사항)에 의존하지 않습니다. sw-precache가 requestsRedirects 같은 것이 올바르게 처리되는 방법을 개선했습니다.

나는 repo의 클론을 만들고 필요한 변경 here. 나는 이것을 npm에 게시 할 의사가 없지만 임시 해결 방법으로 사용합니다 (package.json에서 github repo를 참조하십시오!)