Service Worker 实现离线缓存需手动注册并管理，核心是通过 install 预缓存静态资源、activate 清理旧缓存、fetch 拦截请求并按策略响应；必须 HTTPS/localhost 环境，作用域正确，且需显式声明缓存规则。
Service Worker 实现离线缓存，核心是通过拦截网络请求（fetch事件），结合 Cache API 管理资源，并配合生命周期事件（install、activate）完成预加载与版本清理。它不是自动生效的“开关”，而是需要你明确声明：缓存哪些资源、何时缓存、怎么响应请求。
注册 Service Worker 并确保作用域正确
必须在页面加载完成后注册，且脚本需部署在 HTTPS 或 localhost 下：
- 检查浏览器支持：
'serviceWorker' in navigator - 注册路径建议为根目录（如
/sw.js），这样作用域默认覆盖整个站点，避免子路径请求无法被拦截 - 注册后不会立即生效；新版本需等旧 Service Worker 退出控制（所有页面关闭或调用
skipWaiting()）
安装阶段预缓存关键静态资源
在 install 事件中把 HTML、CSS、JS、图标等核心文件一次性存入缓存，这是离线可用的基础：
- 使用
event.waitUntil()阻塞安装流程，直到缓存完成，防止安装失败 - 缓存名建议带版本号（如
'rete-cache-v2'），便于后续更新识别 - 缓存列表应包含入口页（
'/'）、主样式、主脚本、基础图标等，不建议缓存动态 API 或用户数据
示例代码片段：
const ASSETS = ['/', '/index.html', '/dist/main.js', '/styles/app.css'];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
);
});
激活阶段清理旧缓存
每次更新 Service Worker 脚本时，新版本会进入 waiting 状态；一旦激活，应主动删除不再使用的缓存，防止存储膨胀：
- 在
activate事件中遍历caches.keys() - 过滤出非当前版本的缓存名，逐个调用
caches.delete() - 也可在此阶段调用
clients.claim()，让新 SW 立即接管当前页面（跳过 waiting）
fetch 事件中选择合适缓存策略
这是决定“离线时能否打开页面”和“联网时是否及时更新”的关键。不同资源适用不同策略：
-
缓存优先（Cache First）：适合 logo、字体、框架 JS 等极少变动的静态资源
→ 先查缓存，命中则返回；未命中再发网络请求，并把响应存入缓存 -
网络优先（Network First）：适合用户项目数据、API 接口等强时效内容
→ 先发网络请求，成功则返回；失败时回退到缓存（保证离线可读，但可能略旧） -
仅缓存（Stale-while-revalidate）：适合首页 HTML 等需快速展示又希望后台更新的内容
→ 立即返回缓存，同时发起网络请求并更新缓存，下次访问更及时
简单缓存优先实现：
self.addEventListener('fetch', e => {e.respondWith(
caches.match(e.request)
.then(resp => resp || fetch(e.request))
);
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
