javascript Service Worker是什么_如何用它实现离线应用？

Service Worker 是浏览器后台运行的网络拦截器，可拦截请求、缓存资源、实现离线访问；需注册、安装预缓存、拦截响应三步完成离线能力，支持多策略缓存与推送通知，但须 HTTPS 环境且注意生命周期控制。

Service Worker 是浏览器中运行在后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源、推送消息，并让 Web 应用具备离线能力。它不是普通 JS 脚本，不能直接操作 DOM，也不在页面上下文中执行，而是作为网络代理和资源调度中心存在。

Service Worker 的核心能力

它本质是一个可编程的网络拦截器：

• 可捕获页面发起的所有 fetch 请求（包括 HTML、JS、CSS、图片、API 接口）
• 能决定是走网络、读缓存、返回兜底内容，还是组合策略（如缓存优先 + 后台更新）
• 支持后台同步、推送通知、静默更新等增强体验的功能
• 生命周期由浏览器控制：注册 → 安装 → 激活 → 等待 → 控制页面

实现离线应用的三步关键操作

要让网站真正“断网可用”，需完成注册、安装缓存、拦截请求三个环节：

• 注册 Service Worker：在主页面 JS 中调用 navigator.serviceWorker.register('./sw.js')。注意 sw.js 必须与页面同源，且建议放在根目录（作用域才覆盖整个站点）
• 安装阶段预缓存静态资源：在 sw.js 的 install 事件里用 cache.addAll(['/', '/index.html', '/app.js', '/style.css']) 把关键文件存入 Cache Storage
• 拦截请求并响应缓存：监听 fetch 事件，对匹配的请求先查缓存 caches.match(req) ，命中则返回；未命中再 fetch 网络并存入缓存（可选），同时 fallback 到一个离线页（如 /offline.html）

实用缓存策略示例

不同资源适合不同策略，常见组合如下：

标签： css javascript java html js 浏览器 app ai 路由 作用域