在前端项目中，怎样借助 Service Worker 使应用支持离线访问，并保证在断网时依然可以正常使用？
考察说明
考查对 Service Worker 实现离线缓存的理解，包括生命周期、缓存策略和边界情况处理。
回答思路
- 【回答框架 1】Service Worker 是一种在浏览器后台独立于页面运行的脚本，通过拦截 fetch 请求和操作 Cache API 来实现离线缓存。它基于事件驱动，主要生命周期有安装、激活和 fetch。安装时预缓存静态资源，激活时清理旧缓存。
- 【回答框架 2】实现离线访问的核心步骤：注册 Service Worker，在 install 事件中将应用外壳（HTML、CSS、JS、图片等）添加到缓存；在 fetch 事件中监听请求，采用合适的缓存策略，常用策略有 Cache First、Network First、Stale While Revalidate 等。
- 【回答框架 3】选择缓存策略需结合资源类型：静态资源适合 Cache First 以减少网络请求；HTML 和接口数据适合 Network First 以保证数据新鲜，失败时回退缓存；图片等轻量资源可用 Stale While Revalidate。
- 【回答框架 4】离线可用还需处理边界情况：注册和更新机制（如 updateViaCache）、fetch 失败时的回退页（如 offline.html）、缓存容量限制和旧缓存清理，以及监听 online/offline 事件更新界面状态。
- 【关键点 1】Service Worker 生命周期包括安装、激活、fetch 等事件，预缓存和动态缓存结合。
- 【关键点 2】离线访问通过 Cache API 和 fetch 拦截实现，核心是缓存策略选择。
- 【关键点 3】Cache First 适合静态资源，Network First 适合动态内容，需要权衡新鲜度和性能。
- 【易错点 1】Service Worker 默认不能跨域拦截请求，跨域请求需在 fetch 中处理 CORS 或使用 no-cors 模式。
- 【易错点 2】盲目使用 Cache First 可能导致动态数据不更新，需区分资源类型设置过期或版本控制。
- 【易错点 3】忽略更新机制可能导致用户长时间使用旧版本，需在 activate 时清理旧缓存。