更新Package.json后Vite PWA无法加载新哈希index.js问题咨询

我刚安装了vite-plugin-pwa并遵循文档完成配置，具体配置代码如下：

VitePWA({ 
  injectRegister: 'auto',
  registerType: 'autoUpdate',
  devOptions: {
    enabled: true
  },
  strategies: 'generateSW',
  workbox: {
    globPatterns: ['**/*.{js,css,html,ico,png,svg,mp3}'],
    sourcemap: true
  },
  includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
  manifest: {
    name: 'Litreach',
    short_name: 'Cluiche Litrithe',
    start_url: "/",
    display: "standalone",
    lang: "ga",
    description: 'Cluiche litrithe ina mbíonn ar an imreoir 5 fhocal a litriú gach lá. Cluintear na focail a rá sna 3 canúintí agus bíonn 5 iarracht agat an focal a litriú i gceart.',
    theme_color: '#ffffff',
    icons: [
      {
        src: 'pwa-192x192.png',
        sizes: '192x192',
        type: 'image/png',
        "purpose": "maskable"
      },
      {
        src: 'pwa-192x192.png',
        sizes: '192x192',
        type: 'image/png',
        "purpose": "any"
      },
      {
        src: 'pwa-512x512.png',
        sizes: '512x512',
        type: 'image/png'
      }
    ],
    dir: "ltr",
    orientation: "portrait",
    display_override: [
      "standalone"
    ],
    categories: [
      "education",
      "games"
    ]
  }
})

但每次更新package.json的版本号后，再次加载应用时会崩溃。查看Network面板发现，应用尝试加载带有旧哈希值的index.js?oldHashNumber，仅能通过手动刷新浏览器恢复正常。我认为这是Service Worker或PWA配置存在问题，请问是否需要销毁Service Worker及所有缓存后重新配置？如果需要，该如何操作？

解决方案 #

问题根源在于使用generateSW策略时，Service Worker未自动触发更新，导致缓存的旧资源被加载。无需完全销毁重新配置，通过调整配置和添加更新逻辑即可解决：

1. 优化VitePWA核心配置 #

• 关闭开发环境Service Worker：开发阶段频繁更新会导致缓存混乱，建议仅在生产环境启用：

  devOptions: {
    enabled: false // 修改为false
  }
  

• 强制SW激活后接管页面：在Workbox配置中添加skipWaiting和clientsClaim，确保新SW立即生效：

  workbox: {
    globPatterns: ['**/*.{js,css,html,ico,png,svg,mp3}'],
    sourcemap: false, // 生产环境关闭sourcemap，减少SW体积
    skipWaiting: true,
    clientsClaim: true
  }
  

• 同步manifest版本：在manifest中添加与package.json同步的版本号，触发更新检测：

  manifest: {
    version: process.env.npm_package_version, // 自动读取package.json版本
    // 保留原有manifest配置...
  }
  

2. 添加前端更新提示逻辑 #

registerType: 'autoUpdate'可能存在触发时机问题，手动添加监听确保用户及时更新：
在主入口文件（如main.js）中添加：

import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
  onNeedRefresh() {
    if (confirm('发现新版本，是否立即更新？')) {
      updateSW(true)
    }
  },
  onOfflineReady() {
    console.log('应用已支持离线使用')
  }
})

3. 临时清理现有缓存与SW（修复当前崩溃问题） #

针对已出现崩溃的用户，需要手动清理旧缓存：

• Chrome：打开开发者工具 → Application → Service Workers → 点击Unregister；再到Cache Storage删除所有缓存。
• 其他浏览器：找到对应路径的Service Workers和缓存存储进行清理。

4. 验证更新流程 #

每次更新package.json版本后，构建生产包部署，用户打开应用时会自动检测到SW更新，确认后加载新的哈希资源，避免崩溃。

内容的提问来源于stack exchange，提问作者Linda Keating