Service Worker 是运行在浏览器后台的事件驱动型脚本，支持离线缓存、网络请求拦截与推送通知。需 HTTPS 注册，生命周期为注册→安装→激活→等待→控制页面，无法访问 DOM，依赖 fetch/cache API 实现预缓存与运行时缓存策略。

Service Worker 是运行在浏览器后台的脚本，独立于网页主线程，能拦截和处理网络请求、管理缓存、推送通知，并让 Web 应用具备离线能力。

Service Worker 的核心特性

它不是普通 JS 脚本，而是一个可被注册、安装、激活的事件驱动型 worker：

• 必须通过 HTTPS（本地开发时 localhost 也允许）才能注册
• 生命周期由浏览器控制：注册 → 安装 → 激活 → 等待 → 控制页面
• 无法直接访问 DOM 或 window 对象，只能通过 postMessage 和页面通信
• 支持 fetch、cache API，是实现离线体验的关键基础设施

如何用 Service Worker 实现离线体验

关键在于“预缓存 + 运行时缓存”策略，让资源在首次加载时存入 Cache Storage，后续请求优先从缓存读取：

• 预缓存静态资源：在 install 阶段把 HTML、CSS、JS、图标等核心文件写入指定缓存（如 static-v1）
• 拦截 fetch 请求：在 fetch 事件中检查请求是否命中缓存；有则返回缓存响应，无则发起网络请求并缓存结果
• 缓存更新策略：install 阶段清旧缓存，fetch 阶段用 stale-while-revalidate 等模式平衡新鲜度与可用性
• 兜底页面：当网络不可用且缓存未命中时，返回一个离线专用 HTML 页面（如 /offline.html）

一个最小可行示例

注册 sw.js：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(reg => {
    console.log('SW registered:', reg.scope);
  });
}

sw.js 内容简版：

const CACHE_NAME = 'my-app-v1';
const PRECACHE_URLS = ['/index.html', '/style.css', '/app.js'];

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE_URLS))
  );
});

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(cached => {
      return cached || fetch(e.request);
    })
  );
});

注意事项与常见陷阱

实际部署中容易踩坑：

• Service Worker 不会自动更新：新版本需用户刷新两次才生效（第一次触发更新，第二次激活）
• 缓存键区分大小写和查询参数：/api/data 和 /api/data? 是不同缓存项
• 动态路由（如 React Router）需配合 NavigationPreload 或 fallback 响应避免白屏
• 调试建议：在 Chrome DevTools 的 Application → Service Workers 标签中勾选 “Update on reload” 并使用 “Skip waiting”

# css  # react  # javascript  # java  # html  # js  # 浏览器  # app  # ai  # 路由  # win  # red 

相关文章： 安兔兔发布手机6小时续航测试排名 前三都是一加  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  在Java中实现简易银行账户管理_Java面向对象实战说明  Linux定时任务自动化教程_Crontab脚本批量管理实例  html5canvas怎么画渐变背景_createLinearGradient用法详解【汇总】  这才是《巫师3》原本的画面！老玩家重制游戏光影  如何使用Golang模拟依赖接口_通过mock实现单元隔离  如何在 Go 中正确连接 Google Cloud Datastore  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  DeepSeek写简历怎么用_DeepSeek写简历使用方法详细指南【教程】  如何使用Golang实现应用状态监控_分析CPU和内存使用  Go 中 struct 类型声明与实例化常见错误解析  简历没回改：利用AI润色让你的文字更专业  Composer archive命令导出tar和zip格式的区别  铁锤守卫英雄传2测评：优点和缺点都非常鲜明  如何在 PHP 中正确处理并转换数据库查询的多条记录为结构化数组  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  Mac如何修复应用程序权限问题_Mac磁盘工具修复权限【教程】  熙艾尔马埃尔战斗技能全解析 高效游戏角色通关秘诀  Linux备份与恢复方案_tar与rsync应用说明【指导】  如何在 Go 项目中将测试文件组织到子目录中  如何使用Golang处理时间解析错误_Golangtime.Parse异常捕获与处理  c++如何开发2d游戏_c++ SFML库图形渲染与碰撞检测【案例】  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  标题：Vue + Vuex 项目中合理使用 JWT 进行身份认证的完整实践指南  JavaScript中的标签模板是什么_它如何扩展字符串功能  Win11输入法选字框不见了怎么办_Win11输入法修复与重置【教程】  Python函数接口设计原则_易用性解析【教程】  如何在 PHPUnit 测试中模拟 Composer 的 Autoloader？  联想moto X70 Air Pro AI手机即将发布：让影像拥有思考 

相关栏目： 【 行业资讯17850 】 【 软件资源51899 】 【 网站技术89748 】 【 百度推广44206 】 【 网络营销84187 】 【 运营推广93002 】 【 AI优化91086 】 【 网络优化117696 】 【 网址导航107142 】