Service Worker 动态生成响应实现虚拟 API，本质是拦截请求并运行时构造模拟数据。需注册根目录下 service-worker.js，监听 fetch 事件，用 Response 返回 JSON 等动态内容，支持参数差异化响应与缓存优化，仅限 HTTPS（localhost 除外）。
用 Service Worker 动态生成响应内容来实现虚拟 API，本质是利用其拦截请求的能力，在运行时构造并返回模拟数据，无需真实后端。这种方式轻量、可控，适合开发调试和离线原型验证。
注册并激活 Service Worker
确保项目根目录下有 service-worker.js，并在主页面中注册：
- 检查浏览器支持：
'serviceWorker' in navigator - 注册路径需与作用域匹配（如放在根目录可控制全站）：
navigator.serviceWorker.register('/service-worker.js') - 注册成功后，Service Worker 进入安装 → 激活 → 等待控制页面的生命周期
在 fetch 事件中动态构造响应
核心逻辑写在 service-worker.js 的 self.addEventListener('fetch', ...) 中。对匹配的请求路径，不转发给网络，而是用 Response 构造动态内容：
- 用
new Response(body, { headers, status })手动创建响应 - 支持 JSON：将对象转为字符串并设置
Content-Type: application/json - 支持随机/时间敏感数据：例如
Math.random()或new Date().toISOString() - 示例：拦截
/api/todos返回 3 条随机 todo
self.addEventListener('fetch', event => {<br> if (event.request.url.endsWith('/api/todos')) {<br> const todos = Array.from({ length: 3 }, (_, i) => ({<br> id: i + 1,<br> title: `Task ${i + 1} - ${Date.now() % 1000}`,<br> done: Math.random() > 0.5<br> }));<br> const body = JSON.stringify(todos);<br> event.respondWith(new Response(body, {<br> headers: { 'Content-Type': 'application/json' },<br> status: 200<br> }));<br> }<br>});按请求参数差异化响应
通过解析 URL 查询参数或请求体（需注意 Service Worker 中无法直接读取 request.json()，但可读 request.text()），让同一路径返回不同结果：
- 区分 GET 参数：
new URL(event.request.url).searchParams.get('limit') - 识别请求方法：
event.request.method === 'POST'，然后返回 201 或模拟错误 - 模拟登录态：检查请求头中的
Authorization，缺失则返回 401 - 模拟分页：根据
page和size参数生成对应数组切片
配合缓存策略提升体验
虽然目标是“虚拟 API”，但合理使用 Cache Storage 可避免重复计算，尤其对静态结构或低频变动接口：
- 首次请求生成数据并存入缓存：
caches.open('api-cache').then(cache => cache.put(...)) - 后续请求优先读缓存，再按需更新（例如每 30 秒刷新一次模拟时间戳）
- 注意：纯动态内容（如实时计数）应跳过缓存，直接生成
不复杂但容易忽略：Service Worker 默认只在 HTTPS 下生效（本地 localhost 除外），且修改后需手动 skip waiting 或关闭标签页才能触发新版本。
