vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Service Worker 注册失败修复方案

Browse Source 
1. 使用了 window.location.origin，但 Service Worker 环境中没有 window 对象
2. 注册逻辑缺少详细的错误处理和状态检查
This commit is contained in:
zdl
2025-11-11 10:57:12 +08:00
parent 643c3db03e
commit a15585c464
2 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/service-worker.js
View File

@@ -35,7 +35,7 @@ self.addEventListener('notificationclick', (event) => {
.then((windowClients) => { .then((windowClients) => {
// 查找是否已有打开的窗口 // 查找是否已有打开的窗口
for (let client of windowClients) { for (let client of windowClients) {
if (client.url.includes(window.location.origin) && 'focus' in client) { if (client.url.includes(self.location.origin) && 'focus' in client) {
// 聚焦现有窗口并导航到目标页面 // 聚焦现有窗口并导航到目标页面
return client.focus().then(client => { return client.focus().then(client => {
return client.navigate(urlToOpen); return client.navigate(urlToOpen);

50
src/index.js
View File

@@ -44,24 +44,64 @@ function registerServiceWorker() {
navigator.serviceWorker navigator.serviceWorker
.register('/service-worker.js') .register('/service-worker.js')
.then((registration) => { .then((registration) => {
console.log('[App] Service Worker registered successfully:', registration.scope); console.log('[App] ✅ Service Worker 注册成功');
console.log('[App] Scope:', registration.scope);
// 监听更新 // 检查当前激活状态
if (navigator.serviceWorker.controller) {
console.log('[App] ✅ Service Worker 已激活并控制页面');
} else {
console.log('[App] ⏳ Service Worker 已注册，等待激活...');
console.log('[App] 💡 刷新页面以激活 Service Worker');
// 监听 controller 变化（Service Worker 激活后触发）
navigator.serviceWorker.addEventListener('controllerchange', () => {
console.log('[App] ✅ Service Worker 控制器已更新');
});
}
// 监听 Service Worker 更新
registration.addEventListener('updatefound', () => { registration.addEventListener('updatefound', () => {
const newWorker = registration.installing; const newWorker = registration.installing;
console.log('[App] Service Worker update found'); console.log('[App] 🔄 发现 Service Worker 更新');
if (newWorker) { if (newWorker) {
newWorker.addEventListener('statechange', () => { newWorker.addEventListener('statechange', () => {
console.log(`[App] Service Worker 状态: ${newWorker.state}`);
if (newWorker.state === 'activated') { if (newWorker.state === 'activated') {
console.log('[App] Service Worker activated'); console.log('[App] ✅ Service Worker 已激活');
// 如果有旧的 Service Worker 在控制页面，提示用户刷新
if (navigator.serviceWorker.controller) {
console.log('[App] 💡 Service Worker 已更新，建议刷新页面');
}
} }
}); });
} }
}); });
}) })
.catch((error) => { .catch((error) => {
console.error('[App] Service Worker registration failed:', error); console.error('[App] ❌ Service Worker 注册失败');
console.error('[App] 错误类型:', error.name);
console.error('[App] 错误信息:', error.message);
console.error('[App] 完整错误:', error);
// 额外检查：验证文件是否可访问
fetch('/service-worker.js', { method: 'HEAD' })
.then(response => {
if (response.ok) {
console.error('[App] Service Worker 文件存在但注册失败');
console.error('[App] 💡 可能的原因:');
console.error('[App] 1. Service Worker 文件有语法错误');
console.error('[App] 2. 浏览器不支持某些 Service Worker 特性');
console.error('[App] 3. HTTPS 证书问题（Service Worker 需要 HTTPS）');
} else {
console.error('[App] Service Worker 文件不存在（HTTP', response.status, '）');
}
})
.catch(fetchError => {
console.error('[App] 无法访问 Service Worker 文件:', fetchError.message);
});
}); });
}); });
} else { } else {