增强功能

有许多增强功能可提高 PWA 的转化和使用率。

应用快捷方式

应用快捷方式是指向 PWA 的深层链接的静态列表，它们写入您的清单中。Web 应用清单规范。它可让您定义一系列指向 PWA 中不同部分或功能的快捷方式，从而加快导航到经常访问的部分的速度。

应用快捷方式适用于大多数桌面操作系统和支持 WebAPK 的 Android，它们会显示在主屏幕、Dock 或任务栏中应用图标上的上下文菜单中，如下图所示：

Android 和 macOS 中的应用快捷方式。

如需访问此菜单，用户必须右键点击或长按 PWA 的图标。

。

快捷方式在清单的 shortcuts 成员中定义。它接受具有以下属性的成员数组：

name
将向用户显示的文本，通常在上下文菜单中。
url
当用户从这个快捷方式启动 PWA 时，PWA 应加载的网址。它应是 PWA 范围内的网址，并且应该深层链接到 name 或 short_name 所描述的功能。
short_name
（可选）没有足够的空间来显示 name 字段的完整值时使用的较短名称。
description
（可选）说明此快捷方式的作用
icons
（可选）一组图标对象，其中包含 src、type、sizes 和可选的 purpose 字段，用于说明哪些图片应代表相应快捷方式

您应尽量使用应用快捷方式。这意味着您不能指望这些快捷方式一直显示，并且即使它们出现，您也不知道将会显示多少个快捷方式，或者平台是否会因为浏览器自行决定忽略这些图标。关于每个平台的完整讨论不在讨论范围内，但您可以在下文了解它在 Android 和桌面设备上的工作原理。处理这种不确定性的最佳方法是按优先级对商品进行排序。

。

以下代码示例定义了不同的应用快捷方式，如果您在使用 Chrome 的 Android 设备上安装应用，或者在桌面设备上使用 Edge 或 Chrome 安装应用，则可以尝试使用不同的应用快捷方式。

iOS 和 iPadOS

在发布 PWA 时，您可以使用一些增强功能，改善 iOS/iPadOS 版 Safari 用户的体验。

启动画面

如“Web 应用清单”一章中所述，Android 会根据清单的值自动创建启动画面。但 iOS 和 iPadOS 却并非如此。在这些设备中，您应使用 <link> 元素将 HTML 中的启动画面定义为静态图片。

这些映像在 Apple 设备上称为启动映像，它们使用值为 apple-touch-startup-image 的 rel 属性，例如：

<link rel="apple-touch-startup-image" href="ios-startup.png">

问题在于，启动图片必须与 PWA 在打开时具有的窗口大小完全一致。因此，不同的 iOS 和 iPadOS 设备需要不同的映像。iPad 需要覆盖更多情况，例如横向/纵向打开以及在多任务模式下呈现 PWA（例如屏幕的 1/3、1/2 或 2/3）。

您可以参阅 Apple 人机界面指南，查看更新后的 iOS 和 iPadOS 屏幕尺寸列表

您可以通过 media 属性内的媒体查询来设置不同版本的发布图片：

<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">

iOS 启动图片的设计模式

定义启动映像是一项艰巨的任务，因此我们提供了一些自动生成和配置的工具：

  • 静态生成功能与构建系统集成，可创建所有 PNG 静态图片，并提供包含 <link> 元素的 HTML 代码以注入到文档中。PWA 资源生成器就是此类工具的一个示例。
  • 客户端生成器，一种 JavaScript 工具，可以根据当前设备的类型和屏幕尺寸将启动图片的一个或多个 base64 版本嵌入到 <link> 注入的元素中。您可以使用内存中的画布、渲染图片，并使用 PNG 文件将其转换为 data: URI。PWA Compat 库是一个简单易用的客户端库，通过克隆 Android 的典型启动屏幕来实现这一点。

检测 Apple 移动平台上的 PWA

虽然您应该在 PWA 中使用渐进式增强功能和功能检测，但在某些情况下，我们需要知道用户是否使用的是 Apple 移动平台上的 PWA，例如，当您想要提供安装说明或添加指向仅限 iOS 平台且特定于平台的应用的链接时。

为避免读取用户代理字符串，请检查 navigator 对象的 standalone 属性。这是一个非标准属性，并且仅适用于 iOS 和 iPadOS 上的 WebKit 引擎。

  • 如果 navigator.standalone 为 undefined，则表示用户未使用 iPadOS 或 iOS 设备。
  • 如果 navigator.standalone 为 false，则表示用户在浏览器中打开了 PWA，并在其中使用该 PWA。
  • 如果 navigator.standalone 为 true，则表示用户从主屏幕打开了 PWA，并且正在获得独立的 PWA 体验。

全屏支持

在 iOS 和 iPad 上的 Safari 上，仅支持 display: standalone 作为 PWA 图标的显示模式。虽然 Android 设备不支持 display: fullscreen，但可以使用非标准元标记使 PWA 进入全屏模式。

在下一张图片中，左侧显示的是采用主题颜色的默认独立设计，右侧显示的是采用全屏 iOS 模式的 PWA，可让您在状态栏后面呈现内容。

一个独立的默认行为（左）和全屏 iOS 屏幕（右）。

如果您在 HTML 中添加以下代码，您的 iOS 和 iPadOS 上的 PWA 会进入全屏模式，但不同于 Android 模式。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

在此模式下，设备的状态栏（显示时钟、电池电量和通知图标的顶部）仍然可见，但会以透明背景呈现在内容顶部。

使用此模式时，请注意设计，因为操作系统总是以白色呈现图标，因此您始终应使屏幕顶部的背景与浅色内容形成对比。此外，请务必使用 CSS 环境变量在安全区域中呈现内容，如《应用设计》章节中所述。

默认情况下，视口的顶部 0 像素位于状态栏的下方；如果您添加黑色半透明元标记，视口的顶部 0 像素会与屏幕的实际顶部相一致

安装可靠性

版本低于 15.4 的 iOS 和 iPadOS 中的 Safari 仅在用户打开分享表单（使用浏览器中的分享图标）时从网络加载清单文件，在网页加载时不加载。因此，Safari 在此之前不会检查您的网站是否为 PWA，这可能会导致无法加载清单或清单用时过长，导致 Safari 忽略它。

当 Safari 无法按时加载清单时，按“添加到主屏幕”在主屏幕上放置图标，但不提供应用体验；它只能是 Safari 标签页的快捷方式。

资源