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

【问题标题】：how to cache response of a POST request using workbox如何使用工作箱缓存 POST 请求的响应
【发布时间】：2019-03-17 22:19:15
【问题描述】：

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

【问题讨论】：

标签： workbox

【解决方案1】：

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

浏览器缓存存储无法将 POST 请求作为键持久保存（请参阅规范 here）。

如果 innerRequest 的 url 的 scheme 不是 "http" 和 "https" 之一，或者 innerRequest 的方法不是 GET，返回一个 promise 被拒绝类型错误。

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

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

所以这里的选项是：

（最好）如果您与后端维护人员保持联系，请他们将所需的端点从 POST 更改为 GET如果可能并且如果 POST 请求有效幂等（所以缓存它是有意义的）。现代浏览器支持从 100Kb 到 200Kb 的大小，所以在很多情况下这个选项是可能的。如果 POST 不是幂等选项，则不缓存它。

引用here:

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

但是，可能存在无法发送幂等请求的情况使用 GET 仅仅是因为该请求超出了流行的互联网软件。

或者，您可以使用 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.
);

【讨论】：

好答案。问题：如果请求已保存，则签入相同的处理程序；怎么办？

【解决方案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

【讨论】：