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

除图标设置外，此方法效果很好。在我的iPhone 11上的iOS 11.3中，图标文件不会显示在主屏幕上，但屏幕截图用作启动按钮。

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

我的manifest.json有什么问题？

P.S。我的manifest.json适用于Android Chrome。

Answer 1

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

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

指定图标大小，并包含网址。

在Apple's documentation here

了解详情

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

Answer 2

TerPro的答案是正确的，但作为后备，你可以放一个名为＆＃34; /apple-touch-icon.png"的文件。在根目录中。

iOS 11.3中未使用PWA图标

2 个答案: