問題緩存清除服務工作者index.html文件

Question

我使用Google的SW Precache爲在Firebase上託管的Angular（當前爲v.4）應用程序生成服務工作者。我正在使用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文件，即使我刷新或關閉瀏覽器。如果我在網址的末尾添加了類似?cachebust=1的內容，我可以獲取更新後的index.html文件。有沒有我在我的過程或配置錯誤，不允許加載最新的index.html？

Answer 1

作爲一般性的最佳實踐，我建議您明確地爲禁用HTTP緩存的service-worker.js文件提供服務，以確保按預期方式對生成的服務工作人員所做的更改進行提取，而無需等待HTTP緩存複製到期。

在未來的某個時間點，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" 
     }] 
    }] 
    } 
}