How can I cache post requests?

[bbhxwl]

How can I cache post requests?

[userquin]

You need to add the same regex (/^\/api\// in the example) to workbox.navigateFallbackDenylist array, and you should add also purge on quota error or play with max/min in the cache, check the workbox-build generateSW docs:

workbox: {
  navigateFallbackDenylist: [/^\/api\//],
  runtimeCaching: [{
    urlPattern: ({
      url, sameOrigin, request: { method }
    }) => sameOrigin && method === 'POST' && url.pathname.match(/^\/api\//),
    handler: 'NetworkFirst',
    cacheName: 'my-post-cache', // <== change the name
    options: {
      cacheableResponse: {
        statuses: [200]
      },
      matchOptions: {
        ignoreVary: true,
        ignoreSearch: true
      },
      plugins: [{
        // handlerDidError: async () => Response.redirect('/error', 302),
        cacheWillUpdate: async ({ response }) => response.status === 200 ? response : null
      }]
    }
  }]
}

[userquin]

if you're using injectManifest strategy, you can add the same logic via workbox modules.

[bbhxwl]

You need to add the same regex (/^\/api\// in the example) to workbox.navigateFallbackDenylist array, and you should add also purge on quota error or play with max/min in the cache, check the workbox-build generateSW docs:

workbox: {
  navigateFallbackDenylist: [/^\/api\//],
  runtimeCaching: [{
    urlPattern: ({
      url, sameOrigin, request: { method }
    }) => sameOrigin && method === 'POST' && url.pathname.match(/^\/api\//),
    handler: 'NetworkFirst',
    cacheName: 'my-post-cache', // <== change the name
    options: {
      cacheableResponse: {
        statuses: [200]
      },
      matchOptions: {
        ignoreVary: true,
        ignoreSearch: true
      },
      plugins: [{
        // handlerDidError: async () => Response.redirect('/error', 302),
        cacheWillUpdate: async ({ response }) => response.status === 200 ? response : null
      }]
    }
  }]
}

Does this apply to nuxt2?

[userquin]

This module only supports nuxt 3 with Vite, I guess you can use the same runtimeCaching configuration in old nuxt 2 pwa module

[bbhxwl]

This module only supports nuxt 3 with Vite, I guess you can use the same runtimeCaching configuration in old nuxt 2 pwa module

May I ask if nuxt2 was also developed by you? I can't find a solution for nuxt2 because my methods are all based on POST requests. However, I have a rule, such as the method of obtaining a list. The requests in the list will have a PageIndex parameter, or the returned data will have a Model or List attribute, which requires caching. Can you teach me how to implement it? If you don't know nuxt2, can you help me implement nuxt3? Can I try Nuxt2 for universal use?

[userquin]

Nuxt 2 pwa module developed by nuxt: https://nuxt.com/modules?version=2.x&q=Pwa

Read the docs, you need to add the configuration via some template IIRC.

[bbhxwl]

Nuxt 2 pwa module developed by nuxt: https://nuxt.com/modules?version=2.x&q=Pwa

Read the docs, you need to add the configuration via some template IIRC.

How to implement it in nuxt3? The documentation for nuxt2 is not detailed, and I am considering upgrading if it is not possible.

[userquin]

IIRC you need to include a template for workbox.