iOS 13 Safari中PWA应用图标配置无效，需补充哪些参数？

以下是针对iOS 13.x版本Safari中PWA图标无法正常识别的有效配置项：

• 严格匹配apple-touch-icon尺寸规范
  iOS 13对图标尺寸要求严苛，必须提供180x180px的主图标（iOS官方推荐标准），同时可补充适配不同设备的尺寸，每个尺寸对应带sizes属性的独立link标签，示例：

  <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-180.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/icons/apple-167.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-120.png">
  

  注意：不可省略sizes属性，iOS 13依赖该属性匹配对应图标。

• 添加全屏运行声明标签
  必须通过以下标签声明应用以全屏模式运行，这是iOS识别PWA并启用自定义图标的核心前提：

  <meta name="apple-mobile-web-app-capable" content="yes">
  

  可补充状态栏样式优化视觉体验：

  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  

• 完善manifest文件关键字段
  即使iOS 13不优先读取manifest图标，仍需确保以下字段配置正确：

  • icons数组包含180x180px尺寸的图标，purpose设为any maskable
  • start_url使用绝对路径且可正常访问
  • display设为standalone或fullscreen
    示例片段：

  {
    "icons": [
      {
        "src": "/icons/icon-180x180.png",
        "sizes": "180x180",
        "type": "image/png",
        "purpose": "any maskable"
      }
    ],
    "start_url": "/",
    "display": "standalone"
  }
  

• 彻底清理Safari缓存
  iOS 13缓存清理需执行完整步骤：

  1. 进入「设置」→「Safari浏览器」→「清除历史记录与网站数据」
  2. 返回Safari关闭所有标签页，重新打开PWA页面
  3. 尝试添加到主屏幕，观察图标是否生效

• 检查图标文件兼容性

  • 图标必须为PNG格式，不可使用iOS 13不支持的WebP等格式
  • 避免过于复杂的透明背景效果，部分iOS 13版本对透明图标处理存在异常
  • 确保图标文件的HTTP响应头未设置no-cache/no-store，防止Safari无法缓存

• 确认HTTPS运行环境
  iOS的PWA功能要求网站必须运行在HTTPS环境下（localhost除外），HTTP环境下无法触发安装及自定义图标功能。

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