[PWA] 图标在 Chrome/Edge 上被裁切/放大显示异常

[hyacz]

问题描述

PWA 安装到桌面后，图标在 Chrome/Edge 上被裁切/放大，显示效果不佳。

根本原因

web/vite.config.ts 中的 PWA manifest 配置缺少 purpose: "any" 字段。

当前配置：

icons: [
    { src: 'pwa-64x64.png', sizes: '64x64', type: 'image/png' },
    { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
    { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
    { src: 'maskable-icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
]

建议修复

icons: [
    { src: 'pwa-64x64.png', sizes: '64x64', type: 'image/png', purpose: 'any' },
    { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
    { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
    { src: 'maskable-icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
]

参考

• PWA Icon best practices
• maskable.app

[github-actions]

我核对了当前仓库里的 PWA 配置，能确认两点：

1. web/vite.config.ts 里的 manifest 图标配置与您贴出的内容一致，3 个常规图标目前都没有显式设置 purpose，只有 maskable-icon-512x512.png 设置了 purpose: 'maskable'。
2. 仓库里当前的 web/public/pwa-512x512.png 和 web/public/maskable-icon-512x512.png 是相同内容的文件。

基于代码库本身，我能确认目前的 manifest / 图标资源组合确实没有把常规 512 图标和 maskable 512 图标区分开。至于“缺少 purpose: 'any' 是否就是唯一根因”，代码里没有更多证据能直接证明这一点。

Relevant code:

• web/vite.config.ts:71 - manifest 图标列表起始位置
• web/vite.config.ts:87 - maskable-icon-512x512.png 唯一设置了 purpose: 'maskable'

---

HAPI Bot