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"
}

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

我将我的清单与其他网站（例如 https://www.ft.com/ or https://r.nikkei.com/）进行了比较，但我没有发现图标设置有任何差异。这些网站的图标在 iOS 11.3.

上与 PWA 配合得很好

我的 manifest.json 有什么问题？

P.S。我的 manifest.json 与 Android Chrome.

配合得很好

Answer 1

虽然 iOS 11.3 确实支持网络应用程序清单，但尚不支持以这种方式指定图标。您需要将它包含在其他设备的清单中，但至少现在您必须对 iOS 使用以下内容：

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

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

在 Apple's documentation here

了解更多

还有一个网站可以自动执行该过程linked here

Answer 2

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

iOS 11.3 中未使用 PWA 图标

PWA icons are not used in iOS 11.3

mobile-safari

progressive-web-apps