feat(pwa): 实现PWA支持,支持离线访问

- 添加 manifest.json 文件配置PWA应用信息
- 创建 Service Worker (sw.js) 实现资源缓存与离线访问
- 在HTML中引入PWA相关meta标签及注册代码
- 更新项目文档结构说明,增加PWA相关文件描述
- 移除冗余CSS样式并优化页面加载逻辑
- 调整Google Analytics和51.LA统计脚本加载方式
- 完善部署文档中的PWA自定义配置说明
This commit is contained in:
hehh
2025-11-25 17:32:00 +08:00
parent ae249861fa
commit 8d46e85820
7 changed files with 219 additions and 97 deletions

View File

@@ -94,7 +94,7 @@ server {
## 项目结构规范
```textmate
```
Home/
├── index.html # 主页
├── about.html # 关于页面
@@ -102,6 +102,7 @@ Home/
├── DEPLOY.md # 部署与自定义指南
├── LICENSE # 开源许可证
├── CNAME # 自定义域名配置
├── manifest.json # PWA 应用清单文件
├── vercel.json # Vercel 配置文件
├── netlify.toml # Netlify 配置文件
├── _headers # Netlify 安全头配置
@@ -118,7 +119,7 @@ Home/
│ ├── main.js # 主页脚本
│ ├── about.js # 关于页面脚本
│ ├── bj.js # 背景效果脚本
│ └── ... # 其他功能脚本
│ └── sw.js # Service WorkerPWA支持
├── data/
│ ├── articles.json # 文章数据
│ └── ... # 其他数据文件
@@ -216,34 +217,10 @@ Home/
2. 在 HTML 元素上添加对应的数据属性
3. 更新语言切换逻辑
## TODO List
### 已完成
- [x] 实现响应式布局,适配桌面、平板和手机设备
- [x] 开发白天/夜间主题切换功能
- [x] 实现中英文国际化支持
- [x] 集成 Artalk 评论系统
- [x] 添加 GitHub 项目展示功能
- [x] 添加博客文章展示功能
- [x] 实现技术栈 3D 球体效果
- [x] 添加一键部署到 Vercel、Netlify 等平台的支持
- [x] 实现移动端优化,包括可拖拽悬浮按钮
- [x] 添加骨架屏加载效果
- [x] 实现数据缓存机制,提升页面加载速度
- [x] 添加淡入动画效果,提升用户体验
- [x] 添加网站统计功能, 如不蒜子、百度统计、Google Analytics、51.LA
### 待完成
- [ ] 添加更多数据源(如 Twitter、知乎等
- [ ] 实现技术栈标签的交互功能(点击跳转链接等)
- [ ] 添加文章详情页与分页列表功能
- [ ] 实现更多的个性化定制选项
- [ ] 添加键盘快捷键支持
- [ ] 增加更多动画效果和交互细节
- [ ] 实现 PWA 支持,支持离线访问
- [ ] 添加更多主题选项(如高对比度模式等)
- [ ] 实现深色模式下的图片优化处理
- [ ] 添加无障碍访问支持ARIA 属性完善)
### PWA 自定义
1. 修改 `manifest.json` 文件来自定义应用名称、图标和主题色
2. 更新 `js/sw.js` 文件来调整缓存策略和缓存资源
3. 在 HTML 文件中调整 PWA 相关的 meta 标签
---