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中,图标文件不会显示在主屏幕上,但屏幕截图用作启动按钮.

我将我的清单与其他网站进行了比较,例如https://www.ft.com/或https://r.nikkei.com/,但我在图标设置中找不到任何差异.这些网站的图标适用于iOS 11.3上的PWA.

我的manifest.json有什么问题？

PS我的manifest.json适用于Android Chrome.

Answer 1

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

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

指定图标大小,并包含URL.

在此处了解Apple的文档

还有一个网站可以自动化这里链接的流程

Answer 2

2022 年更新：

现在支持在 Web 应用程序清单文件中声明图标。但是purpose值应该包含any（例如"any maskable"）或完全省略。否则就行不通。

SVG格式仍然不支持，但可以使用PNGor代替。WebP

Answer 3

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