86 lines
2.9 KiB
Markdown
86 lines
2.9 KiB
Markdown
# PWA 图标生成指南
|
||
|
||
要从基础 SVG 生成 PWA 图标，您可以使用以下任一工具：
|
||
|
||
## 方法 1: 使用 ImageMagick (convert)
|
||
```bash
|
||
# 首先安装 ImageMagick
|
||
brew install imagemagick # macOS
|
||
sudo apt install imagemagick # Ubuntu/Debian
|
||
|
||
# 生成所有需要的尺寸
|
||
for size in 72 96 128 144 152 192 384 512; do
|
||
convert -background transparent -resize ${size}x${size} icon-base.svg icon-${size}x${size}.png
|
||
done
|
||
```
|
||
|
||
## 方法 2: 使用 Inkscape
|
||
```bash
|
||
# 首先安装 Inkscape
|
||
brew install inkscape # macOS
|
||
sudo apt install inkscape # Ubuntu/Debian
|
||
|
||
# 生成所有需要的尺寸
|
||
for size in 72 96 128 144 152 192 384 512; do
|
||
inkscape --export-width=${size} --export-height=${size} --export-filename=icon-${size}x${size}.png icon-base.svg
|
||
done
|
||
```
|
||
|
||
## 方法 3: 使用 rsvg-convert
|
||
```bash
|
||
# 首先安装 librsvg
|
||
brew install librsvg # macOS
|
||
sudo apt install librsvg2-bin # Ubuntu/Debian
|
||
|
||
# 生成所有需要的尺寸
|
||
for size in 72 96 128 144 152 192 384 512; do
|
||
rsvg-convert -w ${size} -h ${size} -o icon-${size}x${size}.png icon-base.svg
|
||
done
|
||
```
|
||
|
||
## 方法 4: 在线工具
|
||
您也可以使用在线 SVG 转 PNG 工具，例如：
|
||
- https://cloudconvert.com/svg-to-png
|
||
- https://convertio.co/svg-png/
|
||
- https://www.iloveimg.com/convert-svg-to-png
|
||
|
||
## 必需的图标尺寸
|
||
- 72x72px
|
||
- 96x96px
|
||
- 128x128px
|
||
- 144x144px
|
||
- 152x152px
|
||
- 192x192px (maskable)
|
||
- 384x384px
|
||
- 512x512px (maskable)
|
||
|
||
# Service Worker 升级指南
|
||
|
||
## 版本管理
|
||
Service Worker (`sw.js`) 使用版本常量来管理缓存失效和更新。
|
||
|
||
```javascript
|
||
// apps/web/public/sw.js
|
||
const APP_VERSION = '0.2.13'; // 增加此值以触发更新
|
||
```
|
||
|
||
## 升级步骤
|
||
当部署需要用户更新缓存的更改时（例如错误修复、新功能或静态资源更新）：
|
||
|
||
1. **修改 `sw.js`**：
|
||
* 在文件顶部找到 `const APP_VERSION`。
|
||
* 增加版本号（例如从 `0.2.12` 到 `0.2.13`）。
|
||
|
||
2. **更新如何工作**：
|
||
* **安装阶段**：当浏览器检测到 `sw.js` 存在字节差异时（由于版本号增加），它会在后台安装新的 Service Worker。
|
||
* **激活阶段**：
|
||
* 安装完成后，新的 Service Worker 会等待所有客户端标签页关闭（或调用 `skipWaiting()`）。
|
||
* 激活后，它会创建带有新版本后缀的新缓存（例如 `drawnix-v0.2.13`）。
|
||
* 它会识别旧版本的缓存（例如 `drawnix-v0.2.12`）。
|
||
* **迁移**：它会自动将有价值的数据（如缓存的图片）从旧缓存迁移到新缓存，以节省带宽。
|
||
* **清理**：迁移和短暂的安全延迟（30秒）后，它会删除旧缓存。
|
||
|
||
3. **强制更新**：
|
||
* `index.html` 使用 `cache: 'reload'` 方式获取，确保始终加载最新版本，防止因 HTML 过期指向丢失的 JS 哈希而导致的“白屏”问题。
|
||
* 在开发模式（`localhost`）下，静态资源缓存会被绕过，以避免调试困扰。
|