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

Question

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

Answer 1

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

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

官方文档：https://developer.chrome.com/docs/workbox/modules/workbox-routing/#defining-a-route-for-non-get-requests

Answer 2

让我澄清 S. Esteves 的回答。

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

如果innerRequest 的url 方案不是“http”和“https”之一，或者innerRequest 的方法不是GET，则返回一个被TypeError 拒绝的promise。

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

因此，直接使用执行缓存响应的 Workbox 策略最终会出错（请参阅此处的示例）。

所以这里的选项是：

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

从这里引用：

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

但是，有时无法使用 GET 发送幂等请求，因为该请求超出了流行的 Internet 软件施加的限制。

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