Angular Service Worker，缓存离线应用的 api 调用 [英] Angular Service Worker, caching api calls for offline app

问题描述

我正在尝试使 Service Worker 以角度处理 API 请求.我希望应用离线工作，并且我有以下配置:

I'm trying to make the service worker in angular work with API requests. I'd like the app to work offline and I've the below config:

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

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

Here is what the xhr tab looks like when I'm offline:

这是用户请求的内容:

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

As you can see the API calls for user don't resolve.

这是user在线时的响应:

推荐答案

试试这个:

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

• 从此更改您的 DataGroups 数组:

• Go to your application tab -> Clear Storage -> Clear Site Data.

• Change your DataGroups array from this:

{
    "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 中保存并构建您的应用程序，
• 第一次访问该页面.
• 禁用网络
• 刷新页面
• save and build your app in PROD,
• visit the page the first time.
• disable network
• refresh your page

这篇关于Angular Service Worker，缓存离线应用的 api 调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！