6

我一直在阅读有关 Angular 5 和 Angular CLI 的新 Service Workers 支持的信息，我发现它很吸引人。我对缓存 API 端点特别感兴趣。在我读过的所有教程中，它们似乎都专注于缓存一次端点调用，然后从缓存存储中处理未来的请求。如果我的 Web 应用程序频繁更新或插入数据怎么办？我的所有请求仍将继续从缓存中提供服务，这将导致获取旧数据，而不是我刚刚更新或插入的新数据，只有在我对 API 端点进行新调用时才会检索这些数据。我们如何才能保持同步？

为了让我的问题更清楚；简而言之，我要问的是如何根据需要刷新缓存。我知道，如果我选择“新鲜”策略，它将始终从网络获取，除非在网络故障或超时时，在这种情况下它默认为缓存。如果我选择“性能”策略，它将始终从缓存中提供服务，并且不适合经常变化的事物。我正在寻找的是两者兼而有之。我希望它始终从缓存中提供服务，除非我明确告诉它不要这样做。例如，当我创建新客户时，我想刷新缓存，然后它继续从缓存中提供服务，直到我告诉它刷新。

4

1 回答 1

2

第一件事：

服务人员无法缓存所有请求（截至本答案日期）。它们只能缓存 GET 请求，因为 POST 请求本质上是为了改变后端模型的状态。如果您有兴趣在离线时缓冲 GET 请求以外的请求（然后在重新连接互联网后重放它们），请尝试阅读此处。不过，关于允许服务人员缓存 POST 请求的讨论仍在进行中。

话虽如此，如果您的应用程序仅使用 GET 来填充浏览器中的应用程序状态，那么它可以在离线状态下正常工作（一旦用户至少访问所有 GET 一次，因此它们将被缓存）。

默认情况下不启用此缓存机制。您必须修改您ngsw-config.json的设置。对于API请求缓存，这dataGroups是放置配置的正确位置。

"dataGroups": [
    {
      "name": "api",
      "urls": [
        "https://api.yourdomain.com/**"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "1d",
        "version": 1
      }
    }
  ]

注意 的strategy部分cacheConfig。这就是告诉服务人员如何表现的内容。在示例中，您可以看到我将其设置为freshness. 这意味着工作人员将首先尝试访问互联网并获取新数据。如果失败，它将提供缓存版本（如果有的话）。另一个允许的值是performance首先提供缓存数据（如果有），然后在后台在线同步缓存。

您可以在官方文档中找到更多关于 service worker 配置的信息

于 2018-03-12T11:08:50.367 回答