angular-cli - Angular 5 Service Workers 缓存刷新数据更新或插入

标签 angular-cli angular5 angular-service-worker

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

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

最佳答案

第一件事:

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

你可以找到更多关于 Service Worker 配置的信息 in the official docs

关于angular-cli - Angular 5 Service Workers 缓存刷新数据更新或插入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48710965/

相关文章:

angular - 如何在 Angular 2 中有条件地加载模块

angular - 开发和生产的不同浏览器列表?

angular5 - Angular 模板呈现非编码 URL

javascript - 在 Angular 5 中的导出模态之间导航?

Angular 5 - 自定义管道 'could not be found' 错误

angular - 在 angular-cli 应用程序中使用 jsonwebtoken 时出错

node.js - 无法使用 npm 安装 @angular/cli

angular - 添加 2 个主屏幕在 Firefox 中不起作用 - Angular

angular - 使用 Service Worker 预取 API 调用

Angular 6 Service worker 拒绝缓存 Assets ,因为未正确获取 ngsw.json