fix(service-worker): 修复 fetch 事件处理器的 Response 转换错误

修复了 Service Worker 的 fetch 事件处理器中 `caches.match()` 可能返回
undefined 导致的 "Failed to convert value to 'Response'" 错误。

## 问题
- 当网络请求失败且缓存中没有匹配资源时,`caches.match()` 返回 undefined
- `event.respondWith()` 必须接收 Response 对象,不能接收 undefined
- 导致浏览器控制台报错: TypeError: Failed to convert value to 'Response'

## 修复内容
- 添加请求过滤:只处理同源的 GET 请求
- 添加缓存回退检查:如果 caches.match() 返回空,返回 408 错误响应
- 确保 event.respondWith() 始终接收有效的 Response 对象

## 代码变更
public/service-worker.js:
- 添加同源请求检查 (startsWith(self.location.origin))
- 添加 GET 请求过滤
- 添加 .then(response => ...) 处理缓存未命中情况
- 返回 408 Request Timeout 响应作为最终后备

## 验证
-  npm run build 构建成功
-  Service Worker 不再报错
-  网络请求正常工作
This commit is contained in:
zdl
2025-11-10 17:45:12 +08:00
parent db7efeb1fe
commit 9de4e10637

View File

@@ -58,12 +58,35 @@ self.addEventListener('notificationclose', (event) => {
// Fetch 事件 - 基础的网络优先策略
self.addEventListener('fetch', (event) => {
// 只处理同源请求,跳过跨域请求
if (!event.request.url.startsWith(self.location.origin)) {
return;
}
// 只处理 GET 请求
if (event.request.method !== 'GET') {
return;
}
// 对于通知相关的资源,使用网络优先策略
event.respondWith(
fetch(event.request)
.catch(() => {
// 网络失败时,尝试从缓存获取
return caches.match(event.request);
return caches.match(event.request)
.then(response => {
// 如果缓存也没有,返回一个基本的网络错误响应
if (!response) {
return new Response('Network error', {
status: 408,
statusText: 'Request Timeout',
headers: new Headers({
'Content-Type': 'text/plain'
})
});
}
return response;
});
})
);
});