实现“离线优先”需通过 Service Worker 配合 Cache API：先注册 SW（HTTPS/localhost 下调用 navigator.serviceWorker.register），在 install 阶段预缓存核心资源，在 fetch 事件中优先读缓存、再网络请求并缓存响应，最后在 activate 阶段清理旧缓存。
Fetch 本身不处理缓存，要实现“离线优先”，必须配合 Cache API，在 Service Worker 环境中拦截请求、先查缓存、再 fallback 到网络。关键不在 Fetch 怎么写，而在 Service Worker 怎么配。
注册并激活 Service Worker 是前提
主页面需显式注册 SW 脚本，且仅在 HTTPS 或 localhost 下生效：
- 调用 navigator.serviceWorker.register('/sw.js')，路径需与页面同源
- 确保服务器返回 Content-Type: text/javascript
- SW 生命周期为 install → waiting → active；只有进入 active 状态后，fetch 事件才开始生效
- 开发阶段可加 self.skipWaiting() 跳过 waiting，让新 SW 立即接管
安装阶段预缓存静态资源
在 install 事件中打开缓存空间，把 HTML、CSS、JS、图标等核心静态资源存入 Cache Storage：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 使用 caches.open('v1') 创建命名缓存（如 'v1'）
- 调用 cache.addAll([...urls]) 批量添加；任一资源失败，整个缓存操作会回滚
- 只缓存体积小、稳定性高、首次加载必需的资源，避免因个别 404 导致 install 失败
fetch 事件中执行离线优先策略
这是核心逻辑：每次页面发起 fetch 请求时，SW 拦截并按顺序尝试响应：
立即学习“Java免费学习笔记（深入）”；
- 先用 caches.match(event.request) 查当前缓存，命中则直接返回 Response
- 未命中时调用 fetch(event.request) 发起真实网络请求
- 建议对响应做 cache.put(event.request, response.clone()) 存入缓存（注意 clone，否则 body 只能读一次）
- 若网络也失败，可 fallback 到自定义离线页（如
new Response('<h1>离线中</h1>', { headers: { 'Content-Type': 'text/html' } })）
版本更新与旧缓存清理
资源变更后必须更新缓存策略，否则用户永远拿不到新内容：
- 修改缓存名，例如从 'v1' 改为 'v2'
- 在 activate 事件中遍历 caches.keys()，删除所有不匹配当前 CACHE_NAME 的缓存
- 加上 self.clients.claim() 确保新 SW 立即控制已打开的页面
