Service Worker 是实现离线缓存的核心技术，通过拦截网络请求并结合 Cache API 管理资源，支持缓存优先、网络优先等多种策略；需注册、安装、激活并监听 fetch 事件来控制缓存，版本更新时应清理旧缓存以确保生效。
Service Worker 是实现 JavaScript 缓存和离线存储的核心技术之一。它是一个运行在浏览器后台的脚本，独立于网页主线程，能够拦截网络请求并管理缓存，从而实现离线访问、性能优化和资源预加载。
什么是 Service Worker
Service Worker 是一种特殊的 Web Worker，注册后可在用户设备上安装并激活，之后就能控制指定范围内的页面。它通过事件驱动机制工作，关键能力包括：网络请求拦截、缓存管理、推送通知和后台同步。
由于其运行在独立上下文中，无法直接操作 DOM，但非常适合处理资源缓存与离线逻辑。
缓存策略：Cache API 结合 Fetch 事件
Service Worker 配合 Cache API 可以灵活定义资源的缓存方式。通过监听 fetch 事件，可以决定是从网络获取、从缓存读取，还是返回备用内容。
立即学习“Java免费学习笔记（深入）”；
常见的缓存策略有：
- 缓存优先（Cache First）：先尝试从缓存读取资源，未命中再请求网络。适合静态资源如 JS、CSS、图片。
- 网络优先（Network First）：优先请求网络，失败后再使用缓存。适合动态内容或需保持最新的数据。
- 仅缓存（Cache Only）：直接从缓存返回，不发起网络请求。适用于已预缓存的资源。
- 仅网络（Network Only）：总是发起网络请求，不使用缓存。适用于实时性要求高的接口。
- Stale-While-Revalidate：先返回缓存内容（即使过期），同时后台更新缓存。用户体验快，内容逐步更新。
基本实现步骤
要启用 Service Worker 的离线缓存功能，需完成以下几步：
- 注册 Service Worker：在主页面 JavaScript 中调用 navigator.serviceWorker.register('/sw.js')。
- 安装阶段（install）：在 sw.js 中监听 install 事件，预缓存核心资源。
- 激活阶段（activate）：清除旧缓存，确保新版本生效。
- 拦截请求（fetch）：根据策略响应请求，可结合 caches.match 和 fetch 使用。
示例代码片段：
// sw.js
const CACHE_NAME = 'v1';
const PRECACHE_URLS = ['/index.html', '/style.css', '/app.js'];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(PRECACHE_URLS))
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
更新与版本控制
Service Worker 缓存需要手动管理版本。当 sw.js 文件发生字节级变化时，浏览器会安装新的 Worker，但在所有页面关闭前旧版本仍会运行。
建议做法：
- 每次更改缓存策略或资源列表时，更新 CACHE_NAME 或版本号。
- 在 activate 事件中清理旧缓存，避免占用用户空间。
- 使用工具如 Workbox 简化版本管理和缓存策略配置。
基本上就这些。掌握 Service Worker 的缓存机制，能显著提升 Web 应用的加载速度和离线体验，是现代 PWA（渐进式 Web 应用）的基础能力。
