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

2023年9月11日 327次阅读

我正在使用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？

最佳答案 作为一般的最佳实践,我建议您在禁用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"
      }]
    }]
  }
}
点赞