iOS 11.3 中不使用 PWA 图标

Posted

技术标签:

【中文标题】iOS 11.3 中不使用 PWA 图标【英文标题】:PWA icons are not used in iOS 11.3 【发布时间】:2018-09-09 03:15:06 【问题描述】:

现在我正在 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 有什么问题?

附:我的 manifest.json 适用于 android Chrome。

【问题讨论】:

【参考方案1】:

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

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

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

通过Apple's documentation here了解更多信息

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

【讨论】:

> 还不支持这样指定图标哦对了。。不知道,谢谢帮我! 仅供参考,当使用虚拟 SSL 证书在 localhost 上测试我的 PWA 时,Safari 在添加到主屏幕时不会使用该图标。相反,它将页面的屏幕截图作为图标。使用完整的 HTTPS 将 PWA 上传到实时服务器后,该图标就可以正常工作了。在 iOS11.3、第 6 代 iPad 上进行测试。 我也可以指定图标的背景颜色吗? 为了补充这一点,从 iOS 14 开始,不支持清单图标。来源:firt.dev/ios-14【参考方案2】:

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

【讨论】:

以上是关于iOS 11.3 中不使用 PWA 图标的主要内容,如果未能解决你的问题,请参考以下文章

Angular SPA PWA - Safari iOS 选项卡图标不会改变

使用组策略时,Edge PWA 未应用桌面快捷方式名称和图标

ios5 中不显示应用程序图标和图像

PWA初体验

PWA 清单图标无法获取

截至 2018 年第一季度,渐进式 Web 应用程序 (PWA) 需要哪些图标大小?