ServiceWorker404资源本地重定向方法

Service Worker 无法真正重定向 404，但可通过在 fetch 阶段主动拦截图片请求、结合预缓存占位图与智能兜底策略，实现“静默替换”——无论网络失败、超时还是 CORS 限制导致的加载异常，用户始终看到一张轻量可靠的本地占位图；关键在于 install 时预缓存（推荐 Workbox）、fetch 中精准识别 image 请求、用缓存优先+超时控制+no-cors 兼容第三方资源，彻底避开 DOM 操作等常见误区，让图片容错既稳定又高效。

Service Worker 本身不能“重定向”404，但它可以在资源请求失败时主动返回一张预缓存的本地占位图，视觉上等效于兜底处理。关键不是等 404 发生再跳转，而是在 fetch 阶段拦截、判断、兜底——把失败请求“静默替换”为占位图响应。

预缓存占位图，确保它永远可用

在 Service Worker 安装阶段，必须提前把占位图（如 /placeholder.svg）存入缓存。它不能依赖网络加载，否则兜底链就断了：

• 推荐用 Workbox 的 precacheAndRoute，自动处理哈希校验和版本更新
• 手动方式：在 install 事件中调用 caches.open('static-v1').then(cache => cache.put('/placeholder.svg', response))
• 占位图建议放在 public/ 或根静态目录下，路径固定，不带动态参数

在 fetch 中识别图片请求并兜底

监听 fetch 事件，只对图片类请求做兜底，避免影响脚本、样式等关键资源：

• 用 request.destination === 'image' 准确识别 请求（比后缀判断更可靠）
• 先查缓存：caches.match(request)，命中则直接返回
• 未命中则发网络请求，但加上超时控制：Promise.race([fetch(request), timeout(5000)])
• 若 fetch 拒绝、超时或响应状态非 2xx，直接返回 caches.match('/placeholder.svg')

注意 CORS 图片的特殊处理

第三方图片（如 CDN 上的头像）常带 CORS 限制，此时无法读取响应状态码：

• fetch 时需加 mode: 'no-cors'，但响应变成 opaque，status 始终为 0
• 这种情况下，兜底逻辑更依赖缓存未命中 + 超时，而非状态码判断
• 建议对这类资源单独缓存一个轻量 SVG 占位图，避免 base64 大图拖慢 SW 启动

不推荐的误区

有些做法看似合理，实则无效或引发问题：

• 试图在 SW 里修改 DOM 中的 img.src —— SW 没有 document 对象，根本不可行
• 注册前用 HEAD 请求检查 /sw.js 是否存在 —— 这解决的是注册报错，和资源兜底无关
• 把占位图路径写死在 HTML 里（如 ）却不配合 SW 替换 —— 失去真实图片加载机会

到这里，我们也就讲完了《ServiceWorker404资源本地重定向方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！