问题缓存清除服务工作者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" 
     }] 
    }] 
    } 
}