vuejs pwa prevent using cache when requesting /api/ routes

Question

i had created a Vuejs project with PWA support but when i am building its production build it always using cached version of api requests i want to prevent it from using cache for api requests or change its policy from being to cacheFirst to NetworkFirst for api i found a i had changed vue.config.js to prevent cacheing but its not working

pwa: {
    workboxOptions: {
        exclude: [/.*\/api\//,],
    },
},

any help on how i can either prevent cache on api routes or set networkFirst policy

Answer 1

exclude option only works for excluding precaching assets, which is what vue generates at build time, not api requests at run time.

It seems the Cache-Control problem of the api server, but if you do not have access to that server, you can config NetworkFirst policy runtimeCaching:

module.exports = {
  pwa: {
    workboxOptions: {
      runtimeCaching: [{
        urlPattern: new RegExp('^https://api.example.com/path'),
        handler: 'NetworkFirst',
      }]
    }
  }
};