Service Worker 是 PWA 核心，通过注册、安装、激活流程实现离线访问；首先在页面加载时注册 sw.js，检查支持性；安装阶段预缓存关键资源如 HTML、CSS、JS 和图片，确保离线可用；通过 fetch 事件拦截请求，优先返回缓存内容，实现离线浏览；更新时通过更改缓存名称并清理旧缓存，避免版本冲突，保证新资源正确加载。
Service Worker 是 PWA（渐进式 Web 应用）的核心技术之一，它充当浏览器与网络之间的代理层，能够拦截网络请求、缓存资源，并实现离线访问功能。通过注册并激活 Service Worker，Web 应用可以在无网络环境下依然正常运行。
注册 Service Worker
要在页面中启用 Service Worker，首先需要在主 JavaScript 文件或 HTML 的脚本中注册它。注册过程不会立即安装，而是告诉浏览器去哪里找 worker 文件。
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker registered:', registration);
})
.catch(error => {
console.log('Service Worker registration failed:', error);
});
});
}
这段代码检查浏览器是否支持 Service Worker，如果支持，则在页面加载完成后尝试注册根目录下的 sw.js 文件。
安装与缓存静态资源
Service Worker 安装阶段适合预缓存关键资源，比如 HTML、CSS、JS 和图片等。这些资源将在离线时被使用。
const CACHE_NAME = 'my-pwa-v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/app.js',
'/images/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
在 install 事件中，通过 caches.open() 创建一个命名缓存空间，并使用 addAll() 将列表中的资源全部加入缓存。只有所有资源缓存成功，Service Worker 才会进入激活状态。
拦截请求并返回缓存内容
activate 后，Service Worker 可以监听 fetch 事件，对网络请求进行拦截和处理。
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
);
});
上面的逻辑是：当有请求发出时，先查找缓存中是否有匹配的响应；如果有，就返回缓存内容；否则发起实际网络请求。这样即使设备处于离线状态，用户也能看到已缓存的页面。
为了提升体验，还可以实现“缓存优先”或“网络优先”的策略，根据资源类型灵活选择更新机制。
更新缓存版本避免旧内容残留
当应用更新后，需要确保 Service Worker 能正确升级缓存。可以通过更改 CACHE_NAME 来实现版本控制，并在 activate 阶段清理旧缓存。
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
});
这个步骤确保新版本生效时，旧的缓存不会干扰新资源的加载，防止出现混合内容的问题。
基本上就这些。只要配置好注册、安装、缓存和请求拦截，你的 Web 应用就能具备基本的离线能力。不复杂但容易忽略的是缓存策略的设计和版本管理，这直接影响用户体验。
