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 选项卡图标不会改变