캐시 캐스팅 서비스 담당자 index.html 파일

Question

저는 firebase에 호스팅 된 Angular (현재 v.4) 앱의 serviceworker를 생성하기 위해 Google의 SW Precache을 사용하고 있습니다. Angular cli를 사용하여 분산 파일을 생성합니다.

이

ng build --prod --aot #build angular app 
sw-precache --config=sw-precache-config.js --verbose # generate precache 
firebase deploy # Send to firebase 

내 sw-precache-config.js 파일은 다음과 같습니다 :

module.exports = { 
    staticFileGlobs: [ 
    'dist/**.css', 
    'dist/**/**.png', 
    'dist/**/**.svg', 
    'dist/**.js' 
    ], 
    stripPrefix: 'dist', 
    root: 'dist/', 
    navigateFallback: '/index.html', 
    runtimeCaching: [ 
    { 
     urlPattern: /index\.html/, 
     handler: 'networkFirst' 
    }, 
    { 
     urlPattern: /\.js/, 
     handler: 'cacheFirst' 
    }, { 
     urlPattern: /fonts\.googleapis\.com/, 
     handler: 'fastest' 
    }, 
    { 
     default: 'networkFirst' 
    } 
    ] 
}; 

내가 변경하고 새 버전을 배포하는 경우, 나는 캐시를 얻을 내 응용 프로그램을 배포하는 데 시간이 올 때, 나는 다음과 같은 명령을 사용하여 index.html 파일을 새로 고치거나 닫아도됩니다. URL 끝에 ?cachebust=1 같은 것을 추가하면 업데이트 된 index.html 파일을 얻을 수 있습니다. 최신 index.html을로드 할 수없는 프로세스 또는 구성에서 내가 잘못하고있는 것이 있습니까?

Answer 1

일반적으로 HTTP 캐시가 비활성화 된 상태에서 생성 된 서비스 작업자의 변경 사항이 예상대로 선택되도록하기 위해 service-worker.js 파일을 명시 적으로 제공하는 것이 좋습니다. 만료되도록 복사하십시오.

나중에 Chrome과 Firefox의 기본 동작은 HTTP 캐시를 존중하는 대신 네트워크에서 직접 서비스 작업자를 가져 오는 것이지만 그 동안에는 read more about the current behavior이 될 수 있습니다.

은 내가 도울 수있는 중포 기지 구축을위한 sample configuration이 있습니다 트릭을 할 것 같았다

{ 
    "hosting": { 
    "public": "build", 
    "headers": [{ 
     "source" : "/service-worker.js", 
     "headers" : [{ 
     "key" : "Cache-Control", 
     "value" : "no-cache" 
     }] 
    }] 
    } 
}