iOS 11.3 中不使用 PWA 图标答案

【问题标题】：PWA icons are not used in iOS 11.3iOS 11.3 中不使用 PWA 图标
【发布时间】：2018-09-09 03:15:06
【问题描述】：

现在我正在 iOS 11.3 上测试 PWA，我使用下面的 manifest.json 文件：

{
  "name": "Maplat PWA Sample",
  "short_name": "Maplat PWA",
  "background_color": "#fc980c",
  "icons": [{
    "src": "/Maplat/pwa/icon-96.png",
    "sizes": "96x96",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-144.png",
    "sizes": "144x144",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-256.png",
    "sizes": "256x256",
    "type": "image/png"
  }],
  "start_url": "/Maplat/debug.html?overlay=true",
  "display": "standalone"
}

除了图标设置外，这很好用。在我的 iPhoneX 上的 iOS 11.3 中，图标文件不显示在主屏幕上，但屏幕截图用作启动器按钮。

我将我的清单与其他网站（例如 https://www.ft.com/ 或 https://r.nikkei.com/）进行了比较，但我找不到图标设置有任何差异。这些网站的图标与 iOS 11.3 上的 PWA 配合得很好。

我的 manifest.json 有什么问题？

附：我的 manifest.json 适用于 Android Chrome。

【问题讨论】：

标签： mobile-safari progressive-web-apps

【解决方案1】：

虽然 iOS 11.3 确实支持 Web 应用清单，但它还不支持以这种方式指定图标。您可能希望将其包含在其他设备的清单中，但至少现在您必须在 iOS 上使用以下内容：

<link rel="apple-touch-icon" sizes="180x180" href="icon.png">

指定图标大小，并包含一个 URL。

通过Apple's documentation here了解更多信息

还有一个网站可以自动化这个过程linked here

【讨论】：

> 还不支持这样指定图标哦对了。。不知道，谢谢帮我！
仅供参考，当使用虚拟 SSL 证书在 localhost 上测试我的 PWA 时，Safari 在添加到主屏幕时不会使用该图标。相反，它将页面的屏幕截图作为图标。使用完整的 HTTPS 将 PWA 上传到实时服务器后，该图标就可以正常工作了。在 iOS11.3、第 6 代 iPad 上进行测试。
我也可以指定图标的背景颜色吗？
为了补充这一点，从 iOS 14 开始，不支持清单图标。来源：firt.dev/ios-14

【解决方案2】：

TerPro 的回答是正确的，但作为后备，您可以在根目录中放置一个名为“/apple-touch-icon.png”的文件。

【讨论】：