iOS 版 Safari 用户可以手动将渐进式 Web 应用 (PWA) 添加到主屏幕。添加 PWA 后,iOS 主屏幕上显示的图标称为 Apple 触摸图标。此 Codelab 介绍了如何向 PWA 添加 Apple 触摸图标。本文假定您有权访问 iOS 设备。
测量
在新标签页中打开示例应用:
点击 Remix to Edit 使项目可修改。
如需预览网站,请按查看应用,然后按全屏 。
记下示例应用的网址,其格式类似于
https://example.glitch.me
。
在 Chrome 开发者工具中对您的示例应用运行 Lighthouse PWA 审核:
- 按 `Control+Shift+J`(在 Mac 上,则按 `Command+Option+J`)打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保已选中类别列表中的渐进式 Web 应用复选框。
- 点击生成报告按钮。
在已优化 PWA 部分中,Lighthouse 报告称示例应用未提供有效的 Apple 触摸图标。
将示例应用添加到 iOS 主屏幕
为了演示 Apple 触摸图标如何提供更精细的用户体验,请先尝试在未指定 Apple 触摸图标的情况下将示例应用添加到 iOS 设备的主屏幕。
- 打开 iOS 版 Safari。
- 打开示例应用的网址。该网址是您之前记下的
https://example.glitch.me
等网址。 - 依次点按分享 > 添加到主屏幕。您可能需要向左滑动才能看到此选项。
- 点按添加。
由于网站未指定 Apple Touch 图标,因此 iOS 只会根据网页内容为网站生成图标。
向示例应用添加 Apple 触摸图标
- 取消注释
index.html
的<head>
底部的<link rel="apple-touch-icon">
标记。
…
<link rel="stylesheet" href="/index.css">
<link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
<!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
<link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
</head>
…
将示例应用添加到 iOS 主屏幕(再次)
- 再次尝试将示例应用添加到 iOS 主屏幕。这次,系统会为网站生成适当的图标。如果您使用 Lighthouse 再次审核此页面,还会发现现在未提供有效的
apple-touch-icon
审核已通过。