From 9de4e10637dcd1c83786b3f799c8558240db6bd6 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Mon, 10 Nov 2025 17:45:12 +0800
Subject: [PATCH] =?UTF-8?q?fix(service-worker):=20=E4=BF=AE=E5=A4=8D=20fet?=
 =?UTF-8?q?ch=20=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=E5=99=A8=E7=9A=84=20R?=
 =?UTF-8?q?esponse=20=E8=BD=AC=E6=8D=A2=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复了 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 不再报错
- ✅ 网络请求正常工作
---
 public/service-worker.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/public/service-worker.js b/public/service-worker.js
index 6dd051da..fc57830e 100644
--- a/public/service-worker.js
+++ b/public/service-worker.js
@@ -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;
+                    });
             })
     );
 });