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

问题描述

我正在尝试使用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.

这就是响应用户在线时看起来像：

This is what the response of user looks like when online:

推荐答案

试试这个：

• 转到你的申请表选项卡 - >清除存储 - >清除站点数据。



• 从此更改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屋！