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

【问题标题】：Angular progressive web app working on localhost but not on IPAngular 渐进式 Web 应用程序在本地主机上工作，但不在 IP 上
【发布时间】：2019-09-18 06:36:14
【问题描述】：

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

当我在 localhost 中运行时，这是渐进式应用程序审计：

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

我不知道错误在哪里。这个问题是当我使用 localhost 打开浏览器时，在 chrome 控制台的应用程序选项卡中，它显示服务工作者已注册。但是当我使用 ip 打开时，在应用程序选项卡中它不会显示任何已注册的服务人员。

如果我的 service 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)"
        ]
      }
    }
  ]
}

【问题讨论】：

看看这个：developer.mozilla.org/en-US/docs/Web/Manifest 只设置一个 service worker 不会把你的应用变成一个 pwa。还有一些工作要做。
我已经浏览过这个链接，我也添加了清单文件。
为了安全起见，Service Worker 仅在 localhost 或 https 上工作。这就是您发现 12 个不安全请求的原因。
哦，好的，我明白了。这是真正的问题。

标签： javascript node.js angular typescript progressive-web-apps

【解决方案1】：

通过删除 $schema 来更新你的服务工作者，我的配置和你的一样

{
  "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。所以你的 Service Worker 将无法工作。

【讨论】：

不，但我明白了。服务仅在 localhost 或 https 上运行，我正在尝试使用 192.33.33.33:3004 所以它没有注册

【解决方案2】：

我在 Azure 上托管时遇到了同样的问题。但我找到了解决方案here。
只需在 web.config 中添加以下几行：

<?xml version="1.0"?>

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
        </staticContent>
    </system.webServer>
</configuration>

【讨论】：