问题缓存破坏 serviceworker index.html 文件

Question

我正在使用 Google 的 SW Precache 为托管在 firebase 上的 Angular（当前为 v.4）应用程序生成 serviceworker。我正在使用 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 缓存，但与此同时，您可以 read more about the current behavior.

我有一个 sample configuration 可能对 Firebase 部署有帮助：

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

问题缓存破坏 serviceworker index.html 文件

Problems cache busting serviceworker index.html file

angular

angular-cli

sw-precache

sw-toolbox