Angular PWA 返回 504 即使认为它可以正常离线工作

Question

我有一个带有 @angular/pwa 的 Angular 应用程序

这里是

ngsw-config.json

{
  "$schema": "../../node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "navigationRequestStrategy": "freshness",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api",
      "urls": ["/api"],
      "cacheConfig": {
        "maxSize": 1000,
        "maxAge": "30d"
      }
    }
  ]
}

如果我失去连接并返回到我正在使用的页面，一切都很好并且可以工作

但问题是，当我刷新时，我得到 504，我不明白为什么，因为如果我不刷新，页面可以正常离线工作，这种情况发生在需要 api 调用的页面和静态页面上，我在项目和这些静态页面是预渲染的

Answer 1

经过几个月的测试，我终于找到了解决方案，而且很简单

我在

"/index.csr.html"

 下的 ngsw-config.json 文件中缺少 

/assetGroups/resources/files

不知道为什么对我来说它是在没有它的情况下设置的，也许是因为它是用 nx 而不是 Angular cli 完成的