workbox 2.1.0의 프리 캐시와 관련된 문제

Question

서비스 작업자 생성을 위해 workbox 2.1.0을 사용하고 있으며 서버의 assets 디렉토리 (index.html과 clear.png)와 CDN의 한 파일에서 일부 파일을 미리 캐시해야합니다 (예 : https://akamai.com/dummy/path/app.js). 건물을 짓기 위해 꿀꺽 꿀꺽 마시고 있습니다. 코드가

gulp.task('sw',() => { 
     return wbBuild.generateSW({ 
      globDirectory: '.', 
      swDest: 'sw_gulp_generated.js', 
      staticFileGlobs: [ 
       'index.html', 
       'clear.png' 
       ],   
      verbose: true, 
    }) 
     .then(() => { 
     console.log('Service worker generated.'); 
     }) 
     .catch((err) => { 
     console.log('[ERROR] This happened: ' + err); 
     }); 
    }); 

그래서가는 방법이있다이 잘 작동하고, 생성 된 서비스 노동자가 모두 미리 캐시 목록에서 파일이 여기 간다 :

const fileManifest = [ 
    { 
    "url": "index.html", 
    "revision": "b6eb7cd7599ed6584a715cdfc75a81c0" 
    }, 
    { 
    "url": "clear.png", 
    "revision": "e17de36d2c2ddf7b068892fa4678cd31" 
    }, 

]; 
const workboxSW = new self.WorkboxSW(); 
workboxSW.precache(fileManifest); 
//more code follows ... 

내가 테스트하고 완벽하게

작동

이제 질문은입니다. 세 번째 자산 (https://akamai.com/dummy/path/app.js)을 프리 캐시 목록에 추가하려면 어떻게합니까? 나는 staticFileGlobs에 넣어 시도하지만 오류 아웃 말하는 :

One of the glob patterns doesn't match any files 

를 분명히이 globDirectory 내부의 파일 https://akamai.com/dummy/path/app.js을 찾기 위해 시도하고 그것을 찾을 수 있기 때문입니다.

기본적으로 꿀꺽 꿀꺽하면서 (또는 모든 빌드 도구) 사용하면서 생성 된 서비스 작업자의 프리 캐시 목록에 어떻게 CDN URL을 삽입 할 수 있습니까?

Answer 1

generateSW은 사용자 정의 precache 규칙을 허용하지 않습니다. 그래도 runtimeCaching 옵션을 전달할 수 있습니다. 타사 파일이 클라이언트에 의해 요청 된 경우에만 캐시됩니다. 요청에 오류 응답이 발생하면 제 3 자 요청이므로 오류 응답은 캐시되고 not updated이 캐시됩니다.

wbBuild.generateSW({ 
    globDirectory: '.', 
    swDest: 'sw_gulp_generated.js', 
    staticFileGlobs: [ 
    'index.html', 
    'clear.png' 
    ],   
    verbose: true, 
    runtimeCaching: [{ 
    urlPattern: 'https://exapmle.com/file.min.js', 
    handler: 'staleWhileRevalidate', 
    options: { 
     cacheableResponse: { 
     statuses: [0], 
     }, 
    }, 
    }] 
})