feat: 添加 Service Worker 缓存与更新流程

- 为同源资源添加网络优先策略,并在离线时回退到缓存
- 缓存带版本号的 CDN 资源,并在发布更新时保留独立缓存条目
- 改进版本更新检查,避免清除 localStorage 或无关缓存
- 将 Service Worker 纳入部署流程并更新相关文档
This commit is contained in:
eddy
2026-07-20 02:22:15 +08:00
parent a878899512
commit 738275b493
6 changed files with 226 additions and 16 deletions
+3 -3
View File
@@ -85,8 +85,8 @@ Linux 服务器可使用 `deploy.sh` 一键下载并部署 `main` 分支的最
bash <(curl -fsSL https://gitea.tohub.top/Share/AI_English/raw/branch/main/deploy.sh) deploy
```
脚本会将 `src/index.html``src/js/``src/styles/` 部署到 `/root/data/docker_data/Nginx/html/english/ai/`,清理目标目录中的其他内容,但保留已有的 `data/` 目录。运行前请确认目标路径符合服务器配置;脚本需要 root 权限以及 `curl``tar``find` 命令。
脚本会将 `src/index.html``src/sw.js``src/js/``src/styles/` 部署到 `/root/data/docker_data/Nginx/html/english/ai/`,清理目标目录中的其他内容,但保留已有的 `data/` 目录。运行前请确认目标路径符合服务器配置;脚本需要 root 权限以及 `curl``tar``find` 命令。
`src/index.html` 通过 CSS 和 JavaScript URL 的 `v` 查询参数控制静态资源缓存每次发布修改了 `src/styles.css``src/script.js`,请同步递增对应版本号。服务器应优先为 `index.html` 设置 `Cache-Control: no-cache`;带版本号的静态资源可长期缓存。
缓存策略分两层:`src/index.html` 通过 CSS 和入口 JavaScript URL 的 `v` 查询参数`ASSET_VERSION`控制静态资源缓存每次发布请同步递增该版本号;`src/sw.js`Service Worker)对同源请求采用「网络优先、离线回退缓存」——未带版本号的请求以 `cache: 'no-cache'` 强制向服务器做条件校验,绕过浏览器启发式缓存(iOS Safari 卡旧版本的根因),带 `?v=` 的资源则走默认 HTTP 缓存;对 CDN 上带版本号的静态库(Font Awesome、Chart.js)采用「缓存优先」,首次取回后离线也能显示图标与图表,其余跨域请求(AI / TTS 接口)不拦截。服务器应优先为 `index.html``sw.js` 设置 `Cache-Control: no-cache`;带版本号的静态资源可长期缓存。
设置页的“获取最新版本”仅清理应用资源缓存,不应改为清除 `localStorage`,以免丢失学习数据和 AI 配置。
设置页的“获取最新版本”会检查并更新 Service Worker,再通过带时间戳的 URL 重新加载;重新取得的资源会更新对应 URL 的缓存,带版本号的资源会保留独立条目以避免并发页面互相覆盖,且不会清除 `localStorage`,以免丢失学习数据和 AI 配置。