angular - 服务人员的firebase托管子域错误

Question

Framework: Ionic, Angular
Stages: Test, Production
Hosting: Firebase

今天，我从该应用程序中制作了一个 PWA，并将其部署到 envs 测试和生产环境中。虽然生产工作正常，但测试让我头疼。每个 env 都有三个子域：

生产（一切正常）

• https://production.web.app/ - 检测服务工作者
• https://production.firebaseapp.com/ - 检测服务工作者
• https://app.domain.ch/ - 检测服务工作者

测试

• https://test.web.app/ -有时检测到服务工作者 - ngsw 存在于源中
• https://test.firebaseapp.com/ -检测到 NOT 服务工作者 - ngsw 不存在于源中
• https://test.domain.ch/ -检测到 NOT 服务工作者 - ngsw 不存在于源中

当它没有检测到服务人员时，错误是：

未检测到匹配的服务人员。您可能需要重新加载页面，或检查当前页面的服务工作者范围是否包含清单中的范围和启动 URL。

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

firebase.json

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      }
    ]
  }
}

角.json

    "test": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        }
      ],
      "serviceWorker": true,
      "ngswConfigPath": "ngsw-config.json"
    },
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        }
      ],
      "serviceWorker": true,
      "ngswConfigPath": "ngsw-config.json"
    },

知道我缺少什么吗？

标签： angularfirebaseprogressive-web-appsservice-worker

Answer 1

在测试配置中没有定义文件替换。因为没有什么可以替代的，所以我认为它也是正确的。无论如何，通过添加它工作的 fileReplacements ：

"fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.ts"
    }
],