JavaScript 缓存策略：Service Worker 实现离线缓存

Service Worker通过拦截网络请求实现离线缓存，提升Web应用加载速度与离线可用性。

在现代 Web 应用开发中，提升加载速度和实现离线访问能力是优化用户体验的关键。Service Worker 作为浏览器提供的一种后台运行脚本机制，为 JavaScript 实现离线缓存提供了强大支持。通过它，我们可以拦截网络请求、管理资源缓存，并让应用在无网络环境下依然可用。

什么是 Service Worker

Service Worker 是一个可编程的代理，位于浏览器与网络之间，能够控制页面的网络请求行为。它运行在独立于主线程的上下文中，不会阻塞 UI 操作，且具备以下特性：

• 离线运行：即使关闭页面也能在后台执行
• 拦截请求：可以捕获 fetch 请求并返回缓存响应
• 生命周期独立：注册后会持续安装、激活并监听事件
• HTTPS 要求：出于安全考虑，仅在 HTTPS 或本地开发环境（localhost）下可用

实现基本离线缓存流程

要使用 Service Worker 实现离线缓存，需完成注册、安装、激活和请求拦截四个核心步骤。

1. 注册 Service Worker

立即学习“Java免费学习笔记（深入）”；

在主页面 JavaScript 中注册 worker 文件（如 sw.js）：

navigator.serviceWorker.register(‘/sw.js’)
.then(reg => console.log(‘SW registered:’, reg))
.catch(err => console.error(‘SW registration failed:’, err));

2. 安装阶段 —— 缓存静态资源

在 sw.js 中监听 install 事件，预缓存关键资源：

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

17

查看详情

const CACHE_NAME = ‘v1’;
const PRECACHE_LIST = [
‘/’,
‘/index.html’,
‘/main.js’,
‘/style.css’,
‘/logo.png’
];
self.addEventListener(‘install’, event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(PRECACHE_LIST))
.then(() => self.skipWaiting())
);
});

3. 激活阶段 —— 清理旧缓存

在 activate 事件中清除过期缓存版本，避免占用过多空间：

self.addEventListener(‘activate’, event => {
event.waitUntil(
caches.keys().then(keys =>
Promise.all(
keys.filter(key => key !== CACHE_NAME)
.map(key => caches.delete(key))
)
).then(() => self.clients.claim())
);
});

4. 拦截请求 —— 动态缓存策略

通过 fetch 事件实现多种缓存策略，例如优先读取缓存，失败时回退到网络：

self.addEventListener(‘fetch’, event => {
event.respondWith(
caches.match(event.request)
.then(cached => cached || fetch(event.request))
);
});

常见缓存策略选择

根据资源类型不同，应采用合适的缓存策略以平衡性能与更新及时性。

Cache First（优先缓存）
适用于不常变动的静态资源，如 CSS、JS、图片等。

caches.match(event.request)
.then(r => r || fetch(event.request))

Network First（优先网络）
适合内容频繁更新的数据接口，确保获取最新信息。

fetch(event.request).catch(() =>
caches.match(event.request)
)

Stale-While-Revalidate（旧数据+后台更新）
立即返回缓存内容，同时后台请求更新缓存，兼顾速度与新鲜度。

event.respondWith(
caches.match(event.request)
.then(cached => fetch(event.request).then(networkRes => {
if (networkRes) {
caches.open(CACHE_NAME).then(cache => cache.put(event.request, networkRes.clone()));
}
return cached || networkRes;
}))
);

注意事项与最佳实践

虽然 Service Worker 功能强大，但在实际使用中需要注意以下几点：

• 版本管理：每次更改缓存逻辑时建议升级 CACHE_NAME，防止旧缓存活太久
• 调试工具：利用 Chrome DevTools 的 Application 面板查看缓存和 worker 状态
• 更新机制：新版本 SW 安装后默认不会接管页面，需调用 skipWaiting() 和 clients.claim()
• 动态资源处理：对 API 请求做单独缓存判断，避免误缓存用户敏感数据
• 存储限制：浏览器对 Cache Storage 有配额限制，定期清理非必要资源

基本上就这些。合理运用 Service Worker，不仅能显著提升首屏加载体验，还能真正实现 PWA 应用的离线可用性。关键是理解其生命周期和缓存逻辑，按需设计策略。