javascript - Angular PWA 服务工作者没有离线缓存请求

Question

我正在构建一个带有 node.js 后端的 Angular PWA。我已经添加了@angular/pwa，并且资产离线可用。

我配置了两条路线：

• /api/验证
• /api/分数

不幸的是，我的请求没有离线存储。

ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/api/**"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 200,
        "maxAge": "5d"
      }
    },
    {
      "name": "api-freshness",
      "urls": [
        "/api/verify",
        "/api/score"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "3d",
        "timeout": "3s"
      }
    }
  ]
}

一旦我离线，我就没有收到服务人员的回复。浏览器的缓存存储中有名为api-freshness和api-performance的存储。但它们是空的。

网络

标签： javascriptangularprogressive-web-appsservice-worker