在Angular Service worker中缓存index.html

Question

每当我使用我的角度项目对index.html进行任何更改时，Serviceworker都不会更新，并且始终在index.html上提供旧的缓存版本。我该如何解决（服务器端和浏览器也没有缓存）

这是我的ngsw-config文件

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/manifest.json"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

我对请求的响应标头：

任何想法如何解决这个问题？

谢谢

Answer 1

我认为问题出在 ngsw-config 中。如果 名称中没有.bundle或.chunk，则下面的.css和.js条目versionedFiles可能与dist 文件夹中的.css和.js文件不匹配。在较新版本的 Angular 中，这些条目被替换为and ，并且在为生产构建时，dist文件夹中的文件没有.bundle或.chunk。"/*.js""/*.css"

所以，问题实际上是.js和.css文件没有被缓存，每当服务器上的文件更新时，应用程序不再找到它们并且浏览器在之前抛出错误（因为它返回 index.html） Service Worker 可以加载“缓存”文件，检测更改并更新文件。

在 Angular 6 中，versionedFiles行为files与已弃用相同。所以，你的 ngsw-config.json 应该是这样的：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/manifest.json",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}