痛点一：网络随时掉线，页面瞬间白屏。

痛点二：打开网页慢。使用者体验差，导致流失，

痛点三：想把常用网站装到桌面却只能看到浏览器地址栏。

答案是一个叫 Service Worker 的技术。但与其直接讲技术，不如先用生活场景说明：

预制菜——离线网页的比喻

下班前把菜放进微波炉定时加热。到了时间直接吃，不用现场烹饪。离线网页就像预制菜——提前准备好内容。 等你需要时直接“加热”，根本不依赖服务器在场。

过去的网页为什么会掉线？

普通网页的工作流程很简单：

你想看新闻 → 浏览器发请求 → 服务器返回内容 → 显示

没有网络时请求只能得到“无法连接”。页面依赖服务器，一旦服务器“下班”，网页就“一片空白”。

Service Worker 改变了这一切

Service Worker 本质上是独立于页面的代理层，常驻在浏览器后端。

没有 Service Worker：
浏览器 → 发请求 → 网络
有 Service Worker：
浏览器 → Service Worker 拦截
├─ 查缓存 → 直接返回
└─ 没有缓存 → 发网络请求 → 服务器

它能做普通 JavaScript 做不到的三件事：

• 拦截请求：决定走缓存还是走网络。
• 持久存储：Cache Storage，比 LocalStorage 大得多。
• 后台推送：即使页面未打开也能收到通知。

唯一限制：只能在 HTTPS下使用。

Service Worker 的生命周期——三步走

第一步先这方面。安装 —— 把菜备好

浏览器下载并解析 Service Worker 文件后触发 install 事件，此时通常进行预缓存主要资源，让页面壳即使服务器挂掉也能显示。

const CACHE_NAME = 'news-v1';const ASSETS =;按理说，self.addEventListener('install'。event => {
event.waitUntil(
caches.open.n)
);})，

再看接下来，激活 —— 交接班

旧版 Service Worker 正在控制页面新版下载完毕后会等待所有旧页关闭再激活。此阶段主要清理旧缓存.

self.addEventListener('activate',event => {
event.waitUntil(
caches.keys.n(names =>
Promise.all(
names.filter.map)
)
)
);})，

：干活 —— 接单出餐

后每次请求都会触发 fetch. 根据策略返回缓存或网络。

self.addEventListener('fetch',event => {
event.respondWith(
caches.match.n(cached => {
return cached || fetch;})
)，});

三大缓存策略——何时走缓存，何时去“现做”

#1 Cache‑First