Question

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

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

Answer 1

首先要做的事情：

服务工作者无法缓存所有请求（截至本答复日期）。它们只能缓存GET请求，因为POST请求本质上意味着更改后端模型的状态。如果您对离线时GET请求以外的缓冲感兴趣（然后在重新连接互联网后重播它们），请尝试reading here。关于允许服务工作者缓存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的{{1}}部分。这就是告诉服务工作者如何表现的原因。在示例中，您可以看到我将其设置为cacheConfig。这意味着工作人员将首先尝试访问互联网并获取新数据。如果失败，它将提供缓存版本（如果有的话）。另一个允许值为freshness，它将首先提供缓存数据（如果有），然后在后台在线同步缓存。

您可以找到有关服务工作者配置in the official docs

的更多信息

Angular 5 Service Workers在数据更新或插入时缓存刷新

1 个答案: