9b4fafc0b0
完全移除 Service Worker 的 fetch 事件监听器，解决 POST 请求被拦截导致登录超时的问题。
## 问题
- Service Worker 拦截所有同源请求，包括 POST 请求
- 非 GET 请求虽然被 return，但没有正常发送
- 导致 /api/auth/send-verification-code 等 POST 请求超时（504 Gateway Timeout）
- 本地和线上环境都无法登录
## 根本原因
Service Worker 的 fetch 事件处理器设计错误：
```javascript
if (event.request.method !== 'GET') {
return; // ❌ 拦截但不处理，导致请求无法发送
}
```
## 解决方案
完全移除 fetch 事件监听器，因为：
1. 通知功能不需要缓存策略
2. Service Worker 只需处理 push 和 notificationclick 事件
3. 不应该拦截任何 HTTP 请求
## 代码变更
public/service-worker.js:
- 删除整个 fetch 事件监听器（35 行代码）
- 删除 CACHE_NAME 常量（不再需要）
- 更新注释说明 Service Worker 仅用于通知功能
- 文件从 115 行减少到 80 行
## 保留的功能
- ✅ install 事件（Service Worker 安装）
- ✅ activate 事件（Service Worker 激活）
- ✅ notificationclick 事件（处理通知点击）
- ✅ notificationclose 事件（处理通知关闭）
- ✅ push 事件（接收推送消息）
## 验证
- ✅ npm run build 构建成功
- ✅ Service Worker 不再拦截 HTTP 请求
- ✅ POST 请求可以正常发送
## 回滚之前的错误修复
此 commit 回滚了之前的 commit 9de4e10 中添加的 fetch 处理器。
之前为了修复 "Failed to convert value to 'Response'" 错误而添加了 fetch 监听器，
但这个方案是错误的 - Service Worker 不应该拦截请求。
81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
// public/service-worker.js
|
|
/**
|
|
* Service Worker for Browser Notifications
|
|
* 主要功能：支持浏览器通知的稳定运行
|
|
*
|
|
* 注意：此 Service Worker 仅用于通知功能，不拦截任何 HTTP 请求
|
|
*/
|
|
|
|
// Service Worker 安装事件
|
|
self.addEventListener('install', (event) => {
|
|
console.log('[Service Worker] Installing...');
|
|
// 跳过等待，立即激活
|
|
self.skipWaiting();
|
|
});
|
|
|
|
// Service Worker 激活事件
|
|
self.addEventListener('activate', (event) => {
|
|
console.log('[Service Worker] Activating...');
|
|
// 立即接管所有页面
|
|
event.waitUntil(self.clients.claim());
|
|
});
|
|
|
|
// 通知点击事件
|
|
self.addEventListener('notificationclick', (event) => {
|
|
console.log('[Service Worker] Notification clicked:', event.notification.tag);
|
|
|
|
event.notification.close();
|
|
|
|
// 获取通知数据中的链接
|
|
const urlToOpen = event.notification.data?.link;
|
|
|
|
if (urlToOpen) {
|
|
event.waitUntil(
|
|
clients.matchAll({ type: 'window', includeUncontrolled: true })
|
|
.then((windowClients) => {
|
|
// 查找是否已有打开的窗口
|
|
for (let client of windowClients) {
|
|
if (client.url.includes(window.location.origin) && 'focus' in client) {
|
|
// 聚焦现有窗口并导航到目标页面
|
|
return client.focus().then(client => {
|
|
return client.navigate(urlToOpen);
|
|
});
|
|
}
|
|
}
|
|
// 如果没有打开的窗口，打开新窗口
|
|
if (clients.openWindow) {
|
|
return clients.openWindow(urlToOpen);
|
|
}
|
|
})
|
|
);
|
|
}
|
|
});
|
|
|
|
// 通知关闭事件
|
|
self.addEventListener('notificationclose', (event) => {
|
|
console.log('[Service Worker] Notification closed:', event.notification.tag);
|
|
});
|
|
|
|
// 推送消息事件（预留，用于未来的 Push API 集成）
|
|
self.addEventListener('push', (event) => {
|
|
console.log('[Service Worker] Push message received:', event);
|
|
|
|
if (event.data) {
|
|
const data = event.data.json();
|
|
const options = {
|
|
body: data.body || '您有新消息',
|
|
icon: data.icon || '/favicon.png',
|
|
badge: '/favicon.png',
|
|
data: data.data || {},
|
|
requireInteraction: data.requireInteraction || false,
|
|
tag: data.tag || `notification_${Date.now()}`,
|
|
};
|
|
|
|
event.waitUntil(
|
|
self.registration.showNotification(data.title || '价值前沿', options)
|
|
);
|
|
}
|
|
});
|
|
|
|
console.log('[Service Worker] Loaded successfully');
|