离线缓存加载失败时应立即切换至可用数据源，采用多层兜底策略：优先 localStorage 中带时间戳的最后成功数据，超时则退至静态默认值；Service Worker 拦截导航请求并返回内联离线页；静态资源通过 onerror 回退在线地址或占位图；统一 safeFetch 函数封装降级逻辑。
离线缓存加载失败时，不能让用户面对白屏或报错，而应立即切换到可用数据源。核心思路是“多层兜底”：优先用本地缓存（如 localStorage 中的上一次成功数据），再退到静态默认值，必要时配合 Service Worker 的离线页 fallback。关键不在“有没有缓存”，而在“缓存不可用时怎么无缝过渡”。
用 localStorage 做“最后可用数据”降级
适用于用户数据、列表、配置类接口。请求成功后立刻存入 localStorage，并附带时间戳；失败时读取并校验是否过期：
- 存数据时加时间戳：
localStorage.setItem('userCache', JSON.stringify({ data: res, ts: Date.now() })) - 读取时判断是否超时（例如 1 小时）：
if (data.ts > Date.now() - 3600 * 1000) return data.data - 过期则返回更保守的默认对象，比如
{ name: '游客', id: -1 }，不抛错也不中断流程
Service Worker 拦截导航请求，返回自包含离线页
当 HTML 主页本身加载失败（如离线包损坏、网络中断），仅靠 JS 降级已无效——必须让页面能打开。这时需 SW 在 fetch 事件中识别 request.mode === 'navigate'：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 预缓存
/offline.html，且该文件必须内联所有样式和脚本，不依赖外部资源 - 在 fetch 回调中，若
caches.match()未命中且navigator.onLine === false，直接return caches.match('/offline.html') - 确保 SW 注册在 HTTPS 或 localhost 下，并在
activate阶段清理旧缓存，避免版本错乱
静态资源路径双写 + 动态回退
针对离线包中 CSS/JS/图片等资源加载失败（如路径错误、文件缺失），可在 HTML 中预留在线地址，并用 JS 监听加载状态：
立即学习“Java免费学习笔记（深入）”；
- 给 link/script 标签添加
onerror处理器：<link rel="stylesheet" href="offline/main.css" onerror="this.href='https://cdn.example.com/main.css'"> - 对图片使用
onerror回退占位图：<img src="offline/avatar.jpg" onerror="this.src='/assets/avatar-default.png'"> - 注意避免循环错误：回退地址也失败时，不再重试，直接展示无样式内容或骨架屏
封装安全请求函数，统一处理降级逻辑
把降级策略收敛到一个函数里，避免每个接口重复写 try/catch 和 fallback：
- 定义
safeFetch(url, { fallback, maxAge = 3600000 })，自动检查 localStorage 缓存、发起请求、失败时返回 fallback 或缓存数据 - 支持传入函数式 fallback：
fallback: () => ({ status: 'offline', data: [] })，便于按场景定制 - 对非关键请求（如埋点、统计）可设
silent: true，错误时仅 log，不阻塞主流程
