通过 Service Worker 结合本地存储实现无服务器的前端网关-js教程-PHP中文网

Service Worker 不能替代服务器网关，但可模拟其核心行为：请求拦截、路由分发、响应合成与策略控制；通过协同 IndexedDB、Cache API 和 localStorage，在无服务器场景下实现静态调度、本地代理、离线兜底与身份模拟等前端自治能力。

通过 service worker 结合本地存储实现无服务器的前端网关

Service Worker 本身不能替代服务器网关，但它可以模拟前端网关的核心行为——请求拦截、路由分发、响应合成与策略控制。在“无服务器”语境下，这指的是不依赖后端 API 即可完成部分网关职能（如静态资源调度、本地数据代理、离线兜底、身份模拟等），真正实现“前端自治”。关键在于 Service Worker + 本地存储（IndexedDB / Cache API / localStorage）的协同设计。

用 Service Worker 拦截并重写请求流

Service Worker 是唯一能在网络层介入请求生命周期的前端机制。它不转发请求，而是决定“从哪来”：缓存、本地数据库、预置响应，甚至拒绝。

注册时确保 HTTPS 或 localhost 环境，否则浏览器会拒绝安装
在 install 阶段预缓存核心静态资源（HTML、JS、CSS、图标），保证首次离线可加载
在 fetch 事件中按 URL 模式分类处理：
- /api/ 开头的请求 → 不发网，转由 IndexedDB 查询或返回 mock 响应
- /static/ 或资源扩展名（.js/.css/.png）→ 优先走 Cache API，未命中再 fetch
- /auth/ 类路径 → 检查 localStorage 中的 token 有效性，伪造登录态响应

用 IndexedDB 承载结构化“本地后端”

Cache API 只存 Response 对象，无法做条件查询；localStorage 容量小且无索引。IndexedDB 是实现前端网关数据面的主力：

根据ui图生成前端页面

将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。

下载

建表模拟 API 接口：例如 users、components、history，每条记录含 id、timestamp、data 字段
对 POST /api/designs 请求，SW 解析 request.body，存入 designs 表；GET /api/designs/:id 则直接查表返回
配合事务（transaction）保障多步操作原子性，比如“保存设计 + 更新历史 + 同步标记”三者要么全成功，要么全回滚

用 Cache API 管理资源版本与动态响应

Cache API 不仅缓存文件，还可缓存任意构造的 Response，是实现“响应合成”的关键：

创建命名缓存如 'api-responses-v2'，用于存放 mock 数据或降级内容
对 /api/status 请求，SW 可 new Response(JSON.stringify({online: false, cacheHit: true}), {headers: {'Content-Type': 'application/json'}})
结合 caches.keys() 和 caches.delete() 实现缓存清理策略，例如只保留最近 3 个版本的 API 响应缓存