Блог

Проблема:

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

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

Технология: 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">
  

Мой 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: браузер», «параметры»: { «ServiceWorker»: true

Мой основной файл.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"
    }
  }]
}
  

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

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

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

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

Например:

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