Миграция углового сервисного работника 5 - 6 в автономном режиме не работает (инициализация не удалась)

Question

Я использую Angular Service Worker для производственного приложения с тех пор, как начал использовать его в Angular 4. С Angular 5 он работал отлично, однако при переходе на Angular 6, когда приложение переводится в автономный режим (используется автономный режим в Chrome отладчик) обновление браузера возвращает ошибку HTTP 504.

Сетевая трассировка Chrome отладчика

Когда я захожу в виртуальную папку / ngsw / state, я вижу это сообщение о том, что работнику сервиса не удалось загрузить.

NGSW Debug Info:

Driver state: SAFE_MODE (Initialization failed due to error: Invariant violated (initialize): latest hash null has no known manifest
Error: Invariant violated (initialize): latest hash null has no known manifest
    at Driver.<anonymous> (https://dev.taramala.com/ngsw-worker.js:2178:27)
    at Generator.next (<anonymous>)
    at fulfilled (https://dev.taramala.com/ngsw-worker.js:1755:62))
Latest manifest hash: none
Last update check: 5m22s143u



=== Idle Task Queue ===
Last update tick: 3s935u
Last update run: 5m22s195u
Task queue:


Debug log:

[5m22s98u] Error(Invariant violated (initialize): latest hash null has no known manifest, Error: Invariant violated (initialize): latest hash null has no known manifest
    at Driver.<anonymous> (https://dev.taramala.com/ngsw-worker.js:2178:27)
    at Generator.next (<anonymous>)
    at fulfilled (https://dev.taramala.com/ngsw-worker.js:1755:62)) Error occurred while updating to manifest dab45631aa11cd887cbdf839dcd3db02962a07ff
[5m16s789u] Ignoring invalid request: 'only-if-cached' can be set only with 'same-origin' mode Driver.fetch(https://dev.taramala.com/signin, cache: only-if-cached, mode: no-cors)

Я использую версию файла ngsw-config.json по умолчанию, и он находится в папке верхнего уровня (в той же папке, что и package.json и angular.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/**"
        ]
      }
    }
  ]
}

Я работаю в Chrome, и в отладчике / приложении chrome я вижу, что сервисный работник установлен. Ниже приводится файл ngsw.json, который загружается работником службы.

{
  "configVersion": 1,
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/index.html",
        "/main.4f99268419718ac793d2.js",
        "/polyfills.ed54f8eb27644c88cbe5.js",
        "/runtime.6afe30102d8fe7337431.js",
        "/styles.b83e8c26da86eb2a2571.css"
      ],
      "patterns": []
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "urls": [
        "/assets/arrow_down.png",
        "/assets/favicon.ico",
        "/assets/fontawesome/LICENSE.txt",
        "/assets/fontawesome/css/all.css",
        "/assets/fontawesome/css/brands.css",
        "/assets/fontawesome/css/fontawesome.css",
        "/assets/fontawesome/css/regular.css",
        "/assets/fontawesome/css/solid.css",
        "/assets/fontawesome/css/svg-with-js.css",
        "/assets/fontawesome/css/v4-shims.css",
        "/assets/fontawesome/css/v4-shims.min.css",
        "/assets/fontawesome/webfonts/fa-brands-400.eot",
        "/assets/fontawesome/webfonts/fa-brands-400.svg",
        "/assets/fontawesome/webfonts/fa-brands-400.ttf",
        "/assets/fontawesome/webfonts/fa-brands-400.woff",
        "/assets/fontawesome/webfonts/fa-brands-400.woff2",
        "/assets/fontawesome/webfonts/fa-regular-400.eot",
        "/assets/fontawesome/webfonts/fa-regular-400.svg",
        "/assets/fontawesome/webfonts/fa-regular-400.ttf",
        "/assets/fontawesome/webfonts/fa-regular-400.woff",
        "/assets/fontawesome/webfonts/fa-regular-400.woff2",
        "/assets/fontawesome/webfonts/fa-solid-900.eot",
        "/assets/fontawesome/webfonts/fa-solid-900.svg",
        "/assets/fontawesome/webfonts/fa-solid-900.ttf",
        "/assets/fontawesome/webfonts/fa-solid-900.woff",
        "/assets/fontawesome/webfonts/fa-solid-900.woff2",
        "/assets/general_black.png"
      ],
      "patterns": []
    }
  ],
  "dataGroups": [],
  "hashTable": {
    "/assets/arrow_down.png": "431a01aa6d7091df7bd99358799bbe713e8f4dc4",
    "/assets/favicon.ico": "27a5190bf388fb8d74ae6094a2a5232ae30f49fc",
    "/assets/fontawesome/LICENSE.txt": "c48a7d100730cfd1b71d3830179dbf40fdd9c3c2",
    "/assets/fontawesome/css/all.css": "20d2d431065fc6b38c1187eda564639527e2428e",
    "/assets/fontawesome/css/brands.css": "9d44e731cf27fa47da463b30d3be5b08d0338f48",
    "/assets/fontawesome/css/fontawesome.css": "2ebea4fead7ce762286640378117220b981203d3",
    "/assets/fontawesome/css/regular.css": "21c6c052dba9db35b37884b3a5067b2713ced80f",
    "/assets/fontawesome/css/solid.css": "64cad1367a592a57f06ccdd0336d7eb5f6923382",
    "/assets/fontawesome/css/svg-with-js.css": "8811e8375c178193aa3de9e8bfbc01ac9f29a9fd",
    "/assets/fontawesome/css/v4-shims.css": "9945879dc31deec4827c45112d6d357066439f0e",
    "/assets/fontawesome/css/v4-shims.min.css": "671972885692574095ebdecb8df944e80386041c",
    "/assets/fontawesome/webfonts/fa-brands-400.eot": "abbe9c0c113df685f86b23f8e1c79b35e087a7f3",
    "/assets/fontawesome/webfonts/fa-brands-400.svg": "2182d81c546fff286f868e977c8fe62a26af3168",
    "/assets/fontawesome/webfonts/fa-brands-400.ttf": "bdc5cc08af77d0e3d7a7c333f734fbff982a095c",
    "/assets/fontawesome/webfonts/fa-brands-400.woff": "41ba889468ecc0350ef2ac98f00af4068902febb",
    "/assets/fontawesome/webfonts/fa-brands-400.woff2": "0a885a5dbd97bd9f4fb1821eb82f2135471faff9",
    "/assets/fontawesome/webfonts/fa-regular-400.eot": "b46728e18106256d291e452e3e39e68536d8f910",
    "/assets/fontawesome/webfonts/fa-regular-400.svg": "27d5417b0df9b0fb4acb0cd00cf9d7bc7da73608",
    "/assets/fontawesome/webfonts/fa-regular-400.ttf": "0a43b6f9d5b4ffa33cfd47fa59e705031cca81b3",
    "/assets/fontawesome/webfonts/fa-regular-400.woff": "3799764c40e3f87674d06b9f1e7a3e2128c6cdb0",
    "/assets/fontawesome/webfonts/fa-regular-400.woff2": "285cf9d32fae400ca979a369d299973307aa3416",
    "/assets/fontawesome/webfonts/fa-solid-900.eot": "8fe955fff0adb55f95b4765406457b2afa0be32b",
    "/assets/fontawesome/webfonts/fa-solid-900.svg": "e3c71cca13a4a7c9b21fb6b8ee78a080c3d7dba0",
    "/assets/fontawesome/webfonts/fa-solid-900.ttf": "a16829d04437bccab092e3aaaa31fa8d5399e067",
    "/assets/fontawesome/webfonts/fa-solid-900.woff": "ecb37a1b10ca2c42fb5e8a24ea071afdf788cd39",
    "/assets/fontawesome/webfonts/fa-solid-900.woff2": "8aba5b59c5aa7f548a1fa663f02f3cdd3757bb52",
    "/assets/general_black.png": "35cc9b390bf6008ffe4c9f100f423cf29c8ebeb6",
    "/index.html": "025bf12f2572cf35571f946aca90c1d94c69b375",
    "/main.4f99268419718ac793d2.js": "fe89ad4e85b7f11fcd3156967c128b95f51a0468",
    "/polyfills.ed54f8eb27644c88cbe5.js": "fa5bafd94903b38ec0fd72d0c1d4a4f1918fce5a",
    "/runtime.6afe30102d8fe7337431.js": "078e320cc6fdaf355836c3b1c52b059cdd33fc7e",
    "/styles.b83e8c26da86eb2a2571.css": "ddfcaa9b1d723e629b2595954b95ca774ee4e55b"
  },
  "navigationUrls": [
    {
      "positive": true,
      "regex": "^\\/.*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
    }
  ]
}

Как мне решить проблему с миграцией?

Answer 1

Глядя на ошибку и пытаясь отладить, я мог видеть, что ошибка произошла во время инициализации ngsw. Чтобы решить эту проблему, я зашел в отладчик chrome и удалил все узлы в Cache / Cache Storage (щелкните правой кнопкой мыши delete), а затем выбрал обновление при перезагрузке.

При перезагрузке работника службы в виртуальном каталоге ngsw / state не было ошибок.

Похоже, что кэшированные данные для angular 5 создавали проблему при чтении работником службы в angular 6.