問題緩存破壞serviceworker index.html文件

Question

我正在使用Google的SW Precache為firebase上托管的Angular（目前是第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文件。 如果我在url的末尾添加類似?cachebust=1東西，我可以獲得更新的index.html文件。 在我的進程或配置中是否存在我做錯的事情，不允許加載最新的index.html？

Answer 1

作為一般的最佳實踐，我建議您在禁用HTTP緩存的情況下顯式提供service-worker.js文件，以確保按預期選擇對生成的服務工作者所做的更改，而不必等待HTTP緩存復制到期。

在將來的某個時刻，Chrome和Firefox的默認行為是始終直接從網絡獲取服務工作者而不是尊重HTTP緩存，但與此同時，您可以閱讀有關當前行為的更多信息 。

我有一個Firebase部署的示例配置可能會有所幫助：

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