diff --git a/Web/public/service-worker.js b/Web/public/service-worker.js
index b9bd96e..70fe1cb 100644
--- a/Web/public/service-worker.js
+++ b/Web/public/service-worker.js
@@ -15,10 +15,16 @@ self.addEventListener('install', (event) => {
console.log('[Service Worker] 缓存文件');
return cache.addAll(urlsToCache);
})
- .then(() => self.skipWaiting())
);
});
+// 监听跳过等待消息
+self.addEventListener('message', (event) => {
+ if (event.data && event.data.type === 'SKIP_WAITING') {
+ self.skipWaiting();
+ }
+});
+
// 激活 Service Worker
self.addEventListener('activate', (event) => {
console.log('[Service Worker] 激活中...');
diff --git a/Web/src/App.vue b/Web/src/App.vue
index 4a57136..ea77e7c 100644
--- a/Web/src/App.vue
+++ b/Web/src/App.vue
@@ -20,6 +20,11 @@
+
+
+
+ 新版本可用,点击刷新
+
@@ -29,6 +34,7 @@ import { RouterView, useRoute } from 'vue-router'
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { useMessageStore } from '@/stores/message'
import GlobalAddBill from '@/components/Global/GlobalAddBill.vue'
+import { needRefresh, updateServiceWorker } from './registerServiceWorker'
import '@/styles/common.css'
const messageStore = useMessageStore()
@@ -221,4 +227,31 @@ const subscribeToPush = async () => {
font-size: 12px;
pointer-events: auto;
}
+
+.update-toast {
+ position: fixed;
+ bottom: 80px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: var(--van-primary-color);
+ color: white;
+ padding: 10px 20px;
+ border-radius: 24px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ z-index: 2000;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.update-toast:active {
+ transform: translateX(-50%) scale(0.95);
+}
+
+.update-icon {
+ font-size: 18px;
+}
diff --git a/Web/src/registerServiceWorker.js b/Web/src/registerServiceWorker.js
index aae2477..bff071a 100644
--- a/Web/src/registerServiceWorker.js
+++ b/Web/src/registerServiceWorker.js
@@ -1,4 +1,13 @@
-
+import { ref } from 'vue';
+
+export const needRefresh = ref(false);
+let swRegistration = null;
+
+export function updateServiceWorker() {
+ if (swRegistration && swRegistration.waiting) {
+ swRegistration.waiting.postMessage({ type: 'SKIP_WAITING' });
+ }
+}
export function register() {
if ('serviceWorker' in navigator) {
@@ -8,6 +17,7 @@ export function register() {
navigator.serviceWorker
.register(swUrl)
.then((registration) => {
+ swRegistration = registration;
console.log('[SW] Service Worker 注册成功:', registration.scope);
// 检查更新
@@ -20,7 +30,7 @@ export function register() {
if (navigator.serviceWorker.controller) {
// 新的 Service Worker 已安装,提示用户刷新
console.log('[SW] 新版本可用,请刷新页面');
- showUpdateNotification();
+ needRefresh.value = true;
} else {
// 首次安装
console.log('[SW] 内容已缓存,可离线使用');
@@ -59,13 +69,6 @@ export function unregister() {
}
}
-// 显示更新提示
-function showUpdateNotification() {
- // 你可以使用 Vant 的 Dialog 或 Notify 组件
- if (window.confirm('发现新版本,是否立即更新?')) {
- window.location.reload();
- }
-}
// 请求通知权限
export function requestNotificationPermission() {
diff --git a/Web/src/views/PeriodicRecord.vue b/Web/src/views/PeriodicRecord.vue
index e11c993..4edba57 100644
--- a/Web/src/views/PeriodicRecord.vue
+++ b/Web/src/views/PeriodicRecord.vue
@@ -68,7 +68,7 @@
-
+
diff --git a/Web/src/views/SettingView.vue b/Web/src/views/SettingView.vue
index 1f51c6a..b9d1ee2 100644
--- a/Web/src/views/SettingView.vue
+++ b/Web/src/views/SettingView.vue
@@ -50,6 +50,8 @@
+
+