PWA 图标：maskable 与安全区域适配

--- title: PWA 图标：maskable 与安全区域适配 keywords: - maskable - Web App Manifest - 图标安全区域 - 适配 - 角标 description: '介绍 PWA 的 maskable 图标与安全区域适配，使用 `purpose: maskable` 提供可裁剪区域，避免系统蒙版裁剪重要内容，并给出设计与清单示例。' categories: - 应用软件 - 主题壁纸 --- 概述 不同平台会对应用图标施加蒙版（圆形、圆角等）。maskable 图标在清单中声明安全区域与可裁剪边界，确保品牌与关键图形不被裁剪，提升一致性。 Manifest 示例 ```json { "icons": [ { "src": "/icons/maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" } ] } ``` 工程建议 - 设计安全区：遵循平台提供的安全区域模板；避免将重要元素放在边缘。 - 多尺寸与格式：提供常见尺寸（192/512）；PNG 与透明背景。 - 兼容：不支持平台忽略 `purpose`；仍使用默认图标。 参考与验证 - web.dev Maskable icons 指南：https://web.dev/articles/maskable-icon - W3C Manifest 文档：https://w3c.github.io/manifest/