增强功能

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

应用快捷方式

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

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

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

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

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

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

您应将应用程序快捷方式视为尽力而为的功能。这意味着您无法依靠这些快捷方式始终显示，即使它们出现，您也不知道会显示多少快捷方式，也不知道平台是否会忽略这些图标，因为浏览器自行决定。我们不会针对每个平台进行全面讨论，但您可以在下面了解其在 Android 和桌面设备上的运作方式。处理这种不确定性的最佳方法是按优先级对商品进行排序。

以下代码示例定义了不同的应用快捷方式，如果您在 Android 上使用 Chrome 安装应用，或者在桌面设备上使用 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 上需要包含更多情况，例如横向/纵向打开以及在多任务模式（例如屏幕的 1/3、1/2 或 2/3）下渲染 PWA。

您可以参阅 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，并且正在使用该应用。
  • 如果 navigator.standalone 为 true，则表示用户从主屏幕打开了 PWA，并且正在享受独立的 PWA 体验。

全屏支持

在 iOS 和 iPad 上的 Safari 中，PWA 图标的显示模式仅支持 display: standalone。虽然 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 环境变量在安全区域内呈现内容，如《应用设计》章节中所述。

视口的顶部 0px 默认位于状态栏下方；如果您添加黑色半透明元标记，视口顶部 0px 将与屏幕的实际顶端匹配

安装可靠性

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

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

资源