Nuxt•4w ago

Nuxt 2 PWA Caching Issue

Hello! I'm using the PWA module on my Nuxt 2 project. I'm running into an issue: I have a list of events which I'm requesting through some internal API url and saving it in the vuex store. When I use my PWA, it is not fetching latest data. The event list stays as it is once you have downloaded the PWA. How do I fix that? My config currently looks like this:

pwa {
workbox: {
    cacheOptions: {
      cacheId: '<npm package name> || nuxt',
      directoryIndex: '/_nuxt/',
      revision: undefined
    },
    cleanupOutdatedCaches: true,
    runtimeCaching: [
      {
        urlPattern: '/^\/API_.*/',
        strategyOptions: {
          cacheName: 'api-cache',
        },
      }
    ]
  },
}

pwa {
workbox: {
    cacheOptions: {
      cacheId: '<npm package name> || nuxt',
      directoryIndex: '/_nuxt/',
      revision: undefined
    },
    cleanupOutdatedCaches: true,
    runtimeCaching: [
      {
        urlPattern: '/^\/API_.*/',
        strategyOptions: {
          cacheName: 'api-cache',
        },
      }
    ]
  },
}

I have been trying to fix this issue for months now and I can't find a solution, I would really appreciate any hint 😔

4 Replies

kapa.ai•4w ago

Hi @Jay. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not contain specific information about the PWA module in Nuxt 2 or how to handle caching issues with it. However, I can provide some general advice based on the information available. In Nuxt 3, the useFetch and useAsyncData functions are used to fetch data, and they use keys to prevent refetching the same data. If you're using similar functions in Nuxt 2, you might want to ensure that you're providing unique keys to prevent caching of data (source (https://nuxt.com/docs/getting-started/data-fetching#keys)). Also, in Nuxt 3, there's a utility function called refreshNuxtData that can be used to refetch all data from the server and update the page, as well as invalidate the cache of useAsyncData and useFetch. If there's a similar function in Nuxt 2, you might want to use it to ensure that your data is always fresh (source (https://nuxt.com/docs/api/utils/refresh-nuxt-data)). Please refer to the Nuxt 2 documentation or community for more specific advice on handling caching issues with the PWA module in Nuxt 2. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@103820307080437760> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

wommy•3w ago

oh dude im glad i found this, i spent all day yesterday debugging workbox i dont have an answer but im trying to do something similar have you looked into the stale while revalidate strategy?

JayOP•2d ago

I think I tried that but no luck. Any PWA experts? bump

Gaming

Programming

Nuxt 2 PWA Caching Issue