Web前端开发技术

Appearance

Service Worker ​

元信息 ​

  • 目标：理解 Service Worker 作为"独立于页面的后台代理"——拦截全站请求实现可编程缓存与离线兜底；掌握 install/activate/fetch 生命周期与缓存策略权衡，认识它是 PWA 的技术核心
  • 关键概念：Service Worker、可编程缓存、离线兜底、生命周期、缓存优先、stale-while-revalidate
  • 关联阶段：cp4
  • 常见误区：以为 SW 是页面里多加的一个 script（它独立于页面运行，页面关了仍在，且不能操作 DOM）；以为缓存策略有标准答案（静态资源与数据请求在"快"与"新鲜"间的取舍不同）；以为改一行 sw.js 立即对用户生效（新版本需后台安装、等旧 SW 控制完既有页面后才交接）

Service Worker 是什么？ ​

一段独立于网页、运行在浏览器后台的脚本，充当页面与网络之间的可编程代理：它可以拦截本站点的所有请求，决定"用缓存回答还是走网络"。

与普通脚本的区别在于三个特征：

  • 独立生命周期：不属于任何一个页面。页面关了它仍可存活，事件驱动（被 push、fetch、周期同步等事件唤醒）
  • 无法接触 DOM：它运行在自己的线程里，不能操作页面——与主线程只能靠消息传递（这正是Web Worker家族的约束）
  • 必须 HTTPS：掌握全部流量的代理只能出现在安全上下文中

为什么需要它？ ​

Web 一直有个原生 App 不具备的软肋：断网即死。Service Worker 是离线能力的关键拼图：

  • 可编程缓存：请求先经过 SW，命中缓存直接秒回；未命中走网络并可顺手存入缓存
  • 离线兜底：缓存应用外壳（html/css/js），断网时依然能打开界面
  • 后台能力：消息推送、后台同步（网络恢复后补发请求）都由它承载
  • 这些能力组合起来即 PWA——Service Worker 是 PWA 的技术核心

生命周期：三步上岗 ​

text
安装（install，预缓存资源） → 激活（activate，清理旧缓存） → 待命（拦截 fetch）
import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;
Open on CodeSandboxOpen Sandbox
  • 更新机制：sw.js 文件内容一变（哪怕一个字节），浏览器判定有新版本——新 SW 后台安装，旧 SW 控制完既有页面后交接。这套"版本化 + 接力"的生命周期是它区别于普通脚本的设计精华

策略选择的权衡 ​

拦截到请求后"缓存还是网络"是个策略问题，没有万能答案：

  • 缓存优先：快，但可能陈旧——适合不常变的静态资源
  • 网络优先：新鲜，断网才回退缓存——适合数据类请求
  • 缓存优先 + 后台更新（stale-while-revalidate）：先用缓存，同时刷新缓存供下次使用——静态资源的常用折中

与课程主线的呼应 ​

  • 它是客户端API"浏览器即平台"的又一级台阶：Web 应用获得了过去只有原生程序才有的后台驻留能力
  • 离线数据的另一半在本地存储：Cache API 存资源，IndexedDB 存业务数据
  • 框架无关：无论项目用什么组件框架，SW 都以同样方式接入

扩展阅读 ​