From 9540c2b550eaa569581aafc2e94d43f047be463e Mon Sep 17 00:00:00 2001 From: typist Date: Wed, 29 Oct 2025 21:46:54 +0800 Subject: [PATCH] feat: improve service worker update notifications - Added toast notifications for users when a new service worker version is available. - Updated service worker configuration to require manual activation for updates. - Enhanced user experience by allowing users to choose when to update the application. --- src/main.tsx | 33 +++++++++++++++++++++++++++------ vite.config.ts | 4 ++-- 2 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index ec75027..611c00f 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +2,7 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { Toaster } from '@/components/ui/sonner' - +import { toast } from 'sonner' import './index.css' import { AppRouter } from './router' @@ -19,11 +19,32 @@ if ('serviceWorker' in navigator && import.meta.env.PROD) { import('workbox-window').then(({ Workbox }) => { const wb = new Workbox('/sw.js') - wb.addEventListener('installed', (event) => { - if (event.isUpdate) { - console.log('New service worker installed, reloading page...') - window.location.reload() - } + // 检测到新版本时,在后台下载完成后显示通知 + wb.addEventListener('waiting', () => { + // 显示更新通知,右上角弹窗 + toast.info('found new version', { + description: 'new content available, click update to get the latest version', + duration: Infinity, // 持续显示,直到用户操作 + action: { + label: 'update now', + onClick: () => { + // 用户点击更新按钮 + wb.messageSkipWaiting() + } + }, + cancel: { + label: 'later', + onClick: () => { + // 用户选择稍后更新,关闭通知 + // 新版本会在下次手动刷新时自动激活 + } + } + }) + }) + + // 当新的 Service Worker 接管页面时,刷新页面 + wb.addEventListener('controlling', () => { + window.location.reload() }) wb.register() diff --git a/vite.config.ts b/vite.config.ts index e444c06..3c9dcf8 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -76,8 +76,8 @@ export default defineConfig({ } ], cleanupOutdatedCaches: true, - clientsClaim: true, - skipWaiting: true + clientsClaim: true, // 新 SW 激活后立即接管 + skipWaiting: false // 不自动跳过等待,需要手动触发 } }) ],