angular - Angular 7 Service Worker 设置 - ngsw-worker.js 注册错误

Question

问题：

目前得到 ERR_INVALID_RESPONSE 和 /ngsw-config.json:-Infinity Parser error: for the ngsw-worker.js file in the network traffic。

见下图：

技术： Angular cli 和 Angular 版本 7。

我做过的事情

我已将这些标签添加到 index.html 头中：

  <link rel="manifest" src="manifest.json">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#2c3e50">

我的清单.json：

{
  "short_name": "test",
  "name": "test.co.uk",
  "start_url": "/",
  "background_color": "#2c3e50",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#2c3e50",
  "icons": []
}

我的 angular.json 文件：

"serviceWorker": true

为了：

“架构师”：{“构建”：{“构建器”：“@angular-devkit/build-angular:browser”，“选项”：{“serviceWorker”：真

我的 Main.ts 文件：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/ngsw-worker.js') ;
    }
  }).catch(err => console.log(err));

我的 ngsw-worker.js 文件：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }],
  "dataGroups": [{
    "name": "api-freshness",
    "urls": [
      "/new"
    ],
    "cacheConfig": {
      "maxSize": 100,
      "maxAge": "1h",
      "timeout": "10s",
      "strategy": "freshness"
    }
  }, {
    "name": "api-performance",
    "urls": [
      "/"
    ],
    "cacheConfig": {
      "maxSize": 100,
      "maxAge": "1d",
      "strategy": "performance"
    }
  }]
}

Answer 1

我在 chrome devtools 中看到您的登台站点正在尝试从文件 ngsw-config.json 而不是 ngsw-worker.js 加载服务工作者。会不会是你把这两个文件弄混了？

service-worker 总是注册一个 js 文件（通常是 ngsw-worker.js），然后 service-worker 从例如 ngsw-config.json 获取配置

因此网络选项卡中的加载顺序应如下所示：

Answer 2

如果您在 IIS 中托管它，那么您应该在 web.config 中为 json 类型添加 MimeType -

例如：

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