N
Nuxtβ€’5w ago
Jay

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: {
      config: {
        debug: false,
      },
      // skipWaiting: false,
      // clientsClaim: true,
      /* cacheOptions: {
        cacheId: '<npm package name> || nuxt',
        directoryIndex: '/_nuxt/',
        revision: undefined
      }, */
      cleanupOutdatedCaches: true,
      runtimeCaching: [
        {
          /* eslint-disable */
          urlPattern: '/api/.*',
          handler: async ({request, event}) => {
            event.waitUntil(caches.delete('api-cache'));
            return fetch(request);
          },
          method: 'GET',
          strategyOptions: {
            cacheName: 'api-cache',
            cacheExpiration: {
              maxEntries: 50,
              maxAgeSeconds: 300,
            },
          },
          strategyPlugins: [
            {
              use: 'Expiration',
              config: {
                maxEntries: 10,
                maxAgeSeconds: 300,
              },
            },
          ],
        }
      ]
    },
}
pwa {
   workbox: {
      config: {
        debug: false,
      },
      // skipWaiting: false,
      // clientsClaim: true,
      /* cacheOptions: {
        cacheId: '<npm package name> || nuxt',
        directoryIndex: '/_nuxt/',
        revision: undefined
      }, */
      cleanupOutdatedCaches: true,
      runtimeCaching: [
        {
          /* eslint-disable */
          urlPattern: '/api/.*',
          handler: async ({request, event}) => {
            event.waitUntil(caches.delete('api-cache'));
            return fetch(request);
          },
          method: 'GET',
          strategyOptions: {
            cacheName: 'api-cache',
            cacheExpiration: {
              maxEntries: 50,
              maxAgeSeconds: 300,
            },
          },
          strategyPlugins: [
            {
              use: 'Expiration',
              config: {
                maxEntries: 10,
                maxAgeSeconds: 300,
              },
            },
          ],
        }
      ]
    },
}
I have been trying to fix this issue for months now and I can't find a solution, I would really appreciate any hint πŸ˜”
2 Replies
kapa.ai
kapa.aiβ€’5w 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: ---------------------- Based on the knowledge sources provided, I don't have specific information about Nuxt 2 PWA caching issues or the exact configuration you're using. However, I can provide some general insights and suggestions based on related information about caching in Nuxt: 1. Cache invalidation: The issue you're experiencing seems to be related to cache invalidation. Your PWA is likely caching the event list data and not updating it when new data is available. 2. Fetch latest manifest: A recent fix in Nuxt 3.8.1 addressed a similar issue where the browser was returning old data. The fix involves skipping browser cache when fetching the latest manifest. While this is for a newer version of Nuxt, it suggests that cache-related issues are common and actively being addressed. GitHub PR 3. useFetch key option: In Nuxt 3, there's a suggestion to add a key value inside useFetch's options object with a unique value (e.g., based on Date.now()). This forces useFetch to re-fetch data instead of using cached data. You might be able to adapt this concept to your Nuxt 2 setup. Stack Overflow 4. Runtime caching strategy: Your current configuration includes a runtime caching strategy for API requests. You might want to adjust the maxAgeSeconds value to a lower number or implement a network-first strategy to ensure fresher data. 5. Disable caching in development: If you're testing in development mode, consider disabling PWA caching entirely to ensure you're always getting fresh data. Given that your issue persists despite these configurations, it might be worth exploring alternative caching strategies or consulting the specific documentation for the PWA module you're using in Nuxt 2. Remember that PWA behavior can sometimes be tricky to debug due to browser caching. Always try testing in an incognito/private browsing window or clearing your browser cache completely when testing PWA changes. If these suggestions don't resolve your issue, you might want to consider opening an issue in the Nuxt 2 PWA module repository or seeking help in the Nuxt community forums with a minimal reproduction of your problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.aiβ€’5w ago
<@103820307080437760> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?