Service Worker 是运行在浏览器后台的可编程网络代理,独立于主线程,支持拦截请求、管理缓存、推送通知,实现离线访问与性能优化;仅支持 HTTPS(localhost 除外),无法访问 DOM 或 window,需手动处理更新逻辑。

Service Worker 是运行在浏览器后台的脚本,独立于网页主线程,能拦截和处理网络请求、管理缓存、推送通知,是实现离线访问和性能优化的核心机制。
它是一个可编程的网络代理
Service Worker 本质是浏览器与服务器之间的中间层。注册后,它能监听 fetch 事件,决定某个请求是走网络、读缓存,还是返回自定义响应。
- 比如用户第二次打开页面时,JS/CSS/图片等静态资源可直接从 Cache Storage 返回,跳过网络请求
- 它还能把 API 接口响应缓存下来,在弱网或断网时返回“兜底数据”,保持页面基本可用
- 注意:它只支持 HTTPS(本地 localhost 除外),且无法访问 DOM 或 window 对象
它让网页真正支持离线使用
传统网页断网就白屏,而 Service Worker 可预先缓存关键资源(如 HTML、核心 JS、离线页面),让用户即使没网也能打开首页、浏览已加载内容、提交表单(稍后同步)。
- 常用策略有 Cache-First(优先缓存)、Network-First(优先联网)、Stale-While-Revalidate(先返回缓存,再更新)
- 配合 IndexedDB,还能缓存结构化数据,比如文章列表、用户草稿,实现深度离线功能
- 需手动触发更新逻辑(如监听 install/activate 事件),否则旧版本会一直运行
它为性能优化提供精细控制权
相比 HTTP 缓存头,Service Worker 让开发者完全掌控缓存生命周期:按需缓存、按规则清理、动态生成响应,避免“缓存爆炸”或“缓存失效”问题。
立即学习“Java免费学习笔记(深入)”;
- 可以对不同资源设置不同缓存策略:字体长期缓存,API 响应缓存 5 分钟,HTML 每次检查更新
- 支持流式响应(Response.stream),边加载边渲染,提升首屏速度
- 配合 Navigation Preload,可在 Service Worker 启动期间并行加载新页面,减少白屏等待
基本上就这些。它不复杂但容易忽略细节——比如作用域限制、更新时机、调试方式。用好它,网页就能像原生应用一样快又可靠。











