Service Worker通过拦截请求和缓存资源实现离线访问，需在HTTPS环境下注册sw.js文件；安装时预缓存核心资源，激活后采用缓存优先策略响应请求，并在版本更新时清理旧缓存，从而提升Web应用的离线可用性。
要让 Web 应用在离线状态下依然可用，Service Worker 是关键。它是一个运行在浏览器后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源，并在无网络时提供缓存内容。通过合理配置，可以实现真正的离线访问体验。
注册并激活 Service Worker
首先需要在主页面中注册 Service Worker。这个操作通常放在 JavaScript 入口文件中：
示例代码：
navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered:', reg)) .catch(err => console.error('SW registration failed:', err));浏览器会下载 sw.js 文件并在后台启动 Service Worker。注意：该文件必须部署在可访问路径下（如根目录），且网站需通过 HTTPS 或本地开发环境（localhost）运行。
立即学习“Java免费学习笔记（深入）”；
预缓存核心资源
在 Service Worker 安装阶段，可以把关键资源（如 HTML、CSS、JS、图片等）预先缓存下来，确保离线时也能加载基本界面。
常见做法：
- 监听 install 事件，在其中打开缓存并添加静态资源
- 使用 caches.open() 创建命名缓存空间
- 用 cache.addAll() 批量存入文件列表
拦截请求并返回缓存
激活后，Service Worker 可以通过监听 fetch 事件来控制所有网络请求。根据策略决定是从网络获取还是返回缓存内容。
常用策略：
- 对于静态资源：优先使用缓存，网络仅作更新后备
- 对于 API 请求：可设置超时后降级到旧数据或占位内容
这段代码实现了“缓存优先”策略：先查缓存，命中则返回；未命中再发起网络请求。
更新缓存与清理旧版本
当应用更新时，需要替换旧缓存，避免用户一直使用过期内容。
在 activate 阶段清除不再需要的缓存：
self.addEventListener('activate', event => { const validCaches = [CACHE_NAME]; // 当前有效缓存名 event.waitUntil( caches.keys().then(keys => Promise.all( keys.map(key => { if (!validCaches.includes(key)) { return caches.delete(key); } }) ) ) ); });这样每次版本升级（比如修改 CACHE_NAME 为 'v2'），旧缓存都会被自动清理。
基本上就这些。配合合理的缓存策略和资源管理，Service Worker 能让 Web 应用像原生 App 一样稳定运行在弱网或离线环境中。
