Angular Service Worker不处理导航URL（脱机模式）

我有下面的Angular Service Worker配置文件，对于api请求和静态内容，它似乎工作得很好，但是对于导航URL，它没有命中缓存。例如，如果我打开

www.mydomain.com

或

www.mydomain.com/section

或

www.mydomain.com/account/section

，请求将转到服务器，而不是在本地解析，因此应用程序的脱机版本无法工作

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/index.html",
          "/manifest.json",
          "/favicon.ico",
          "/*.css",
          "/runtime-es2015*.js",
          "/polyfills-es2015*.js",
          "/main-es2015*.js",
          "/common-es2015*.js",
          "/content/images/header-pattern.png",
          "/content/fonts/roboto-v20-latin-regular.woff2",
          "/content/fonts/raleway-v14-latin-regular.woff2",
          "/content/fonts/material-icons.woff2",
          "/content/images/logo-round-toolbar.png",
          "/content/images/facebook.png",
          "/content/images/linkedin.png",
          "/content/images/twitter.png"
        ]
      }
    },
    {
      "name": "app-lazy-assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/*.js",
          "/content/**"
        ],
        "urls": [
          "https://cdnjs.cloudflare.com/**",
          "https://fonts.googleapis.com/**",
          "https://fonts.gstatic.com/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "my-api-30days",
      "urls": [
        "/api/url/part/*",
        "/api/url/*",
        "/api/url/segment/*"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 300,
        "maxAge": "30d"
      }
    },
    {
      "name": "my-api-5days",
      "urls": [
        "/api/account/5dayscacheurl"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 300,
        "maxAge": "5d"
      }
    }
  ],
  "navigationUrls": [
    "/**",
    "!/**/*.*",
    "!/**/*__*",
    "!/**/*__*/**",
    "!/bypass/service/worker",
    "!/account/bypass-service-worker**",
    "!/bypass-service-worker**"
  ]
}

如果我遗漏了什么，谁能给我指点一下吗

---

我也经历过，但答案似乎不适用于Angular的最新版本。

我的问题是由于index.html和service worker文件的哈希不匹配。如本文所述，我通过以下方式解决了问题：

运行生产构建

Minify index.html文件

html minifier-o
dist/index.html dist/index.html--删除注释--折叠空白--缩小js--缩小css

精简服务人员

terser dist/combined-sw.js-o dist/combined-sw.js-c--注释
/^##/

。（由于某种原因，

——注释false

不起作用，所以我添加了 此

--comments/^##/

用于删除所有注释）

再次生成服务工作者配置文件

ngsw config dist ngsw config.json

---

这是在生产中测试的吗？别忘了整个caching/pwa/serviceworker只在生产环境中工作，并且正在被服务（没有本地主机）是的，我已经在生产环境中对它进行了测试。你看过Google Workbox了吗？他们制作了一个很好的Service Worker包，使配置非常简单。问题是index.html和Service Worker文件的哈希不匹配