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 触摸图标。
![未提供有效的 apple-touch 图标](https://web.developers.google.cn/static/articles/codelab-apple-touch-icon/image/does-provide-valid-appl-3f357b1a31581.png?authuser=0000&hl=el)
将示例应用添加到 iOS 主屏幕
为了演示 Apple 触摸图标如何提供更精细的用户体验,请先尝试在未指定 Apple 触摸图标的情况下将示例应用添加到 iOS 设备的主屏幕。
- 打开 iOS 版 Safari。
- 打开示例应用的网址。该网址是您之前记下的
https://example.glitch.me
等网址。 - 依次点按分享
> 添加到主屏幕。您可能需要向左滑动才能看到此选项。
- 点按添加。
由于网站未指定 Apple Touch 图标,因此 iOS 只会根据网页内容为网站生成图标。
![自动生成的主屏幕图标。](https://web.developers.google.cn/static/articles/codelab-apple-touch-icon/image/an-auto-generated-home-sc-3fae3a26906d9.png?authuser=0000&hl=el)
向示例应用添加 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
审核已通过。
![Apple Touch 图标。](https://web.developers.google.cn/static/articles/codelab-apple-touch-icon/image/the-apple-touch-icon-fb4c851adc96.png?authuser=0000&hl=el)