向渐进式 Web 应用添加 Apple 触摸图标

Kayce Basques

iOS 版 Safari 用户可以手动将渐进式 Web 应用 (PWA) 添加到主屏幕。添加 PWA 后，iOS 主屏幕上显示的图标称为 Apple 触摸图标。此 Codelab 介绍了如何向 PWA 添加 Apple 触摸图标。本文假定您有权访问 iOS 设备。

测量

在新标签页中打开示例应用：

  1. 点击 Remix to Edit 使项目可修改。

  2. 如需预览网站，请按查看应用，然后按全屏 全屏。

  3. 记下示例应用的网址，其格式类似于 https://example.glitch.me。

在 Chrome 开发者工具中对您的示例应用运行 Lighthouse PWA 审核：

  1. 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
  2. 点击 Lighthouse 标签页。
  3. 确保已选中类别列表中的渐进式 Web 应用复选框。
  4. 点击生成报告按钮。

在已优化 PWA 部分中，Lighthouse 报告称示例应用未提供有效的 Apple 触摸图标。

未提供有效的 apple-touch 图标
未提供有效的 Apple-touch-icon 审核报告

将示例应用添加到 iOS 主屏幕

为了演示 Apple 触摸图标如何提供更精细的用户体验，请先尝试在未指定 Apple 触摸图标的情况下将示例应用添加到 iOS 设备的主屏幕。

  1. 打开 iOS 版 Safari。
  2. 打开示例应用的网址。该网址是您之前记下的 https://example.glitch.me 等网址。
  3. 依次点按分享 Apple 分享按钮 > 添加到主屏幕。您可能需要向左滑动才能看到此选项。
  4. 点按添加。

由于网站未指定 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 审核已通过。
Apple Touch 图标。
Apple Touch 图标。