javascript - Angular Service Worker，缓存离线应用程序的api调用

Question

我正在尝试让服务 worker 以 Angular 方式处理 API 请求。 我希望该应用程序可以离线工作，并且我有以下配置:

    {
        "name": "api",
        "urls": ["https://x.com/**"],
        "cacheConfig": {
            "strategy": "performance",
            "maxSize": 20,
            "maxAge": "365d",
            "timeout": "5s"
        }
    }

这是我离线时 xhr 选项卡的样子:

这是用户请求的内容:

如您所见，用户的 API 调用未解析。

这是 user 在线时的响应:

Answer 1

试试这个:

• 转到您的应用程序选项卡 -> 清除存储 -> 清除站点数据。

• 从此更改您的 DataGroups 数组:

  {
      "name": "api",
      "urls": ["https://x.com/**"],
      "cacheConfig": {
          "strategy": "performance",
          "maxSize": 20,
          "maxAge": "365d",
          "timeout": "5s"
      }
  }
  

为此:

"dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/user" //<=========== I know you want all API calls to be cached, but try this first and see
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]

• 在 PROD 中保存并构建您的应用，
• 第一次访问该页面。
• 禁用网络
• 刷新页面