服务工作者不会在Chrome中以脱机模式缓存资产

Question

我正在尝试在chrome中以离线模式测试我的pwa应用程序，但是由于某些原因，service worker不会缓存资产。当我在devtools中脱机单击并重新启动应用程序时，出现504（网关超时）错误。但是，当我关闭互联网时，它可以正常工作。参见下面的视频。

https://www.loom.com/share/4ac8ed9316394781b943a1c6dc6cddb7

这是我的manifest.json

{
  "name": "SmartPass",
  "short_name": "SmartPass",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "offline_enabled": true,
  "icons": [
    {
      "src": "./icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "./icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "./icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "./icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "./icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "./icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "./icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

和ngsw.config

{
  "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/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

我希望这段代码可以在chrome中以脱机模式工作，但不能，并且我正在寻找这种行为的原因。