iOS 11.3中未使用PWA图标 [英] PWA icons are not used in iOS 11.3

问题描述

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

Now I'm testing PWA on iOS 11.3 and I use the manifest.json file below:

{
  "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中，图标文件未显示在主屏幕上，但屏幕截图被用作启动器按钮.

This works well except icon setting. In my iOS 11.3 on iPhoneX, icon files are not shown on home screen but screen capture is used as launcher button.

我将清单与其他网站进行了比较，例如 https://www.ft.com/或 https://r.nikkei.com/，但是我在图标设置上找不到任何区别. 这些站点的图标可以在iOS 11.3上的PWA上很好地工作.

I compared my manifest with other sites, like https://www.ft.com/ or https://r.nikkei.com/, but I couldn't find any differences in icon settings. Icons of these sites work well with PWA on iOS 11.3.

manifest.json中出了什么问题?

What is wrong in my manifest.json?

P.S.我的manifest.json与Android Chrome兼容.

P.S. My manifest.json works well with Android Chrome.

推荐答案

虽然iOS 11.3支持Web应用程序清单，但尚不支持以这种方式指定图标.您需要将其包含在其他设备的清单中，但至少现在，您必须在iOS上使用以下内容:

While iOS 11.3 does support web app manifests, it does not yet support specifying icons this way. You'll want to include it in your manifest for other devices, but at least for now you'll have to use the following for iOS:

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

指定图标大小，并包括一个URL.

Specify the icon size, and include a URL.

在 Apple的文档此处了解更多信息

Learn more at Apple's documentation here

还有一个网站可以自动执行该过程在此处链接

There is also a website to automate the process linked here

这篇关于iOS 11.3中未使用PWA图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！