Service Worker通过缓存策略实现离线访问与性能优化，如缓存优先适用于静态资源，网络优先用于动态内容，结合策略可提升用户体验，并需注意版本管理与更新机制。
Service Worker 是现代 Web 应用实现离线访问和提升加载性能的核心技术之一。通过在浏览器与网络之间建立代理层，它能拦截请求并自定义资源的缓存与返回策略。合理的缓存策略不仅能加快页面响应速度，还能显著提升用户体验，尤其是在网络不稳定的情况下。
缓存优先（Cache First）
这种策略优先从缓存中读取资源，只有当缓存中不存在时才发起网络请求。适合静态资源如图片、CSS、JS 文件。
使用场景：
- 第三方库或框架（如 jQuery、React）
- 字体文件、图标、主题样式
代码示例：
立即学习“Java免费学习笔记（深入）”；
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(cached => {
return cached || fetch(event.request).then(response => {
const cache = await caches.open('static-cache');
cache.put(event.request, response.clone());
return response;
});
})
);
});
网络优先（Network First）
优先尝试从网络获取最新数据，失败后再使用缓存。适用于内容更新频繁的资源。
典型用途：
- 用户个人信息
- 动态文章列表或新闻流
实现方式：
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).catch(() =>
caches.match(event.request)
)
);
});
</font>
仅缓存（Cache Only）
直接从缓存返回资源，不发起网络请求。适用于已知必须离线可用的内容。
注意：需提前预缓存关键资源。
常见于：
- PWA 的离线页面
- 核心 JS 和 CSS 入口文件
示例：
self.addEventListener('fetch', event => {
event.respondWith(caches.match(event.request));
});
网络与缓存结合（Stale While Revalidate）
先返回缓存内容以保证速度，同时发起网络请求更新缓存。用户体验流畅，内容保持相对新鲜。
推荐用于：
- API 接口数据
- 用户头像、配置信息等低频变动资源
实现逻辑：
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(cached => {
const networkFetch = fetch(event.request).then(response => {
const cache = caches.open('dynamic-cache');
cache.then(cache => cache.put(event.request, response.clone()));
return response;
});
return cached || networkFetch;
})
);
});
基本上就这些。选择合适的缓存策略要根据资源类型、更新频率和用户体验需求来定。混合使用多种策略往往效果最佳。注意版本管理缓存名称，避免旧资源无法更新。注册 Service Worker 后记得处理更新逻辑，确保客户端及时获取新版本。不复杂但容易忽略细节。
