Angular 当更改为脱机并按刷新（F5）时，角度PWA不工作

我正在使用angular制作PWA应用程序

• 角度的：12

目前的情况是：

• 我转到我的应用程序（联机模式）->web应用程序可以正常显示
• 打开开发人员控制台并将连接更改为脱机
• 按F5重新加载应用程序

发生了什么：

• 下图是我点击“重新加载”时屏幕上显示的内容：

这是我的ngsw config.json

{
  "$schema": "../../node_modules/@angular/service-worker/config/schema.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/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

• manifest.json

---

在花了数小时寻找解决方案之后 我注意到当我使用

ngbuild--configurationproduction

构建我的应用程序时。在我的

dist

文件夹中有一个

ngsw.json

文件

但是，生成的

ngsw.json

文件中的

URL

和

模式都是空的，如下所示：

"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [],
        "patterns": []
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [],
        "patterns": []
    }
]

当我在
assetGroups
中添加要缓存的URL并重试时，应用程序运行顺利。（请参阅以下内容）

我已经向Angular团队报告了这一点，并已确认为

总之，现在，我必须通过复制
ngsw.json
文件和
assetGroups
中的缓存URL来解决问题，在构建应用程序后，我将
ngsw.json
复制到
dist
文件夹中。
在哪里测试这个？使用哪个命令呢？我使用
ngbuild--configurationproduction
构建了我的应用程序，并部署到本地IIS服务器。我想您需要
ngbuild--prod
。若你们的项目有api调用，那个么你们也需要缓存api。并且在index.html中也设置了基本路径。我已经用产品配置文件构建了我的项目。我按照官方的angular doc说的做了，但在项目中按F5HTTP服务器调用时不起作用。如果是，则将其也缓存在数据组中。在运行项目之后，给一些时间来缓存pwa。index.html内的任何第三方脚本调用都可能需要缓存。
"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [],
        "patterns": []
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [],
        "patterns": []
    }
]

"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [
            "/login",
            "/dashboard"
        ],
        "patterns": [
            "/*.css",
            "/*.js"
        ]
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [
            "/favicon.ico",
            "/index.html",
            "/manifest.webmanifest",
            "/ngsw.json"
        ],
        "patterns": []
    }
]