Настройка Angular 7 Service Worker - ошибка регистрации ngsw-worker.js

Question

Проблема:

В настоящее время получить ERR_INVALID_RESPONSE и /ngsw-config.json:-Infinity Ошибка синтаксического анализатора: для файла ngsw-worker.js в сетевом трафике.

См. Изображение ниже:

Технология: Угловая версия 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">

My Manifest.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

Для:

"архитектор": { "построить": { "builder": "@ angular-devkit / build-angular: browser", "options": {"serviceWorker": true

Файл My 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

Если вы размещаете его в IIS, вам следует добавить MimeType для типа json в web.config -

Например:

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

Answer 2

Я видел в chrome devtools, что ваш промежуточный сайт пытается загрузить работника сервиса из файла ngsw-config.json вместо ngsw-worker.js.Может быть, вы перепутали эти два файла?

Сервисный работник всегда регистрируется в js-файле (обычно ngsw-worker.js) и затем сервисный работник выбирает конфигурацию, например, из ngsw-config.json

Таким образом, порядок загрузки на вкладке сети должен выглядеть следующим образом: