I have a Vue app and I am trying to make it a PWA. I am using Vite-PWA-plugin (this plugin)

The problem is when the files are served from the cache the page keeps reloading over and over when you open it and I am using the Oauth2 protocol for authorization, I used the oidc-clint.js library

notes:

1. when you open the PWA app offline the problem doesn't occur.
2. when you clear the cache storage the page opens normally.

here is my vite.config.ts file:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
const path = require('path')

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      includeManifestIcons: true,
      manifest: {
        icons: [
          {
            src: 'icons/android-launchericon-512-512.png',
            sizes: '512x512',
          },
          {
            src: 'icons/android-launchericon-192-192.png',
            sizes: '192x192',
          },
        ],
      },
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      functions: path.resolve(__dirname, './src/components/functions'),
    },
  },
  server: {
    port: 8000,
  },
})

my manifest

{
  "name": "my-app",
  "short_name": "my-app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "lang": "en",
  "scope": "/",
  "icons": [
    { "src": "icons/android-launchericon-512-512.png", "sizes": "512x512" },
    { "src": "icons/android-launchericon-192-192.png", "sizes": "192x192" }
  ]
}