增强功能

有许多增强功能可以提高 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 用户的体验。

启动画面

如“网络应用清单”章节所述，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）。

如需查看更新后的 iOS 和 iPadOS 屏幕尺寸列表，请参阅 Apple 人机界面准则

您可以使用 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 的显示模式。

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

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

如果您在 HTML 中添加以下标记，iOS 和 iPadOS 上的 PWA 将进入全屏模式，但与 Android 不同。

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

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

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

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

安装可靠性

在 iOS 和 iPadOS 15.4 之前的版本中，只有在用户使用浏览器中的“分享”图标打开 Share Sheet 时，系统才会从网络加载清单文件，而不是在页面加载时加载。因此，在该时刻之前，浏览器不会检查您的网站是否为 PWA，这可能会导致以下情况：清单无法加载或花费太长时间，而浏览器会忽略它。

如果浏览器无法按时加载清单，则按“添加到主屏幕”会在主屏幕上放置一个图标，但不会提供应用体验；它只会成为浏览器标签页的快捷方式。

资源