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:
@@ -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;
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user