# 移动端离线功能说明

## 📱 功能概述

本系统现已支持**移动端离线录入**功能，即使在没有网络的环境下也能正常提交检查记录，数据会暂存在本地，网络恢复后自动同步到服务器。

---

## ✨ 核心特性

### 1. **智能网络检测**
- 实时显示网络状态（右上角指示器）
- 🟢 在线：正常提交到服务器
- 🔴 离线：数据保存到本地

### 2. **自动同步机制**
- 网络恢复后每30秒自动尝试同步
- 支持手动点击"立即同步"按钮
- 同步成功后自动清除本地缓存

### 3. **数据安全保障**
- 使用IndexedDB本地存储，容量可达几百MB
- 图片自动压缩后再存储
- 同步失败的数据会保留并重试

### 4. **用户友好提示**
- 离线时显示醒目提示条
- 显示待同步数据数量
- 同步完成后弹出通知

---

## 🚀 使用方法

### 在线模式（默认）
```
填写表单 → 提交 → 直接保存到服务器 ✅
```

### 离线模式
```
填写表单 → 提交 → 保存到本地 💾
         ↓
    检测到网络 → 自动同步到服务器 ✅
```

### 手动同步
1. 点击右上角"立即同步"按钮
2. 等待同步完成提示
3. 查看待同步数量是否清零

---

## 📊 适用场景

✅ **山区/地下室检查** - 信号弱或无信号  
✅ **偏远地区巡检** - 网络覆盖差  
✅ **应急检查** - 需要快速记录  
✅ **批量检查** - 提高效率  

---

## ⚠️ 注意事项

### 1. 存储空间限制
- IndexedDB通常可用50MB-几GB
- 建议定期联网同步，避免空间不足
- 超出限制时会提示清理

### 2. 图片处理
- 离线时图片转为Base64存储（占用较大）
- 建议控制单张图片大小（<2MB）
- 同步成功后会自动删除本地缓存

### 3. 浏览器兼容性
```
✅ Chrome/Edge (Android): 完美支持
✅ Safari (iOS 11.3+): 支持大部分功能
✅ 微信内置浏览器: 支持
⚠️ 老旧浏览器: 降级为在线模式
```

### 4. 关闭浏览器后
- ❌ Service Worker无法后台运行
- ❌ 不会自动同步
- ✅ 下次打开页面时会自动检测并同步

**建议**：保持页面打开直至同步完成

---

## 🔧 技术实现

### 核心文件
```
z:/
├── sw.js                      # Service Worker（缓存静态资源）
├── assets/js/offline-manager.js  # 离线数据管理器
├── mobile_submit.php          # 日常检查页面（已集成）
└── recheck_inspection_v2.php  # 复查页面（已集成）
```

### 技术栈
- **Service Worker**: 拦截网络请求，缓存资源
- **IndexedDB**: 本地数据库，存储待提交数据
- **Cache API**: 缓存HTML/CSS/JS文件
- **Background Sync**: 网络恢复后自动同步

---

## 🐛 常见问题

### Q1: 为什么同步失败？
**A**: 可能原因：
- 网络连接不稳定
- 服务器返回错误（如权限问题）
- 数据格式不正确

**解决**：点击"立即同步"重试，或检查控制台错误信息

### Q2: 如何查看待同步数据？
**A**: 标题旁边会显示"(X条待同步)"，点击可查看详情（后续版本会添加管理界面）

### Q3: 离线模式下能上传图片吗？
**A**: 可以！图片会转为Base64存储在本地，同步时一起上传

### Q4: 数据会丢失吗？
**A**: 不会。IndexedDB是持久化存储，除非用户手动清除浏览器数据

### Q5: 多个设备同时离线怎么办？
**A**: 每个设备的离线数据独立存储，互不影响。同步时以服务器时间为准

---

## 📈 后续优化计划

### 第一阶段（已完成）
- ✅ 基础离线功能
- ✅ 自动同步机制
- ✅ 用户界面提示

### 第二阶段（规划中）
- ⏳ 离线数据管理界面
- ⏳ 图片压缩优化
- ⏳ 冲突检测与处理

### 第三阶段（长期）
- ⏳ 后台同步支持（需封装APP）
- ⏳ 推送通知
- ⏳ 更复杂的离线策略

---

## 📞 技术支持

如遇问题，请检查：
1. 浏览器控制台是否有错误信息
2. 网络状态是否正常
3. 浏览器是否支持Service Worker和IndexedDB

**测试方法**：
1. 打开浏览器开发者工具（F12）
2. 切换到Network标签
3. 勾选"Offline"模拟离线环境
4. 提交表单测试离线保存
5. 取消"Offline"观察自动同步

---

**版本**: v1.0  
**更新日期**: 2026-04-18  
**维护者**: AI Assistant