iOS 17 Safari添加到主屏幕时不识别PWA图标求助

iOS 17 Safari在「添加到主屏幕」时无法识别PWA图标，仅生成带有单个字母的灰色默认图标。Mac端Chrome保存应用时可正常识别并使用图标，Chrome Lighthouse审计显示PWA合规，当前通过HTTPS本地Node.js服务器（路由器IP地址）访问，尝试多种方法无效，以下是当前的HTML代码及manifest配置：

当前HTML头部代码 #

<head>
    <link rel="icon" type="image/png" href="/assets/media/logos/logo-16.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="PWT App">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="apple-touch-icon" sizes="180x180" href="/assets/media/logos/logo-180.png">

    <meta name="theme-color" content="#fff">

    <link rel="manifest" href="/app.webmanifest">

</head>

当前manifest图标配置 #

"icons": [
    {
        "src": "/assets/media/logos/logo-256.png",
        "sizes": "256x256",
        "type": "image/png",
        "purpose": "any"
    },
    {
        "src": "/assets/media/logos/logo-512.png",
        "sizes": "512x512",
        "type": "image/png",
        "purpose": "any"
    },
    {
        "src": "/assets/media/logos/logo-512.png",
        "sizes": "512x512",
        "type": "image/png",
        "purpose": "maskable"
    }
]

解决方案 #

• 完善Apple Touch Icon配置：iOS 17对图标兼容性要求更严格，确保apple-touch-icon无透明背景（Safari对透明背景处理存在兼容问题），同时补充多尺寸适配：

  <link rel="apple-touch-icon" sizes="60x60" href="/assets/media/logos/logo-60.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/assets/media/logos/logo-76.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/assets/media/logos/logo-120.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/assets/media/logos/logo-152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/media/logos/logo-180.png">
  

• 补全manifest必填字段：iOS Safari依赖name和short_name识别应用，确保manifest包含这两个字段，且short_name长度不超过12字符：

  {
    "name": "PWT App",
    "short_name": "PWT App",
    "start_url": "/",
    "display": "standalone",
    "icons": [
        // 你的图标配置
    ]
  }
  

• 验证图标可访问性：直接在Safari中输入图标URL，确认图片能正常加载；检查Node.js服务器静态资源路径配置，确保没有权限拦截。
• 清除缓存并重新测试：删除已添加的主屏幕默认图标，进入iOS设置>Safari浏览器>清除历史记录与网站数据，重新访问网站后再尝试添加到主屏幕。
• 改用本地域名访问：路由器IP属于非标准域名，iOS对IP地址的PWA支持有限，可修改本地hosts文件，将路由器IP映射到pwa.test这类域名后再访问测试。
• 设置manifest正确的Content-Type：确保服务器返回app.webmanifest时，响应头Content-Type为application/manifest+json，Express框架示例配置：

  const path = require('path');
  app.get('/app.webmanifest', (req, res) => {
    res.setHeader('Content-Type', 'application/manifest+json');
    res.sendFile(path.join(__dirname, 'app.webmanifest'));
  });
  

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