Angular Service worker 离线显示错误

Question

我正在为服务人员关注这个 angular guide 并且逐字记录，至少 6 次。

我已经按照本教程进行操作 https://www.youtube.com/watch?v=5YtNQJQu31Y as well as this https://www.youtube.com/watch?v=othhfZ0mGjU&t=464s 看看是否有任何变化。

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

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

如您所见，我可以很好地离线加载图像和字体，所以它正在发挥作用，这些项目在我的配置中，但为什么会出现 manifest.webmanifest 的错误？

我正在 dist 上使用 http-server 进行测试。

为什么它会部分起作用？

我用谷歌搜索了 504 网关超时（来自 serviceworker）angular 但我无法理解它。我可能遗漏了一些明显的东西，因为我已经盯着它看了很久了。

感谢任何帮助。

我把这个作为我的 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> 标签

Angular Service worker 离线显示错误

Angular Service worker Offline showing errors

angular

angular-service-worker