iOS/iPadOS上PWA图标透明度丢失问题求助

问题根源 #

iOS对PWA图标的处理逻辑和安卓不同：它不支持purpose: maskable属性，当你给apple-touch-icon指定maskable图标，或manifest中的maskable图标被iOS读取时，系统会自动给透明区域填充黑色背景以适配自身的图标遮罩逻辑；而启动动画时短暂显示透明，是因为此时系统直接读取原始图标，未应用遮罩处理。

解决步骤 #

• 拆分图标配置：将iOS专用图标和安卓maskable图标分开配置

  • 移除当前页面中apple-touch-icon对512-maskable.png的引用，替换为普通的透明PNG图标（推荐核心尺寸为180x180）：

    <link rel="manifest" href="/open/pwa/app.webmanifest">
    <link rel="apple-touch-icon" href="/open/pwa/icons/apple-touch-icon.png">
    

  • 保留manifest中的maskable图标配置（仅给安卓使用），无需修改。

• 适配iOS多尺寸需求：

  • 图标必须是带透明通道的PNG格式，不要包含强制背景设置；
  • 为iOS/iPadOS单独准备对应尺寸的图标，通过sizes属性精准指定：

    <link rel="apple-touch-icon" sizes="180x180" href="/open/pwa/icons/apple-touch-icon-180.png">
    <link rel="apple-touch-icon" sizes="167x167" href="/open/pwa/icons/apple-touch-icon-167.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/open/pwa/icons/apple-touch-icon-152.png">
    

• 验证生效：

  • 删除已安装的PWA，清理Safari缓存后重新添加到主屏幕；
  • 检查主屏幕和程序坞中的图标是否正常显示透明效果。

额外说明 #

iOS的PWA图标处理优先级：apple-touch-icon标签的优先级高于manifest中的图标，只要正确配置iOS专用的透明图标，就能绕过系统的自动背景填充逻辑。

内容的提问来源于stack exchange，提问作者davidm_uk