mobile-safari - iOS 11.3 中不使用 PWA 图标

Question

现在我正在 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 中，图标文件未显示在主屏幕上，但屏幕截图用作启动器按钮。

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

我的 manifest.json 有什么问题？

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

Answer 1

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

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

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

更多信息请访问 Apple's documentation here

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