Angular 漸進式 Web 應用程序在本地主機上工作但不在 IP 上

Question

我開發了 Angular 漸進式應用程序，它在 localhost:3004 上運行時運行良好，就像我在瀏覽器中打開然后關閉服務器一樣，它可以很好地處理緩存數據。 但是當我在 ip 上運行它時，即 192.168.33.123:3004 它打開，當我關閉服務器時它不起作用。 我還遵循了此鏈接的完整指南： ServiceWorker

這是我在本地主機中運行時的漸進式應用審計：

這是在 ip 192.168.33.123:3004 上運行時的審計。 ]

我無法弄清楚錯誤在哪里。 這個問題是當我使用本地主機打開瀏覽器時，在 chrome 控制台的應用程序選項卡中，它顯示服務工作者已注冊。 但是當我使用 ip 打開時，在應用程序選項卡中它沒有顯示任何已注冊的服務工作者。

在這里，如果我的服務工作者文件

{
  "$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 像這樣更新您的服務工作者，我的配置與您的相同

{
  "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。 所以你的服務工作者將無法工作。

Answer 2

我有同樣的問題，在 Azure 上托管。 但我在這里找到了解決方案。
只需將這些行添加到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>