KennethCheng
09d30aaf0f
Phase 6 落地。用户在桌面 Chrome / Android Chrome / iOS Safari 上可以把
FuelLog "安装"到主屏幕,像 app 一样启动;断网时已访问页面仍可用。
新增:
- scripts/gen-icons.ps1 PowerShell + System.Drawing 生成 PWA 应用图标
* pwa-192x192.png 标准应用图标
* pwa-512x512.png 高清应用图标
* pwa-maskable-512x512.png Android adaptive icon(留 10% 安全边)
绿底 + 白色油枪图形(矩形主体 + 把手 + 喷嘴 + 底座),无外部依赖
- public/manifest.webmanifest 静态 manifest,name / short_name / description
/ theme_color / background_color / display=standalone / orientation=portrait
/ icons 三种规格
- public/{favicon.svg, pwa-*.png} 全部进 public/ 由 Vite 复制到 dist/
vite.config.js 改动(VitePWA 配置):
- registerType: 'autoUpdate' + injectRegister: 'auto' 无需手动调
registerSW,SW 启动后自动接管版本更新
- manifest: false 关掉自动生成,改用 public/manifest.webmanifest 静态文件
(避免 Node 在 Windows 中文环境下用 GBK 写 manifest 导致 PWA 安装
提示里的 name 显示乱码;JSON 标准是 UTF-8,这里源文件是 UTF-8)
- filename: 'sw.js' + strategies: 'generateSW' 使用 Workbox generateSW
- workbox.globPatterns 预缓存全部 .js / .css / .html / .png / .svg / .woff2
- workbox.navigateFallback = '/index.html' SPA 路由
workbox.navigateFallbackDenylist = [/^\/api/] /api 走网络不被 SPA 兜底
- workbox.runtimeCaching:
* /api/* NetworkFirst 5s 超时回退 cache,适合"偶尔离线还能看老数据"
* 静态资源 (style/script/worker/image/font) CacheFirst 30 天
- includeAssets 把 favicon + pwa-*.png + manifest.webmanifest 一起 precache
- devOptions.enabled = false 开发期关掉 SW(Vite HMR 会被卡住)
index.html 改动:
- link rel="apple-touch-icon" iOS 添加到主屏用
- meta apple-mobile-web-app-* 三件套
- meta theme-color 浏览器顶栏配色
- 保留 viewport-fit=cover,刘海/小白条的安全区已有 CSS 配合
期间踩到的坑(都修了):
- 一开始让 VitePWA 用 config 内嵌 manifest 对象,Node 在 Windows 写
出来的 dist/manifest.webmanifest 是 GBK 字节,Chrome 解析后中文乱码
- 改成 public/manifest.webmanifest 静态文件后,`Get-Content` 在
PowerShell 5.1 仍然显示乱码(ANSI 默认),但 .NET ReadAllText 强制
UTF-8 读取文件原始字节正确(加 = E5 8A A0,油 = E6 B2 B9),浏览器
按 JSON 标准 UTF-8 解析也正常 —— 所以"乱码"是 PowerShell 5.1
Get-Content 自身的输出编码问题,不是文件损坏
未做(留待后续):
- A2HS 按钮(install prompt) —— PWA 标准是浏览器原生弹,先不上自造
- 离线 fallback 页面 —— workbox.navigateFallback 走到 /index.html
已经够;真要自造可以加 public/offline.html
- push notification —— 不在 MVP 范围
验证:
pnpm typecheck 0 errors
pnpm build 19.0s
dist/manifest.webmanifest 643 字节,UTF-8 中文 OK
dist/sw.js 3.1 KB,precache 含全部 28 个静态资源
dist/workbox-f641ca17.js 22.8 KB
dist/registerSW.js 134 字节(由 VitePWA inject)
39 lines
1.0 KiB
JSON
39 lines
1.0 KiB
JSON
{
|
|
"name": "fuellog-web",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"description": "FuelLog (加油记) frontend — Vue 3 + Vite + TS + Pinia + Naive UI",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vue-tsc --noEmit && vite build",
|
|
"preview": "vite preview --port 4173",
|
|
"typecheck": "vue-tsc --noEmit",
|
|
"lint": "eslint . --ext .vue,.ts,.tsx --max-warnings 0"
|
|
},
|
|
"dependencies": {
|
|
"axios": "^1.7.7",
|
|
"echarts": "^6.1.0",
|
|
"naive-ui": "^2.40.1",
|
|
"pinia": "^2.2.6",
|
|
"vfonts": "^0.0.3",
|
|
"vue": "^3.5.13",
|
|
"vue-echarts": "^8.3.0",
|
|
"vue-router": "^4.4.5"
|
|
},
|
|
"devDependencies": {
|
|
"@types/node": "^22.9.3",
|
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
"@vue/tsconfig": "^0.7.0",
|
|
"autoprefixer": "^10.4.20",
|
|
"postcss": "^8.4.49",
|
|
"tailwindcss": "^3.4.15",
|
|
"typescript": "~5.6.3",
|
|
"unplugin-auto-import": "^0.18.6",
|
|
"unplugin-vue-components": "^0.27.5",
|
|
"vite": "^5.4.11",
|
|
"vite-plugin-pwa": "^1.3.0",
|
|
"vue-tsc": "^2.1.10"
|
|
}
|
|
}
|