Jay Posts - Answer Overflow

Jay

•Created by Jay on 1/7/2025 in #❓・help

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 😔

5 replies

NNuxt

•Created by Jay on 12/16/2024 in #❓・help

Nuxt 2 setting "Vary: User-Agent" in header

Hello, I'm using Nuxt 2 with SSR. We discovered that the Vary header entry is somewhere being set to user-agent. After looking for a while I found it, it's being set here in the vue-renderer.js

render(renderContext) {
    if (this.isServerMode) {
      renderContext.res.setHeader("Vary", "User-Agent");
    }
    return super.render(renderContext);
  }

render(renderContext) {
    if (this.isServerMode) {
      renderContext.res.setHeader("Vary", "User-Agent");
    }
    return super.render(renderContext);
  }

Can someone explain to me why it's here and if I can have a workaround to not use it? I'm not 100% sure but backend things it's bad for server performance (requesting for every different user agent)

15 replies

NNuxt

•Created by Jay on 10/29/2024 in #❓・help

Nuxt 2 PWA Caching Issue

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 😔

10 replies

Gaming

Programming