I am building a Vue PWA app using capacitor to also allow it to run as an iOS app.

I have had to add in some cache for the SW so there is some displayed stuff whilst offline, however it is I believe caching my themes.

I am using DaisyUI a tailwind plugin to render different themes based on a page, click on this card it should render theme 1, click this card render theme 2 etc.

It's purely for colour changes, however it only shows the first theme and it was working fine before adding in service workers.

I have a vue.config.js that looks like this:

module.exports = {
  pwa: {
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      navigateFallback: '/index.html',
      runtimeCaching: [
        {
          urlPattern: new RegExp('^https://ergast.com'),
          handler: 'networkFirst',
          options: {
            networkTimeoutSeconds: 20,
            cacheName: 'api-cache',
            cacheableResponse: {
              statuses: [0, 200],
            },
          },
        },
      ],
    },
  },
};

And a manifest.json which looks like this:

{
  "name": "Formula GP",
  "short_name": "FGP",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./img/icons/android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "background_color": "#000000"
}

Is there a way I can ignore themes some how?