为什么页面在 pwa vue 应用程序上无限重新加载

Question

我有一个 Vue 应用程序，我正在尝试将其打造成 PWA。我正在使用 Vite-PWA-plugin (这个插件)

问题是，当从缓存提供文件时，当您打开页面时，页面会不断重新加载，并且我使用 Oauth2 协议进行授权，我使用了 oidc-clint.js 库

备注：

1. 当您离线打开 PWA 应用程序时，不会出现问题。
2. 当您清除缓存存储时，页面会正常打开。

这是我的 vite.config.ts 文件：

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,
  },
})

我的清单

{
  "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" }
  ]
}

Answer 1

当我从CRA迁移到Vite时，我发现了类似的行为。通过删除 CRA 添加的用于处理 PWA 的所有文件，我的问题得到了解决。

我怀疑这个问题与工作箱无法找到

sw.js

有关，因为遗留的CRA文件以某种方式覆盖了它。