🚀 HTML5 离线存储教程

一个展示 HTML5 离线存储 (Application Cache) 使用方法和原理的 React + TypeScript 演示项目。

✨ 功能特性

• 📚 详细教程: HTML5 离线存储原理、用法和最佳实践
• 🔧 实时演示: 展示离线存储的工作机制和状态监控
• ⚙️ 缓存管理: 可视化管理各种浏览器存储机制
• 🔄 Service Worker: 现代浏览器推荐的离线存储方案
• 🚧 环境适配: 开发/生产环境使用不同的缓存策略
• ⚛️ 现代技术栈: React 18 + TypeScript + Vite + Ant Design
• 📱 响应式设计: 支持桌面和移动设备

🔍 环境差异说明

开发环境 (pnpm dev)

• ⚠️ 功能限制: 使用简化版 Service Worker，只提供基本离线回退
• 🔄 不缓存资源: 避免与 Vite 热更新冲突
• 🚧 仅演示用: 适合学习和开发调试

生产环境 (pnpm build && pnpm preview)

• ✅ 完整功能: 智能资源缓存和完整离线体验
• 📦 资源优化: 缓存构建后的静态资源
• 🎯 推荐测试: 体验真正的离线存储功能

🛠️ 本地开发

环境要求

• Node.js 18+
• pnpm 8+ (推荐) 或 npm

安装和运行

# 克隆项目
git clone <your-repo-url>
cd html5-offline-storage-demo

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview

💡 离线功能测试建议

1. 开发环境快速体验：

   pnpm dev  # 启动开发服务器
   # 访问 http://localhost:5174，体验基础离线回退功能

2. 完整功能测试：

   pnpm build && pnpm preview  # 构建并启动生产服务器
   # 访问 http://localhost:4173，体验完整离线存储功能

3. 离线测试步骤：

   • 打开浏览器开发者工具 (F12)
   • Network 面板 → 勾选 "Offline"
   • 刷新页面观察效果

📦 项目结构