Question

我正在使用NUXT-PWA来缓存我的数据，但是我有一个页面依赖于要构建的POST请求，并且我需要缓存响应JSON，但是我得到以下错误：

Uncaught (in promise) attempt-to-cache-non-get-request: Unable to cache '/api/hotel/order/get-voucher' because it is a 'POST' request and only 'GET' requests can be cached.

我在workbox-range-request.js中使用的代码是这样的：

workbox.routing.registerRoute(
  new RegExp('/api/(.*)'),
  new workbox.strategies.CacheFirst({
    cacheName: 'apiCache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 100,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 Days
      }),
    ],
  }),
  'POST'
);

和我的nuxt.config.js：

  workbox: {
    dev:true,
    cachingExtensions: '@/plugins/workbox-range-request.js',
    runtimeCaching: [
      {
        urlPattern: 'https://www.google-analytics.com/.*',
        handler: 'StaleWhileRevalidate',
        method: 'GET',
        strategyOptions: { cacheableResponse: { statuses: [0, 200] } }
      }
    ]
  },

文档中说它支持POST，但是在控制台中我收到了错误，在我的cacheStore中我没有数据。

Answer 1

在保存条目时，缓存存储API阻止您将POST请求用作键。这部分是由于POST请求是“传统上”实际上已发送到服务器以更改远程状态的请求，并且在该模型中，它是通过本地缓存的响应来实现的，而从未到达服务器没有道理。

但是...假设您发送了POST请求后，确实在响应主体中获取了有意义的数据，并且您想使用{{1}使用Cache Storage API保存该响应主体}请求使用可能不同的URL作为缓存键。

您可以通过cacheKeyWillBeUsed custom plugin使用Workbox来做到这一点：

GET

除非您特别确定要出于充分的理由将const savePostResponsePlugin = { cacheKeyWillBeUsed: async ({request, mode}) => { if (mode === 'write') { // Use the same URL as `POST` request as the cache key. // Alternatively, use a different URL. return request.url; } }, }; workbox.routing.registerRoute( new RegExp('/api/(.*)'), new workbox.strategies.CacheFirst({ cacheName: 'apiCache', plugins: [ // Add the custom plugin to your strategy. savePostResponsePlugin, new workbox.expiration.Plugin({...}), ], }), 'POST' );响应主体保存在缓存中，否则我不建议您这样做。

如果您只是想在由于脱机而导致首次尝试失败时重新发送POST请求的方法，建议您改用workbox-background-sync。

NUXT-PWA缓存POST请求

1 个答案: