Angular Service Worker脱机显示错误

Question

我正在为服务人员遵循此angular guide，并逐字记录了至少6次。

我已经按照本教程https://www.youtube.com/watch?v=5YtNQJQu31Y和本https://www.youtube.com/watch?v=othhfZ0mGjU&t=464s进行了学习，看是否可能有任何变化。

一切正常，但是当我离线并刷新时，在下面的图像中出现错误。

我在网上搜索了所有内容，但无法弄清楚为什么会发生这种情况。

如您所见，我的图像和字体可以很好地离线加载，因此可以正常工作，这些项​​目都在我的配置中，但是为什么manifest.webmanifest出现错误？

我正在使用dist上的http服务器进行测试。

为什么会部分起作用？

我已经搜索了 504网关超时（来自serviceworker），角度，但我无法理解。我已经凝视了很久了，所以我可能缺少明显的东西。

感谢您的帮助。

我将其作为我的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",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://fonts.googleapis.com/css?family=Roboto:300,400,500",
          "https://fonts.gstatic.com/**"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Answer 1

当我看教程时，您指出我看不到清单文件。 我会尝试添加：

"/*.webmanifest"

到您接受的文件列表中

另一种解决方案来自this website

您需要在属性angular.json下的assets中添加对文件的引用，还需要添加对清单文件的<link>标记引用