如何阻止Vite PWA的Service Worker在浏览器重启时自动激活？

针对generateSW策略 #

使用自动生成Service Worker的generateSW方案时，需通过配置强制禁用自动激活逻辑，配合前端交互手动触发更新：

1. 修改Vite PWA配置，通过workbox项锁定等待状态，禁止自动激活：

VitePWA({
  strategies: 'generateSW',
  registerType: 'prompt',
  devOptions: {
    enabled: true,
  },
  filename: 'service-worker.js',
  workbox: {
    skipWaiting: false,
    clientsClaim: false,
    // 避免自动触发更新逻辑
    navigateFallbackDenylist: [/^\/api/],
  },
})

2. 前端代码中监听更新提示，仅在用户确认后触发激活：

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

const updateSW = registerSW({
  onNeedRefresh() {
    // 替换为你的自定义确认弹窗逻辑
    if (confirm('发现新版本，是否更新？')) {
      updateSW(true).then(() => {
        window.location.reload()
      })
    }
  },
})

针对injectManifest策略 #

自定义Service Worker时，可完全手动控制激活时机，灵活性更高：

1. 编写自定义service-worker.ts，禁用自动激活，通过消息事件触发更新：

/// <reference types="vite-plugin-pwa/client" />
import { precacheAndRoute } from 'workbox-precaching'

// 处理预缓存清单
precacheAndRoute(self.__WB_MANIFEST)

// 安装阶段不自动跳过等待，保持SW处于等待状态
self.addEventListener('install', (event) => {
  // 不调用skipWaiting()，让SW等待用户触发激活
})

// 监听前端发来的激活指令
self.addEventListener('message', (event) => {
  if (event.data?.type === 'SKIP_WAITING') {
    self.skipWaiting()
  }
})

// 激活后接管所有客户端（可选，根据业务需求调整）
self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim())
})

2. 前端代码中监听更新提示，用户确认后发送消息触发激活：

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

const updateSW = registerSW({
  onNeedRefresh() {
    if (confirm('发现新版本，是否更新？')) {
      navigator.serviceWorker.controller?.postMessage({ type: 'SKIP_WAITING' })
      // 监听SW激活完成事件，刷新页面
      navigator.serviceWorker.addEventListener('controllerchange', () => {
        window.location.reload()
      })
    }
  },
})

核心逻辑说明 #

浏览器重启时默认会激活处于等待状态的Service Worker，判定旧页面已全部关闭。通过禁用skipWaiting的自动调用，让新SW始终处于等待状态，仅在用户明确确认后才触发激活，就能彻底避免新版本意外覆盖IndexedDB数据的问题。

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