Service Worker 是实现 Web 应用离线可用的核心，通过注册并激活代理、缓存关键资源、拦截请求返回缓存内容，并在更新时清理旧缓存，确保离线体验稳定可靠。
要让 Web 应用在离线状态下依然可用，Service Worker 是核心工具。它充当浏览器与网络之间的代理，能拦截请求并返回缓存资源，从而实现可靠的离线体验。关键在于合理设计缓存策略、正确注册 Service Worker，并处理好更新机制。
注册并激活 Service Worker
在页面加载时注册 Service Worker，确保它尽早接管网络请求。
示例代码：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(reg => {
console.log('SW registered:', reg);
}).catch(err => {
console.log('SW registration failed:', err);
});
}
注意：Service Worker 文件必须可通过 HTTPS 访问（开发环境 localhost 除外），且路径正确，否则无法正常作用于页面。
缓存静态资源：使用 Cache API
在 Service Worker 安装阶段预缓存关键资源，如 HTML、CSS、JS 和离线页面。
监听 install 事件，打开缓存并添加文件：
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll([
'/',
'/styles/main.css',
'/scripts/app.js',
'/offline.html'
])
)
);
});
这样即使用户首次访问后断网，也能从缓存中加载基本界面。
拦截请求并返回缓存内容
通过 fetch 事件监听所有网络请求，优先返回缓存资源，实现离线可用。
常用策略：Cache First，网络回退
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(cached =>
cached || fetch(event.request).catch(() =>
caches.match('/offline.html')
)
)
);
});
这个逻辑保证了资源优先从缓存读取，若未命中则发起网络请求，失败时展示离线页。
管理缓存更新与版本控制
每次修改缓存内容时，应升级缓存名称（如 'v2'），并在 activate 阶段清理旧缓存。
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys =>
Promise.all(
keys.filter(key => key !== 'v2').map(key => caches.delete(key))
)
)
);
});
这能避免旧资源残留，确保用户获取最新版本。
基本上就这些。只要注册正确、缓存关键资源、合理响应请求，并定期清理旧缓存，就能构建出稳定可靠的离线应用。不复杂但容易忽略细节，比如路径错误或缓存命名混乱会导致失败。
