From 8d46e8582018ce461379b43b51648f77bb4a1c56 Mon Sep 17 00:00:00 2001 From: hehh Date: Tue, 25 Nov 2025 17:32:00 +0800 Subject: [PATCH] =?UTF-8?q?feat(pwa):=20=E5=AE=9E=E7=8E=B0PWA=E6=94=AF?= =?UTF-8?q?=E6=8C=81=EF=BC=8C=E6=94=AF=E6=8C=81=E7=A6=BB=E7=BA=BF=E8=AE=BF?= =?UTF-8?q?=E9=97=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加 manifest.json 文件配置PWA应用信息 - 创建 Service Worker (sw.js) 实现资源缓存与离线访问 - 在HTML中引入PWA相关meta标签及注册代码 - 更新项目文档结构说明，增加PWA相关文件描述 - 移除冗余CSS样式并优化页面加载逻辑 - 调整Google Analytics和51.LA统计脚本加载方式 - 完善部署文档中的PWA自定义配置说明 --- DEPLOY.md | 37 ++++------------ README.md | 11 ++--- about.html | 35 ++++++++++++++++ css/about.css | 17 +------- index.html | 114 ++++++++++++++++++++++++++++++-------------------- js/sw.js | 76 +++++++++++++++++++++++++++++++++ manifest.json | 26 ++++++++++++ 7 files changed, 219 insertions(+), 97 deletions(-) create mode 100644 js/sw.js create mode 100644 manifest.json diff --git a/DEPLOY.md b/DEPLOY.md index f6ea79d..0cc4a88 100644 --- a/DEPLOY.md +++ b/DEPLOY.md @@ -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 Worker（PWA支持） ├── 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 标签 --- diff --git a/README.md b/README.md index 1b1e0ac..bbb5ea5 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ - 📊 **网站统计**：集成多种统计服务（不蒜子、百度统计、Google Analytics、51.LA），统一配置管理 - 🌗 **主题与语言**：一键切换 Day/Night 与 CN/EN，自动缓存记忆 - ⚡ **性能与体验**：缓存字段精简、骨架占位与淡入过渡、异步抓取避免阻塞 +- 📱 **PWA 支持**：支持安装为本地应用，离线访问核心功能 ## 🚀 一键部署 @@ -79,7 +80,7 @@ ## 📁 项目结构 -```textmate +``` Home/ ├── index.html # 主页 ├── about.html # 关于页面 @@ -87,6 +88,7 @@ Home/ ├── DEPLOY.md # 部署与自定义指南 ├── LICENSE # 开源许可证 ├── CNAME # 自定义域名配置 +├── manifest.json # PWA 应用清单文件 ├── vercel.json # Vercel 配置文件 ├── netlify.toml # Netlify 配置文件 ├── _headers # Netlify 安全头配置 @@ -103,7 +105,7 @@ Home/ │ ├── main.js # 主页脚本 │ ├── about.js # 关于页面脚本 │ ├── bj.js # 背景效果脚本 -│ └── ... # 其他功能脚本 +│ └── sw.js # Service Worker（PWA支持） ├── data/ │ ├── articles.json # 文章数据 │ └── ... # 其他数据文件 @@ -137,7 +139,7 @@ Home/ ## 🚀 快速开始 -```shell +``shell # 克隆项目 git clone https://github.com/listener-He/Home.git @@ -179,7 +181,7 @@ open about.html - [x] 添加骨架屏加载效果 - [x] 实现数据缓存机制，提升页面加载速度 - [x] 添加淡入动画效果，提升用户体验 -- [x] 添加网站统计功能, 如不蒜子、百度统计、Google Analytics、51.LA +- [x] 实现 PWA 支持，支持离线访问 ### 待完成 - [ ] 添加更多数据源（如 Twitter、知乎等） @@ -188,7 +190,6 @@ open about.html - [ ] 实现更多的个性化定制选项 - [ ] 添加键盘快捷键支持 - [ ] 增加更多动画效果和交互细节 -- [ ] 实现 PWA 支持，支持离线访问 - [ ] 添加更多主题选项（如高对比度模式等） - [ ] 实现深色模式下的图片优化处理 - [ ] 添加无障碍访问支持（ARIA 属性完善） diff --git a/about.html b/about.html index c98c0e7..78d4a3c 100644 --- a/about.html +++ b/about.html @@ -5,6 +5,10 @@ 关于我 - Honesty + + + + @@ -41,6 +45,8 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/about.css b/css/about.css index abcc48b..d3ce96c 100644 --- a/css/about.css +++ b/css/about.css @@ -1076,14 +1076,7 @@ body { black 90%, transparent 100% ); - -webkit-mask-image: linear-gradient( - to right, - transparent 0%, - black 10%, - black 90%, - transparent 100% - ); - /* 行内滚动动画由 .tech-row 控制 */ + } .tech-row { display: flex; @@ -2231,7 +2224,6 @@ body { gap: 15px; margin-top: 1rem; } - } .interest-item { background: rgba(128, 128, 128, 0.05); @@ -2780,13 +2772,6 @@ body { black 90%, transparent 100% ); - -webkit-mask-image: linear-gradient( - to right, - transparent 0%, - black 20%, - black 80%, - transparent 100% - ); } .tech-row { display: flex; diff --git a/index.html b/index.html index dbfdaa2..8cc115a 100644 --- a/index.html +++ b/index.html @@ -12,32 +12,33 @@ - + + + + + - + - + - + - + - - + + Honesty的主页 @@ -57,6 +58,7 @@ media="all"> + - gtag('js', new Date()); + + - // 异步加载 Google Analytics - const gaScript = document.createElement('script'); - gaScript.async = true; - gaScript.src = `${SiteConfig.analytics.google.src}?id=${SiteConfig.analytics.google.id}`; - document.head.appendChild(gaScript); + + - gaScript.onload = function () { - gtag('config', SiteConfig.analytics.google.id); - }; - - - - + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/sw.js b/js/sw.js new file mode 100644 index 0000000..6824be2 --- /dev/null +++ b/js/sw.js @@ -0,0 +1,76 @@ +// Service Worker for PWA +const CACHE_NAME = 'honesty-home-v1.0.0'; +const urlsToCache = [ + '/', + '/index.html', + '/about.html', + '/css/style.css', + '/css/about.css', + '/css/artalk.css', + '/js/config.js', + '/js/main.js', + '/js/about.js' +]; + +// 安装事件 - 缓存资源 +self.addEventListener('install', event => { + event.waitUntil( + caches.open(CACHE_NAME) + .then(cache => { + console.log('Opened cache'); + return cache.addAll(urlsToCache); + }) + ); +}); + +// 获取事件 - 拦截网络请求 +self.addEventListener('fetch', event => { + event.respondWith( + caches.match(event.request) + .then(response => { + // 如果在缓存中找到响应，则返回缓存的资源 + if (response) { + return response; + } + + // 克隆请求，因为请求是一个流，只能被消费一次 + const fetchRequest = event.request.clone(); + + // 如果没有在缓存中找到，则发起网络请求 + return fetch(fetchRequest).then(response => { + // 检查响应是否有效 + if (!response || response.status !== 200 || response.type !== 'basic') { + return response; + } + + // 克隆响应，因为响应是一个流，只能被消费一次 + const responseToCache = response.clone(); + + // 打开缓存并将响应添加到缓存中 + caches.open(CACHE_NAME) + .then(cache => { + cache.put(event.request, responseToCache); + }); + + return response; + }); + }) + ); +}); + +// 激活事件 - 清理旧缓存 +self.addEventListener('activate', event => { + const cacheWhitelist = [CACHE_NAME]; + + event.waitUntil( + caches.keys().then(cacheNames => { + return Promise.all( + cacheNames.map(cacheName => { + if (cacheWhitelist.indexOf(cacheName) === -1) { + return caches.delete(cacheName); + } + }) + ); + }) + ); +}); \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..de83227 --- /dev/null +++ b/manifest.json @@ -0,0 +1,26 @@ +{ + "name": "Honesty的个人主页", + "short_name": "Honesty", + "description": "我是Honesty，一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。", + "start_url": "/", + "display": "standalone", + "background_color": "#f3f4f6", + "theme_color": "#6c5ce7", + "icons": [ + { + "src": "/images/avatar.jpeg", + "sizes": "192x192", + "type": "image/jpeg" + }, + { + "src": "/images/avatar.jpeg", + "sizes": "512x512", + "type": "image/jpeg" + }, + { + "src": "/apple-touch-icon.png", + "sizes": "180x180", + "type": "image/png" + } + ] +} \ No newline at end of file