Angular Service Worker迁移5-6脱机不起作用（初始化失败）

Question

I've been using Angular service worker for a production application since starting to use it in Angular 4. With Angular 5, it was working great, however when migrating to Angular 6 once the application is brought offline (using offline in the chrome debugger) a browser refresh returns an HTTP 504 error.

Chrome debugger network trace

When I go to the /ngsw/state virtual folder I see this message that indicates that the service worker failed to load.

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)

I'm using the default version of the ngsw-config.json file and it is placed in the top level folder (the same folder as package.json and 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/**" ] } } ] } 

I'm running in Chrome and in the chrome debugger/application, I can see that the service worker is installed. The following is the ngsw.json that is downloaded by the service worker.

 { "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": "^\\\\/(?:.+\\\\/)?[^/]*__[^/]*\\\\/.*$" } ] } 

How do I go about troubleshooting this migration?

Answer 1

Looking at the error and trying to debug, I could see the error happened during ngsw initialization. To fix the problem I went into the chrome debugger and deleted all the nodes under Cache/Cache Storage (right click delete) and then selected update on reload.

When the service worker reloaded there were no errors on the ngsw/state virtual directory.

Looks like the cached data for angular 5 was creating a problem when read by the service worker in angular 6.