javascript - Angular 渐进式 Web 应用程序在本地主机上工作但不在 IP 上

Question

我开发了 Angular 渐进式应用程序，它在 localhost:3004 上运行时运行良好，就像我在浏览器中打开然后关闭服务器一样，它可以很好地处理缓存数据。
但是当我在 ip 上运行它时，即 192.168.33.123:3004 它打开，当我关闭服务器时它不起作用。
我还遵循了此链接上的完整指南:ServiceWorker

这是我在本地主机中运行时的渐进式应用审计:


这是在 ip 192.168.33.123:3004 上运行时的审计。

]

我无法弄清楚错误在哪里。
这个问题是当我使用本地主机打开浏览器时，在 chrome 控制台的应用程序选项卡中，它显示服务 worker 已注册。但是当我使用 ip 打开时，在应用程序选项卡中它没有显示任何已注册的服务 worker 。

在这里，如果我的服务 worker 文件

{
  "$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"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Answer 1

通过删除 $schema 像这样更新您的服务 worker ，我的配置与您的相同

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

您遇到了问题，因为当您构建到生产模式时，您的代码正在查找此文件 ./node_modules/@angular/service-worker/config/schema.json。所以你的服务 worker 将无法工作。