Question

是否可以使用工作箱缓存POST请求的响应？我的应用程序使用POST请求而不是GET来获取列表数据，因为用户凭据随请求一起发送。

Answer 1

让我澄清一下S. Esteves的答案。

浏览器缓存存储不具有将POST请求作为键持久化的功能（请参见规范here）。

如果innerRequest的url方案不是“ http”和“ https”之一，或者 innerRequest的方法不是GET，返回以 TypeError。

通过

Workbox，您可以通过将'POST'作为第三个参数传递给registerRoute函数来拦截 POST请求（就像服务工作者在获取事件时使用GET请求一样），然后可以将一些自定义逻辑放入处理程序中（但即使是手动操作，您仍然无法将响应保存到缓存存储中，因为它不受支持。

因此直接使用做缓存响应的Workbox策略将最终出错（请参见示例here）。

所以这里的选项是：

（首选），如果您与后端维护人员联系，请他们将所需的端点从POST更改为GET。（如果可能）和如果POST请求实际上是幂等的（因此将其缓存是有意义的）。现代浏览器支持的大小从100Kb到200Kb，因此在许多情况下，此选项是可行的。如果POST不是幂等选项，则不缓存它。

引用here：

HTTP缓存仅适用于幂等请求，这使得很有道理只有幂等和无效的请求产生相同的结果多次运行时的结果。在HTTP世界中，这个事实意味着可以缓存GET请求，但不能缓存POST请求

但是，在某些情况下无法发送幂等请求使用GET的原因仅仅是因为该请求超出了流行的Internet软件。

或者，您也可以使用Workbox尝试以下操作（贷记jeffposnick）：
1. 在工作区路由处理程序中获取POST请求
2. 将其手动转换为GET请求（允许作为缓存存储键）
3. 使用此GET请求作为密钥将缓存的响应保存在缓存存储中
4. 在同一处理程序中签入请求是否已保存并使用缓存的响应进行响应
5. 我还认为可以使用请求摘要作为键将响应保存在IndexedDB中。

workbox.routing.registerRoute(
  /api/, // Change to match your endpoint URL.
  async ({event, url}) => {
    // See https://developers.google.com/web/tools/workbox/guides/route-requests#handling_a_route_with_a_custom_callback
    // Do something here. What it is up to you.
    // Eventually, return a Response object, or else your request will fail.
    return response;
  },
  'POST' // Opt-in to matching POST requests. Only GET is matched by default.
);

Answer 2

您可以使用以下语法缓存POST请求：

workbox.routing.registerRoute(
    <url>,
    <workbox strategy>,
   'POST'
);

官方文档：https://developers.google.com/web/tools/workbox/modules/workbox-routing#defining_a_route_for_non-get_requests

如何使用工作箱缓存POST请求的响应

2 个答案: