// 修改 getCacheStats 函数
function getCacheStats() {
return new Promise((resolve) => {
if (!navigator.serviceWorker.controller) {
resolve(null);
return;
}
try {
// 创建一个超时检查
const timeoutId = setTimeout(() => {
console.log('getCacheStats 超时');
resolve(null);
}, 3000); // 使用消息通道
const messageChannel = new MessageChannel();
// 设置消息处理
messageChannel.port1.onmessage = function(event) {
clearTimeout(timeoutId);
resolve(event.data);
}; // 添加错误处理
messageChannel.port1.onmessageerror = function(error) {
console.error('消息通道错误:', error);
clearTimeout(timeoutId);
resolve(null);
}; // 发送消息给 Service Worker
navigator.serviceWorker.controller.postMessage({
type: 'GET_CACHE_STATS'
}, [messageChannel.port2]); } catch (error) {
console.error('getCacheStats 错误:', error);
resolve(null);
}
});
} // 修改 showCacheStatus 函数，添加错误处理
function showCacheStatus() {
getCacheStats()
.then(stats => {
if (stats && stats.hitRate > 0) {
console.log(`📊 缓存统计 - 命中率: ${stats.hitRate.toFixed(2)}%, 命中: ${stats.cacheHits}, 未命中: ${stats.cacheMisses}`);
}
})
.catch(error => {
console.error('获取缓存状态失败:', error);
});
} // 修改 handleServiceWorkerMessage 函数
function handleServiceWorkerMessage(event) {
try {
if (!event.data) {
console.log('收到空消息');
return;
} const { type, data } = event.data;
switch (type) {
case 'CACHE_UPDATED':
console.log('📦 缓存已更新:', data);
break;
case 'OFFLINE_READY':
console.log('📱 离线功能已准备就绪');
break;
case 'CACHE_STATS':
displayCacheStats(data);
break;
default:
console.log('📨 收到Service Worker消息:', event.data);
}
} catch (error) {
console.error('处理 Service Worker 消息时出错:', error);
}
} // 修改 setupMessageHandling 函数
function setupMessageHandling(registration) {
try {
// 监听来自Service Worker的消息
navigator.serviceWorker.addEventListener('message', handleServiceWorkerMessage);
// 监听控制器变化
navigator.serviceWorker.addEventListener('controllerchange', function() {
console.log('🔄 Service Worker 控制器已更改');
// 添加延迟以防止立即刷新
setTimeout(() => {
window.location.reload();
}, 1000);
});
return registration;
} catch (error) {
console.error('设置消息处理时出错:', error);
return registration; // 继续返回registration以不中断链式调用
}
} 
